We recently custom-built an awesome-looking WordPress website that was a huge upgrade in quality from what the client had previously. Unfortunately, the high-quality images and functionality were taking at least 8-10 seconds to fully load. In today’s competitive market of limited attention spans and SEO rankings, 8-10 seconds is much too long.
To ensure an upgrade in website speed, we analyzed the site, identified the bottlenecks, and implemented a variety of changes, resulting in a final load time of 2-4 seconds: a reduction averaging 65-70%!
Want to know how we did it? Keep reading!
There are plenty of tools available to analyze your website, but the one we most highly recommend is Pingdom. We prefer this tool because it enables us to see a detailed analysis of where site load times are coming from – down to individual files that take the most time to load.
Using this tool, we were able to determine that most of the load time was being caused by the following factors:
- Hosting – several seconds were spent just on resolving the domain name
- Images – we had dozens of high-resolution images on each page
- Scripts, Stylesheets & Fonts – some of our CSS, jQuery, & fonts could be processed more efficiently
Let’s start from the bottom up:
Scripts, Stylesheets & Fonts
Sometimes, though, it helps to dig a little deeper and ask questions like these:
- Do you have CSS stylesheets loading in the footer? Try moving them into the header for faster performance
- Do you have external scripts loading in more than once? Try removing the duplicate references so each script is only pulled in once.
- Can you minimize the number of fonts you are using? Are you loading in fonts that you don’t actually need?
- In our case, we realized that the Hubspot forms were pulling in a font that wasn’t actually used anywhere. Unfortunately we couldn’t remove the reference altogether, so we took advantage of it by using it as the fallback for the site’s premium font. Then we were able to remove references to the previous fallback font, reducing unnecessary overhead.
With dozens of images loading on almost every single page, it’s no wonder this site was struggling under the burden of a higher-than-average page weight. We needed a solution that would positively impact the load times, without negatively affecting the end-user’s experience.
The end result was a combination of a few different solutions:
#1: Image Resizing
The first thing to check for is whether you’re using the most optimally-sized images on your site. Generally speaking, you should never upload an image larger than 1920px wide to your website. In fact, you can usually get away with no larger than 1600px.
But even more specifically, if you’re loading in an image at its full 1920px resolution, but it’s only being displayed at about 900px max, then you should pull in a smaller version. WordPress automatically resizes all of your uploaded images into multiple versions, including Large (1024px wide), Medium (300px wide), and Thumbnail (150x150px), so that makes it easy for you to select the right dimensions for your needs.
#2: Image Compression
We always recommend compressing your images with a tool like tinyjpg.com before uploading them to your website. This will drastically reduce your image file sizes, often by around 70-80%, without negatively affecting their quality.
Another tip would be to save any non-transparent PNG’s as JPG’s instead, because they take up a LOT less space.
If you still need some extra help (which in our case, we did!), you can also consider installing a WordPress plugin like Smush to reduce image file sizes further.
For image-heavy sites like the one we were working on, image resizing & compression might not be enough. So another option is to implement lazy-loading – waiting until the page is fully loaded before displaying the images.
There are plugins available to handle this, including a3 Lazy Load and Zedna WP Image Lazy Load. Both of these offer lots of options to lazy-load your images, videos, and iframes. Zedna is also capable of handling background images as well.
In our case, most of the images we were concerned about were background images, but lazy-loading them created an obvious blink that wouldn’t look good from an end-user’s perspective. So we put our heads together and came up with a custom solution that worked perfectly.
Since we had complete control over the HTML on most of the image-intensive pages, we adjusted the key elements to store the background image as a data attribute, instead of as a style:
<div data-image="http://example.com/image.jpg" style="background-image:none">Content</div>
We wrote a custom jQuery script that would wait for the page to fully load (or for the element to be scrolled to), and then use the data attribute to set the background image. To avoid the annoying blink that the end-user would end up seeing, we only applied this change to the elements that weren’t immediately visible.
This custom solution drastically cut down the load times by waiting to pull in most of the images until after page load, while minimizing/preventing any negative experience for the user.
Hosting & CDNs
The above changes that we’ve already outlined did quite a bit, cutting down our load times to between 3.5 and 4 seconds (by about 50-60%). But we wanted to get those load times down as much as possible, which led to our final recommendation: changing the host and implementing a Content Delivery Network (CDN).
If your hosting plan only costs a couple dozen dollars a month (or worse, is free!), then remember: you get what you pay for. If website speed is a top priority for you, then paying a higher premium for your hosting may be a necessary investment.
Another investment that may be worth your consideration is a Content Delivery Network (CDN) like Sucuri or Cloudflare. They will provide stronger caching levels, plus a host of security measures as an added bonus.
Upgrading our client’s hosting plan and setting up a CDN turned out to be the final key to improving their site speed, and there’s a high probability it may do the same for you!
We’re Here to Help!
If any of this sounds overwhelming, or you need the expertise of a developer to analyze your unique situation and optimize your site, we can help!