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
2. Minify and Compress Scripts
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.