Boost website speed

Make Your Site Faster: 4 Easy to Implement Tweaks

We look at four easy-to-implement tweaks for decreasing load times, including minification, repositioning script loading, and content distribution networks.

We all want faster loading websites and there are dozens of tweaks that we could make to deliver better performance to our users. Whether your site generates revenue from advertising, lead generation, or sales, the quicker pages load, the more effective they will be at securing conversions.

But we have to balance the cost-benefit ratio. Optimization is the process of maximizing the ROI of our efforts. With that in mind, I’d like to look at four-speed optimizations that webmasters can make that will have a significant impact on site load-times (or perceived site load times).

I’m going to keep the techniques I highlight general, but if you’re a user of a content management system like WordPress, you might want to check out this article.

1. Move Scripts to The Bottom of The Page

Because of the way HTTP works, there is a limit to the number of parallel downloads that a browser can make for each page — a situation that will be remedied when HTTP 2.0 is released. For now there are ways to circumvent parallel loading limitations, including hosting some assets on different hosts, but JavaScript loaded in the head of a page will block all parallel downloads.

You’ve probably seen pages that start to load and then become non-functional for some seconds — JavaScript is probably the culprit. Moving scripts to the bottom of the page allows most of the interface to load before the scripts, which can significantly speed-up perceived load times.

2. Minify and Compress Scripts

Both CSS and JavaScript assets usually contain superfluous characters that make it easier to maintain but increase load times. Minification removes excess whitespace, comments, and other unnecessary verbiage. On its own minification leads to minor reductions in file size, but when combined with compression, it can make a significant difference.

Most modern browsers and web servers support the gzip format, which will reduce file sizes in exchange for a little extra processing overhead at both ends, which modern machines are more than capable of absorbing.

3. Optimize Images

One of the biggest mistakes that novice web designers make is to use one large, unoptimized image and leave the resizing of it up to the browser. There are a few ways that we can optimize image sizes. I’m going to recommend three: avoiding image scaling in HTML, lossless compression, and CSS sprites.

If you scale images in HTML rather than providing properly sized images, the file sizes are likely to be larger than necessary. If you have a 500px square image in your HTML, make sure you provide a 500px square image on the server, not a massive image the browser has to download and resize.

Lossless compression methods, like that used by Yahoo’s Smush.it tool, remove unnecessary bytes from image files without affecting their appearance. You can think of it as minification for images.

CSS sprites are a bit more tricky to implement, but they are another way of getting round the limitation on parallel downloads by including multiple images within the same file and choosing which is displayed in CSS. This is an excellent article explaining CSS sprites and how to create them.

4. Implement A Content Distribution Network

For many sites, a CDN is overkill, but for sites with a geographically dispersed audience or heavy load, shifting the burden of loading static assets from the main server to a network of international edge nodes can make a huge difference to load times.

In my experience, these are the four tweaks that webmasters should focus their initial performance optimization on. They can be followed up with implementing lazy loading for images, experimenting with caching, and other optimizations, but these will form a solid foundation on which further performance optimizations can be built.

Leave a Reply

Your email address will not be published. Required fields are marked *