Throughout 2016, a lot of the focus has been on responsive design and making sure the website you’re operating or have in development is “mobile ready” or “mobile responsive”. Whilst this is obviously important given the increasing market share of mobile/tablet users in comparison to typical desktop devices – it is not the be all and end all and you should not sacrifice the speed of your website, on any device in order to generate compatibility and pixel perfect rendering across the board.
Now for those in the know, you’re probably asking why would you need to sacrifice speed in order to achieve a responsive layout and you’re absolutely right. If you’re building something from scratch using a responsive CSS framework such as Bootstrap, you probably don’t need to worry about speed so much. But, there are people out there making use of the weird and wonderful WordPress plugins or bolt ons for example who are quite happy to include another 10MB of CSS and Javascript in their designs in order to generate a responsive layout. This article is primarily aimed at them but if you have an interest in speeding up your own website, perhaps the content within will give you some food for thought.
Load What You Need
This might seem obvious but so many people have the attitude that if it works it works and don’t really care about how it’s working – which is a worry. WordPress users are a prime example. They’ll happily install a complicated, server heavy plugin to perform a minimal task on a page deep inside their website and give little thought to the fact that the JavaScript and CSS required by the aforementioned plugin is called and served on every single page of their website – despite it not being fundamentally required.
Fortunately, if you’re a WordPress user there are lots of plugins on the market to assist with this. Some will cache files as they’re loaded for the first time and some will make sure the code to call the required files is only output on the required pages. If you’re not an experienced developer looking for caching plugins might be the way forward. If you are an adept developer then you should not look to include all calls in your header/footer but you should be calling specific files for specific pages. Or look to caching the whole thing using something server side such as Varnish.
Limit Called Files
This follows on from the above. Each file you call on a given page load be it a stylesheet or Javascript function makes a request to the server. Regardless of filesize, a request takes time to hit the server and return to the user (the website visitor) so even if you do minify everything (which we’ll explain later), the requests themselves can add seconds to your page load time and seconds are significant. As mentioned above, WordPress is a prime example of this as it includes every file on every page. You need to limit this. You need to either manually consolidate all of your Javascript and CSS calls into single files such as a style.css or a functions.js or make sure of some of the plugins mentioned above in order to make sure the only requested files are the ones required for rending the specific page that you’re on.
Minify Essentials
Given the benefits of Minifying I’m surprised to see it used so very little. Perhaps people don’t take their site loading time so importantly or perhaps people are unsure of the benefits. Regardless, it’s something you should most definitely be looking at doing if you’re serious about having your website perform.
For those not in the know, minifying is where you remove all of the unnecessary whitespace from your JS or CSS files. New lines, spaces, tabs – anything taking up disk space that isn’t required for the script to function. Doing this can decrease your filesize by 50% in some cases and a 50% smaller file means it loads twice as quick in theory so it’s definitely something worth doing.
Consider CDNs (content delivery networks)
A feature that is becoming more and more common is the use of CDN’s or content delivery networks. These services basically take the load of your own web server and put it on theirs. As a basic example, imagine serving a page on your website that contains 10 images. Those 10 images could be sent off to load from a CDN so when a visitor accesses your site, the only thing you web server serves them is the page itself. All the images then load in the background from a high powered, fast server thus making your whole page load massively quicker and limiting the bandwidth used by your own server.
Lots of web hosting companies partner with content delivery networks from the outset. Web hosting firms such as HostPresto.com have provisions in place that allow them to create high powered bespoke hosting solution that utilise content delivery networks out of the box. That doesn’t mean you need to switch hosts in order to use a CDN, most will work by simply uploading your files to them and changing the paths in your source code but if you want to go beyond basic remote resource loading it’s probably best to host with someone who has the capabilities in place to do so.
If you’re an experienced designer or developer a lot of the above is probably second nature to you. I don’t want to tell you how to do your job or reinvent the wheel by going over old ground. As I say, this article is aimed at those who don’t know the real ins and outs as to how things function and who couldn’t easily spot where a potential issue might arise from. Of course you don’t need to take my word for it either. There are enough tools out there such as GTMetrix who will analyse your site on the fly and tell you exactly where you’re going wrong and how to resolve it.
View GizmoBolt Tech Blog
