7 Things That Are Slowing Down Your Site

You’ve spent a lot of time perfecting your site. You meticulously picked every font, positioned every image, and placed every analytics code. You’re ready to launch and show the world what you’ve got. You click the button and… nothing. The page isn’t loading. Did something crash? Check the coding and plug-ins. No, everything is ready to go. You try again. Still nothing. You wait 10, 20, 30 seconds. Finally you see the outline of your site start to appear on the screen. It’s just slow load times. Every web developer’s worst nightmare.

If you’re gaping and wondering how thirty seconds is a long time, consider this. A study by Kissmetrics found that 47% of consumers expect a site to load in less than 2 seconds. Even more telling, the same study shows that 30% of visitors will abandon your site completely after waiting only 6-10 seconds. Only 20% said they would wait longer than 20 seconds before abandoning. So if your page takes 30 seconds to load, you’re only getting a fraction of the visitors that might actually be visiting your site. How slow does 30 seconds seem now?

Don’t worry though, there a few things you can adjust on your site to easily shave seconds off your load time.

Server Performance

When a user attempts to visit your site, the browser (think Chrome, Safari, etc) first has to send a ping to your server to get all the information needed to load the site. Poor server performance means this process is going to take a while. Even if you have everything else on your site optimized for speed, a slow server will always result in a slow load speed.

This is likely a problem with your web host. If you have a cheap webhost, you’re probably sharing server space and resources with who knows how many other websites. Heavy traffic to your site, or any other site on the server, will slow everyone down because you’re waiting in the queue to get resources from the server.

Related: Best Practices for Structuring Your Website

The Solution: As compelling as cheap servers might be, opt to pay a little extra for better performance. Your visitors will thank you and in return they’ll actually come back to your site.

Bonus tip: keep an eye on your traffic! Your server can only handle so many requests and you may need to increase your space if you see a steep increase in visitor traffic.

Ad Network Code

Display ads seem to be a necessary evil in order to offer free content to your visitors, but it could be what is slowing you down. Most ad networks use Javascript to present their ads and if this code takes a while to load, it may block other elements on your site (like the actual content) from loading.

The Solution: If you need to keep the ads on your site, make sure you’ve implemented asynchronous delivery methods. Asynchronous loading allows other elements of your site to load at the same time as the Javascript. This multi-streamed approach means that a single slow element, like an ad, won’t block the rest of the site from getting to the user quickly.

Analytics Tags

Like ad networks, a lot of analytics tags are Javascript-based. Also like ad networks, most analytics providers offer asynchronous delivery. The biggest problem, however, will be using multiple analytics tags that may be measuring the same thing. This is inefficient and unnecessary.

The Solution: Review your analytics tags. Do you have multiple tags in place that measure the same thing? Parse these down and use only what you really need. This could save you a few vital seconds.

Are you sensing a theme here? Javascript is a powerful, often beautiful, tool when creating a website. When implementing Javascript functionalities think about what is most efficient. For example, many sites use Disqus to enable commenting and while this might look nice, it’s probably not the most efficient use of resources. I doubt any consumer is going to be blown away by your use of Disqus to warrant the time they had to wait for it to load.

The Solution: Think through your site build. Keep efficiency in mind and don’t add more than you need to.

Unoptimized Images

Images can be a vital part of your site. It can add clarity to content publications, break up text, and draw visitors attention. But the truth is, images could be slowing down your load speed if they aren’t optimized. Considerations include the size and format of the image file, the dimensions of the image, and the number of the images on the page. Having many large images in a dense file format will take a while to load.

Related: Responsive Design vs. App Development – Weighing the Options

The Solution: For image format, browsers can load JPEG images the fastest closely followed by PNG and GIF respectively. Heavy formats like TIFF and BMP will eat up huge chunks of your load time. Make sure you pay attention to the dimensions of the images as well. Standardizing these across the site will help the browser render the images more quickly. In addition, a modest 5-10% reduction in file size per image can have a noticeable impact on load time. Finally, try not to have more images than you need. Images can draw attention and help explain concepts, but too many becomes distracting and overwhelming.

Code Density

Think about losing your keys in your bag when it’s clean versus when it’s stuffed to the brim with your belongings. It’s probably easier and faster to find your keys in the clean bag than than over stuffed one. That’s what happens to your browser when your site is built and running on a dense, possibly inefficient, code base. It has to dig through the code and find what it’s looking for. Heavy, dense coding also takes longer for your browser to pull from the server and surface on your site in the first place.

The Solution: Decreasing the density of coding will be a difficult task, especially if you’ve continued to build on inefficient or messy HTML markup, but the payoff will be significant. One way that you can minimize the amount of markup you need is to make careful use of HTML tags like section, article and nav, as well as helpful ids and classes. The more efficient your markup is, the faster your browser can read and load it.

Inefficient CSS

Similar to code density, your CSS stylesheets can also impact your load time. Again, if the stylesheet has a messy and inconsistent markup your load time will suffer.

The Solution: See the HTML solution above. Tighten everything up and make sure that your browser has a clean place to start when it attempts to bring your site to the consumer. For CSS specifically, consider the hierarchy of your design so you can make effective use of the cascading nature of the language.

There you have it! Seven problems and their relevant solutions. You may have noticed a theme, but in case you didn’t here it is: efficiency produces efficiency. If you’re doing everything you can on the backend to eliminate unneeded extras and lower the strain on resources, your site will load faster.