How many times have you landed on a website only to wait for a few seconds with an animated wheel spinning… waiting… for… the… page… to… load…? Did you stick around? If not, don’t feel bad, you’re a part of the majority. But, on the flip side of that coin, you don’t necessarily want people leaving your website. You’d rather they stick around and become customers – right?
This week we’re going to roll up our sleeves and tackle the practical things you should know about for page load speed. We’ll start with the simple and obvious.
How big are your images?
We’ve all done it – gotten a new picture for the website, gone to the admin area, and uploaded it, then added it to the page – letting it load full size. Most pictures, especially if taken with a camera or good cell phone, are going to be at least 2-3MB. It doesn’t have to be that big online!
WordPress makes it easy because you can pre-set multiple sizes (easiest to do when you build your site, but you can adjust down the road with a plugin). But, depending on how you’re going to use the image, WordPress only pulls the full size into the page. This applies to featured images, headers, and background images.
The size defaults can be a little weird depending on your needs – but you’ve got the option for thumbnails, medium, and large sizes. More are available depending on your theme and plugins. We like to set our thumbnails to 250-300px, medium to 500-600px and large to 1000-1200px.
IF you’re going to use the image as a featured image, header, or slider image, resize it first. There are a bunch of free options, here are our top 3 picks: Adobe Spark, Pixlr, and Fotor. All of these give you the ability to resize, crop, and do all the basic editing that you need.
If you’re placing the image on a page, select the size you want when you place the picture. It’s ok to go slightly larger than the exact size you need. For example, if the medium size is set to 500px, but you need to have a picture be 400px wide – then select the medium setting. You can select and drag the image size once you have it on the page.
Last, regardless of size, use an image optimization plugin. If you only have a few images, free versions will work. But if you have either large images or many images, you’ll want to go with a premium version. When you review various test results, Optimole walks away with an 88%+ optimization, Imagify has a 77%+ optimization, and TinyPNG lands at 73%+.
Do you really need that slider on the home page?
Beyond load time, people are blind to sliders. It used to be the latest and greatest feature of a website. Not anymore – at least not for the main feature of your home page… for the majority of websites. But, that’s a separate topic.
Sliders, especially those that include animation, can kill your page load time. Here are some tips for lowering the impact of load time:
- Optimize your images ahead of time.
- Adjust Lazy Loading settings if available.
- Most image optimization plugins will create the new WebP image formats – many sliders have a setting that allows you to use this new format.
- If you have the option, use a slider that is lighter weight, not as bloated.
The wave of the future is not a slider, but a well-optimized large image. Think forward to see if that option will work for you now.
What is caching & how does it help with page load time?
Everything in the online world has some form of cache. Cache is simply the process of saving bits of information instead of having to look it up every time it is requested. Think speed dial vs. needing to look up a phone number every time you need to make a call.
It starts with your browser that saves a copy of the websites you visit in its “brain”. That cache can be problematic if it doesn’t clear when updates are made to your website. For the most part, it does a quick check to make sure information and files are the same. But, we’ve had our browsers showing an old version – and we’ve had to shut it down and open again before it clears.
Your internet service provider and all the switches across the web store the basic information (called DNS) so when requests to your website or email are sent it gets sent to the right place quickly.
Your web server can have cache capabilities. For example, our servers run Litespeed. We have a cache component on the server itself that works hand-in-glove with the Litespeed plugin on our websites.
Your website needs to have the ability to “create” its own cache and store information so it’s super quick to build a page. Most cache plugins have the ability to shrink the style and javascript files. Some even produce a static version of your page – instead of having to talk to the database behind the scenes and pull a bunch of files together that in the end produce the whole.
A great, easy to use cache plugin is WP Rocket, well worth its money. There is no geek, only simple on-off buttons. And, it works very well with the Imagify image optimization plugin we talked about above. WPMUDEV also has a great cache plugin – Hummingbird. Here’s an article from them that explains what it can do. They’re a great company with great products, and well worth the investment for a great cache plugin.
Defining the “Geek” of caching
With every cache plugin, you’re faced with different terms. Let’s take a minute and turn these into English.
- Deferring CSS and JavaScript files — This is simply loading non-critical files from the footer of your site (last) instead of first.
- Minify for CSS and JS — First, a quick rabbit hole… CSS is “Cascading Style Sheets”, or the files that manage the layout and style of the website. JS is “JavaScript”, scripts that help create the functionality of the website. Now… minifying those files means removing comments and spacing from the files that are served to your website visitors. This makes the files smaller.
- Concatenation of CSS and JS — This is the process of taking several or all of the CSS or JS files you have and creating one file. The plus is only 1 file to load. The minus is that unless you meticulously test each file, stuff breaks. There are plugins that take the total Geek out of the process, but it is still a very painful process… but, if you’re working on shaving off seconds or milliseconds, it’s worth the investment for a developer to work through this.
- Lazy Load integration — If you have several images on the page, all of them don’t need to load in order for the top of the page to be functional. Lazy loading loads the images at the top of the page first and holds the other images back until you scroll down and they begin to come into view. These images that load later don’t affect the page load time.
- Eliminate render-blocking resources — According to Google, “render-blocking” only refers to whether the browser has to hold the initial rendering of the page on that resource. In English: If your website can’t load until certain files are in place, people can’t see or interact with it until those files are loaded. The fix for this is in the first three bullet points.
Hosting, Themes & Plugins
We’ve talked about the importance of having solid hosting and plugin bloat in our article on optimizing your website, so take a browse if you missed that tip.
We haven’t talked about themes
Many themes are poorly coded and have bloated code. So, what do you look for? We recommend either customizing one of the themes that WordPress has provided or use a premium theme (not free). And, within the range of premium themes, there are still bloated ones that load slower.
Even though the page builder is one of the more challenging (you only see the blocks, not the content), the DIVI theme is one of the fastest loading ones available. When we’re looking for a theme on Themeforest, we look for those that highlight being optimized and having a high score for load time along with a high rating, recent updates, and few issues noted in the comments (along with how responsive is the developer).
Putting all the pieces together
If you properly size your images and then optimize them, integrate a good cache plugin and reach out to your favorite web geek if you need help adjusting settings, invest in good hosting, and be aware of your theme and plugins, you’ll be further down the path than many others.
These things will become more important in the future. Google is rolling toward making page load time a more important ranking factor in 2021. We’ll cover the details that they are paying attention to in a future tip.
For now, cheers to your faster loading site!
Your Online Partner… for Success
If you’d like to have us help with a review of your page load time, please don’t hesitate to reach out. We’re here to turn the geek into English and take care of you online!
