How to Maximize Site Speed - Part 1
In: Product News & Releases
Jul 6, 2018
When it comes to getting every drop of speed out of your site, the effort is not dissimilar to the work mechanics do to maximizing a race car’s performance. The tools may be different, swapping wrenches for script tuning, dynamometers for load timers. The patient is made of bits and scripts rather than bolts and sheet metal. However the goal is the same.
Websites have become complex software applications in their own right, challenging the most experienced website programmers and developers, who spend hours calibrating each section to craft a fine balance between features and fast delivery. The good news is regardless of size, all website performance endeavors go through the same set of processes. While this article is not the definitive list of “how to’s” it will address the key topics you should focus on to turn your website into a Formula One racer.
Webpages include one or more files, called scripts and stylesheets, which provide additional functionality and layout formatting for the page — part of the site’s user experience schema. Some webpages can require dozens of these files. Unfortunately each file takes time to download and many files will cause webpages to load slowly.
Optimizing this will involve two related techniques, minification and combining. Minification or minifying is the act of reducing a text file’s size by removing unneeded spaces, line returns and comments. While having them makes a script file’s contents easier to read for you and me, computerized devices can understand these files quite well without them, and every space adds one byte to the file size. Once files are minified, they can be combined, or grouped, with other similar files and downloaded as a single file. As you can imagine minifying and combining many files lightens the load for browsers to receive.
An easy way to reduce files is to employ the use of performance plugins. Systems like WordPress, Druplal, Joomla, and Magento have lots of plugins that can do the job — including SmartCache. These plugins automate the process of minifying and combining script and stylesheet files for you.
Shrinking text files is only the start. Images, which comprise more than 80% the download weight online, also can be dehydrated. Many of them are meant for print so they are of a greater resolution or dimension than what is necessary or comfortable to view online, and are much heavier than what a mobile user is willing to download. Sites like TinyPNG and services offered by Adobe were designed to squeeze images down to manageable sizes by removing superfluous pixels, colors, dimension, and meta data (stuff like geographic coordinates and tags that are saved by cameras). In WordPress and other CMSes there are plugins that can optimize images such as Smush, Smush-It, Shortpixel, and EWWW.
It has been said that no matter how fast we make the Internet the world will always need caches. Our appetite for media content will forever outstrip the ability to deliver it quickly. The cache, or standby buffer, was borne from our collective impatience.
Some sites employ multiple levels of caching: fragment (or block) caching, script caching, image caching, database caching, proxy caching. Then add to it the caches maintained by browsers. They all follow the same principles — to serve content from a local copy until such content becomes too old, then update it.
Our duty as website developers or owners is to balance speed with fresh, relevant content. This balancing act is more of an ongoing live experiment where some content is archived for quicker reference, while others are pulled from source. When dealing with how to determine what to cache and how long to cache it, there is a simple philosophy: if it doesn’t change much then cache it for as long as possible.
With that, and without looking at the specific conditions, I would cache static images or media (such as logos, backgrounds, and thumbnails) for a long time — say 6 months or more. Cache content that changes more frequently less.
Or, install a performance plugin, such as SmartCache, which employs multiple intelligent caching modes so that you can control the specific cache age limits of each component and calibrate them by content type, presentation, and audience. Why not make it easy?
Now, caching, minifying, compressing and combining all sound like the magic bullet to ensure quick-loading pages, but there is another hidden devil that can thwart these bold efforts — external resources.
Simply put, an external resource is content or a feature that is not hosted on your site’s server. They can come in the form of YouTube videos, advertisement or feed aggregators, or third-party statistical scripts. As nice as they are their key drawback is that you have no control of their load times. A slow foreign feature will make the page its on display slowly. Period.
So my advice is to limit these goodies to a minimum, especially on focus pages like your home page.