Modern web design requires leveraging tools to improve the speed and performance aspects of a site. Today’s users expect a fast site that will load over a broadband connection or through a cellular service with no hiccups.
Between large images, full width designs, video content and the like, a website can become heavy really fast.
Not only is a fast site the expectation of a user, it’s also the expectation of Google. Several sources indicate that page speed has a high correlation to SEO, and it’s now a common offering for professional SEO services.
For this reason, it’s important to leverage tools to help increase the speed of pages and the assets loaded on them. This is especially true when implementing e-commerce software solutions as they tend to have a lot of heavy resources.
What Are Performance Optimizations?
When you hear a web developer talk about “performance optimizations”, it’s tied to the speed of a website with a common goal of making things faster for the user. Several things may be involved and there isn’t a one-size-fits-all approach for every website. Each enhancement is dependent on a site’s assets, template, plugins, etc.
Here are some areas we like to pay careful attention to:
File Minification
When a page is loaded in a browser, the browser has to parse all of the information in the HTML file including CSS stylesheets and Javascript functionalities. Anytime there is a blank space or white space in the HTML, it takes that much longer for the browser to parse the contents of the file. By minifying HTML, CSS and Javascript files on a page, you eliminate that extra fraction of a second it would take the browser to load. For large websites, typically at the enterprise level, every little fraction of a second adds up and can be detrimental to the performance of a site. But minification is also a critical element for small business websites too.
Image Resizing & Compression
Images can be the most compelling aspect of a website, but they can also be the biggest drain on its speed. Large images may be resized in CSS to look appropriate on a site, but the full version of the image is still being requested by the browser. This can quickly cause an image-filled page to take a while to fully load, leaving users frustrated while waiting. To avoid this and deliver on the expectations of most users, you want to resize images exactly as they load on a page and leverage file compression to make them that much faster.
Image Lazy Loading
Image lazy loading is a trick that allows images to only be visible as a user scrolls over them. Instead of loading all images and videos on a page at once, lazy loading allows websites to deliver content as the user interacts with it. Because it loads content in sections, the page responds faster and provides a much better experience for visitors of a site.
Browser Caching
Every time a user visits a webpage, the browser has to load a fresh version of the page. However, you can specify elements the browser should cache so it’s not a full page load every time. Not only will this help speed up a site, it also makes the experience for the user much better. And, if, or when you make changes to the page, you simply have to flush the browser’s cache to see the changes reflected.
Deferring Scripts
In many cases a website calls Javascript functions and CSS references immediately onto a page. Although the user doesn’t see this on the front-end of a website, this can cause a page to be extra slow. For this reason, you can defer the loading of files to prioritize the most important content first. For instance, a RECAPTCHA script will try to load immediately, but it’s not a required element of a page until the user reaches the footer (i.e., for a contact form). You can defer the loading of files and provide a better user experience.
While each of these areas have more underlying technical components, the overall message is clear – make a site faster for an improved user experience.
Fave Five WordPress Performance Optimization Plugins
NOTE: These recommendations are for WordPress only. If your website is built on another content management system, please contact us for more information.
With any of these plugins it is recommended to test them in a staging environment first. Depending on a website’s template and/or plugins, the front-end of a website can break if not properly configured.
1. Breeze by Cloudways –
Developed by the cloud-hosting provider Cloudways, Breeze is a speed optimization plugin that is one of the most user-friendly options available. It provides all of the necessary performance tools like file minification, CSS / JS file grouping, browser caching and more. Best of all, it’s compatible with most WordPress websites, including those not hosted with Cloudways.
The one thing Breeze is lacking however, is image optimization tools. Users are not able to compress images or take advantage of lazy loading with this particular plugin.
2. Autoptimize –
What if you could have a plugin like Breeze with image compression capabilities? Say hello to Autoptimize. This handy plugin allows developers to perform necessary performance enhancements like file minification, deferring certain files and scripts from loading right away, and it uses Shortpixel’s image optimization functionality to resize images on the fly. Additionally, users can enable lazy loading (with testing of course) to further speed up pages.
The one thing Autoptimize lacks in is its compatibility with WordPress templates. Older websites may experience compatibility issues and you’ll quickly be able to see if the plugin causes any damage to your site. Be especially mindful of Javascript functions when using Autoptimize.
3. Hummingbird / Smush –
From the team at WPMUDEV comes Smush and Hummingbird. Smush is an exceptional plugin to resize and compress images, and it even allows developers to “smush” entire directories of images. For websites that are primarily image-based, Smush is a must-have. Afterward, combine it with WPMUDEV’s optimization plugin, Hummingbird. This handy tool provides file minification, server caching tools and specification of files with deferred loading, among other things. Hummingbird will provide a nice before and after view of your site as well, so it’s easy to see where improvements exist.
The one thing about WPMUDEV’s plugins is the subscription model. Hummingbird and Smush are great plugins and have plenty of value, however, for a lot of small WordPress sites performance optimizations tend to be a one-and-done kind of implementation. The paid subscription may be worth it if you plan to frequently add new content and/or make changes to your website.
4. W3 Total Cache –
Similar to the other plugins noted here, W3 Total Cache offers a comprehensive solution to speeding up a site. From CSS, HTML and JS file minification to object caching and database / browser caching, W3 Total Cache does it all. It also syncs seamlessly to your favorite CDN to make your website that much faster.
The one downfall about W3 Total Cache is that it can be complicated to set up and the propensity to break a site is much higher. Plugins like Breeze and Autoptimize are user-friendly and easy to configure, while this particular plugin gets into some complicated areas. If you are not familiar with how certain aspects work, you could end up with a broken site.
5. WP Super Cache –
With over 2 million downloads, WP Super Cache is by far one of the most popular WordPress optimization plugins. This plugin caters to novice WordPress admins, but also offers plenty of features for more advanced users. The plugin allows for file minification, browser caching, object caching, database caching and more. Best of all, the plugin is completely free to use.
The one thing lacking with WP Super Cache is its ability to optimize images. It’s a great plugin on its own, but it will need the addition of an image resizing / compression plugin to deliver the most optimized experience.
Noteworthy Contenders
While we may have our favorites, here are several other optimization plugins to use with a WordPress website:
- WP Rocket
- WP Fastest Cache
- WP Super Minify
The important thing to remember is to test, test, test. Some plugins may not be compatible with certain aspects of a site. Find what works best for your site and optimize it as much as possible without breaking additional components.
Validating Changes
Before trying out a WordPress plugin for performance optimizations, you have to know what you need to optimize. Begin by running your website through Google’s Pagespeed Insights or GTMetrix. Both tools will give you a benchmark of how your site currently performs and where it needs improvement.
Once you have installed a performance optimization plugin, be sure to test it again through these tools to gauge the impact of your changes. The goal should always be to have a responsive sight that is as fast as possible, without sacrificing the user’s experience.
Remember, Speed Is Not Always A Simple Fix
WordPress has been around for a while and some older sites may not be able to improve speed and performance aspects. Due to outdated themes and old or unsupported plugins, the performance optimizations mentioned here may not work or you may end up with a dysfunctional website. The good news is that older web designs can safely be moved to newer WordPress frameworks where performance optimizations are easy to implement.
If you have run into issues with performance plugins and your website, consider hiring a professional to take a look. We’re always available and happy to help!
How have you improved the speed or performance of your website? Drop a line in the comments – we would love to know!
