How to Maximize Site Speed - Part 2
In: Product News & Releases
Jul 6, 2018
Now where were we? We’ve chatted about minifying and combining script files, dehydrating images, building a better cache, and keeping external resources at bay. Not bad. At this point you have the basic requirements to optimize your site and make Google PageSpeed happy (really your audience will be happy, who cares about Google!) Now we are going to discuss a few more technical concepts. Follow along with me.
Deferment and Non-Blocking Resources
When a visitor arrives at a page on your site they are typically presented with content from the top of the page (duh?!) So it stands to reason that you would want this juicy bit to load fast an smoothly so people can start using or reading it’s content, right? Of course. However, many websites are designed following the well-worn tradition of displaying a big, splashy image and headline at the top then the real content below. The trend today sadly goes further by throwing a amusement park of media and advertisements at the top of the page! Why not? The problem is that this principle, while offering your audience potentially relevant posts, or maybe show that you can find really cool images, defeats the prime directive: to present important information quickly.
So what can one do? First, if you followed the tips from the previous post, your banner or slide show images would be light and compressed, and your scripts easy to load. Add to that knowing when to use slideshows, galleries, ad-rollers, pop-in forms, and other fancy features.
You see there is a sweet spot on your webpages that is presented first, the “above-the-fold” area (named for the part of the newspaper that faces the public first), which is to be treated with some care. And browsers offer one more keen trick to help you present above-the-fold content quickly ahead of slow-loading scripts and flashy features. It’s called deferment.
Basically, deferring some weighty scripts and functions until later reduces a common problem, render-blocking, which, in not-so-jargony terms, is anything that can block the display of rendered content. By deferring scripts so that they load later, digestible content can be fully shown sooner and without forcing your public to wait. It’s a form of perception. As visual creatures, we want to be able to read and see material quickly then act on it. We can better tolerate waiting a little for a form to show if the related text is presented quickly.
Being able to defer feature scripts is not easy without some help. While you can certainly manage it in code, not everyone is comfortable with coding or are patient enough to spend the time to determine which function is deferred when. In WordPress, a performance plugin like our SmartCache offers an automated deferment mechanism. And SmartCache Premium goes one step further by providing a way to control the deferment of specific scripts. This latter feature is unique in the industry and is exclusive to SmartCache.
At this point we’ve talked about scripts, external resources and splashy features, but where do most of them come from? If your site is built in WordPress, Drupal, Magento, or any similar top-rated commercial content management system, these items are introduced from plugins (extensions or modules) that we install. There’s no magic here. We want that futuristic slideshow or fantastic parallax effect of our site so we install a plugin that offers it.
Fundamentally, a plugin is a packaged piece of software that adheres (mostly) to the conventions of the host environment, and extends the functioning of said environment. The WordPress ecosystem alone has almost 60,000 plugins that developers and site owners can download — many for free! So why do we install them? For the simple reason that it is far easier to adopt a feature created by someone better able to create it than to do it ourselves. It’s cost-effective, allows for a faster time-to-launch, and, for the most part, more efficient.
That being said, I did say “for the most part, more efficient”. There are times however that that sweet plugin ends up offering more bloat than benefit, and pollutes our nicely prepared pages with unwanted and non-performant scripts. How cruel! As credit to the plugin producers, they probably don’t intend to pollute your pages, but in the effort to make their software as competitive as possible, they will invariably include many scripts in their products that you may not need.
My advise is the same as that for external resources — be judicious. Investigate the plugin by viewing demos and reading reviews before installing it. Then, use it only where necessary. Remember, with plugins, less is more.
Another topic that often gets overlooked with maximizing site performance is the hosting system that broadcasts it. In the hosting industry not all hosts are created equally.
Now unless you are ready to pour thousands of dollars into your site and its hosting, you will probably sign up with a low-priced shared hosting provider. While there is nothing wrong with that there are a few things to consider:
- Are they familiar with or offer support for the content system you will be using? There are many that provide WordPress support with their plans
- Do they include that latest version of the server software (at the time of this writing, PHP 7.2, MySQL 8.0, Apache 2.4 and NGINX 1.9.5)? Or if they allow you to choose the version of these components?
- Is their bandwidth unmetered? If not, they might slow down your site if other parts of their ecosystem is slow — an act called throttling
- If you have the money and want ultimate performance, do they offer dedicated servers? With a dedicated server, you pay more, but your resources are not shared with other possibly slower sites.
- Does their system include some sort of hosting control panel (CPanel, HSphere, Plesk, etc.) This allows you or someone technical that you trust to calibrate your environment.
- Can you choose how much CPU or memory in your hosting? Dedicated server plans will likely offer this.
There are many more areas that can influence site speed and performance, some more advanced than others. For instance, I have not touched on fragment caching, or object caching, which is a technique whereby the system caches the results of an operation or a set of operations. This can have a profoundly positive impact on database transactions which tends to be one of the most expensive resources on a site. We will expand on this later.
Bottom line is mo matter how lean the gasoline is or how well you tune the engine, a Porsche will always be faster than a Festiva (no offence Ford!)
These elements are tools in your performance toolkit that, when effectively used, can turn a lagging site into a race car. But not without some elbow grease and the right gear.