12 Ways to Speed Up Your WordPress Website
Google has made site load speed a point of emphasis.
As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%. (Source: Google/SOASTA Research, 2017)
Translation: If your website takes too long to load, you’ll lose customers. They’ll go to a competitor’s site.
Other Google research found that the average time for a page to load fully on mobile is upwards of 15 seconds! Yikes!
Page Load & Cumulative Layout Shift (CLS)
To clarify, users can view a page before it loads completely. They’ll be able to scroll and interact with some elements, but slow-loading pages also cause cumulative layout shift (CLS), another page load bete noire.
What’s CLS?
The best real-world example is the clickbait site that loads umpteen ads, fonts, videos, and images, making pages jump. The layout keeps shifting.
Invariably, users click on the wrong thing and land on a page they have no wish to see. It’s an awful user experience. Google has taken notice and is cracking down.
So what can you, as the manager of a WordPress site, do to ensure that your site loads fast enough to retain visitors and stay in the good graces of search engines?
- Reduce the number of images on pages.
- Scale images to their display size.
- Optimize your images.
- Use a lazy load plugin for images.
- Use a caching plugin.
- Minimize HTTP requests.
- Minify and combine JavaScript and CSS.
- Limit fonts; avoid slow-loading fonts.
- Choose an optimized WordPress theme.
- Keep your plugins and themes up to date.
- Use a CDN (content delivery network).
- Choose a robust and reliable hosting service.
1. Reduce the number of images on pages.
Image-heavy pages can weigh in at several MB of file size. The user is essentially downloading an app. Your home page is the app, pretty pictures and all.
Users ignore purely decorative images and may not appreciate the massive background image adding two seconds of load time.
Images should illustrate, not decorate. Don’t overburden your pages with them.
2. Scale images to their display size.
When you upload an image, WordPress creates several copies of it in various sizes, then serves up the copy that matches the dimensions set in your theme. The problem is that most themes don’t define the correct dimensions!
So if your theme calls for a 600px wide image, and you upload a 3000px wide pic, WordPress will serve up the 600px copy at 3000px file size.
The 3000px image can be several times larger than it needs to be! And that affects page file size and load speed. Scale your images in Photoshop or a comparable image editor before you upload them to WordPress.
The easy-peasy way to resize and compress images is with a WordPress plugin like ShortPixel. It automatically resizes and optimizes images as you upload them and can also convert them to next-generation WebP files (which we’ll get into next).
3. Optimize your images.
The standard advice for image optimization is to resize and compress: resize those JPGs and PNGs and squeeze the heck out of them!
But resizing and compression will get you only so far. We recommend that you move away from JPGs and PNGs and embrace next-generation image formats like SVG and WebP.
SVGs are scalable vector images that display at any size without losing resolution. Their file size depends on the number of anchor points they contain.
A complex Illustrator file with blends and gradients won’t translate well to SVG, but most vector files do, and their file size is minuscule — often under 5KB. Illustrator has an export option to SVG — you may have to hunt for it, but it’s there.
Google developed the WebP format, which is so much more efficient than a JPG that a compressed WebP may have 20% to 70% of the file size of a comparable compressed JPG.
Unsurprisingly, Photoshop lacks native support for WebP export. The Photoshop plugin for WebP export is a pain to configure, so your best option may be to export an uncompressed PNG and use a cloud service like FreeConvert to create your WebP file.
Compression is usually a separate step. FreeConvert can handle this as well, along with sites like TinyPNG and Compressor.io.
Or, as mentioned, a single plugin like ShortPixel can resize, compress, and convert your images.
4. Use a lazy load plugin for images.
What? — There’s more?
We promise this will be the last tip about images. You may want to lazy load them, a common practice on enterprise and large e-commerce sites.
With lazy loading, an image loads only when it’s visible above the fold (the screen’s display area). Anything you have to scroll to see is below the fold, and with lazy loading, those below-the-fold images won’t load until the scrolling begins.
This saves load time because users download only the images needed for correct display.
5. Use a caching plugin.
An efficient caching plugin can have a more significant impact on page load times than almost any other factor.
Choosing the right caching method and/or plugin is critical for any server-rendered website, including WordPress sites.
At Culture Cube, we use WP Rocket on all sites we manage. It’s purpose-built for WordPress and designed for experts and novices alike.
Since implementing WP Rocket caching, we’ve noticed a dramatic improvement in load speed across the board. Some sites have seen a 10-30 point increase on Google PageSpeed Insights from this one change!
Object caching and WordPress
Any dynamic site, including WordPress sites, will benefit from object caching. Every page request in WordPress makes one or more calls to the MySQL database to return page content and metadata.
WP Rocket or other caching plugins will optimize browser and server caching. Object caching is a different animal — it’s the process of caching the results of database queries. This way, the database queries run only once and not repeatedly.
Memcached and Redis are the most common object caching methods on WordPress sites. Both are valid and reasonably easy to configure.
6. Minimize HTTP requests.
Plug-ins, images, videos, Google Maps, links to external resources, and other elements on a page create HTTP requests.
These are calls to internal and third-party servers.
The browser goes through a series of requests and checks to load a page, and the more requests it makes, the longer the line grows. Page load time will slow appreciably.
Keep the number of plugins and other resources that load on a page to a minimum.
7. Minify and combine JavaScript and CSS.
How much functionality do you need on a page? JavaScript can add more weight to pages than images, especially if it generates errors.
Extra white space in code, nested tables, inline CSS, and excessive DOM size (too many DOM nodes or HTML tags) all contribute to page weight and load times.
Minifying and combining the JS and CSS on your site can reduce the code file size of these resources, leading to faster loading pages.
Bear in mind that minifying and combining those files has the potential to break the styles or functionality of your site. Back up your site and test thoroughly if you decide to minify.
8. Limit fonts; avoid slow-loading fonts.
Believe it or not, custom fonts can be one of the biggest drags on page load.
Years ago, graphic designers ordered from a short menu of browser-safe fonts. But now, with advances in web and browser technology, the font menu has expanded to accommodate every taste.
Unfortunately, many graphic designers, who were trained as print designers first and web designers second, dip into the Adobe Fonts library almost by instinct.
But Adobe Fonts can be hard to read in a browser. They require special licensing. And compared to open-source Google Fonts, they take forever to load.
Limit the number of fonts you display on a site — no more than two — and choose your font face wisely, grasshopper.
Key CDN has been kind enough to publish a blog ranking the fastest loading Google Fonts.
And if you really want to get into the font weeds, this blog describes several strategies to reduce font load times, including preloading, font swapping, and using Web Open Font Format 2.0 (which has the smallest file size).
9. Choose an optimized WordPress theme.
Some WordPress themes are more straightforward to customize than others. Some have better functionality and prioritize page load performance.
Unoptimized themes can load a ton of unnecessary files and scripts. We won’t point the finger at the worst offenders, but we can tell you that some of the better-optimized, faster-loading themes (as of 2022) include Elementor, Neve, Astra, and Divi.
Culture Cube uses Divi on most sites we build and manage. We like the aesthetics, functionality, and ease of editing. While it did at one time present page-loading problems that had us wondering if we should switch to another theme, recent updates have made Divi one of the best themes in terms of load performance.
10. Keep your plugins and themes up to date.
Although not as crucial as other factors, out-of-date plugins and themes can hurt page speed.
Most plugin and theme developers release regular updates, adding features and boosting performance. Keeping all add-ons current is a simple way to ensure your site is secure and performing at its best.
If you notice that a plugin hasn’t been updated in 6 months or more, it might be time to shop for a different plugin offering the functionality you need.
Always back up your site’s files and database before installing major updates (i.e., theme updates). That way, you have something to revert to if the updates break your site!
11. Use a CDN (content delivery network).
The farther away your users are from your website’s server location, the longer pages will take to load.
If your site experiences a lot of traffic from distant sources, consider using a CDN or a content delivery network.
A CDN is a network of servers located around the world. It delivers content to site visitors based on their geographic location.
Visitors are routed to the server closest to them, reducing the response time from your website.
A CDN may not make sense for a plumber or electrician with a business radius of forty miles, but if your blog has an international following, it could give site a performance lift.
12. Choose a robust and reliable hosting service.
Compare your experience on a fast computer vs. a slow one.
It’s no different for a website.
A reliable hosting provider will choose the right machine and server resources for your needs. Whether your site is on a dedicated or shared server, it will operate at its best.
If you’re not happy with your current hosting, please call us. We offer hosting for non-enterprise sites, and we make page load performance a priority service. We don’t charge extra for it.
Summary
Whew, that took a long time to explain — a slow-loading explanation.
The takeaway is a lightning-fast website is critical to the success of a business. According to Google in 2016, “53% of visits are abandoned if a mobile site takes longer than 3 seconds to load.”
In other words, a slow-loading site is costing you more than half your prospects before you can even make a pitch!
If you’re curious about your site’s load time, these free tools will let you test it.
Questions, still? Or does your site still need help?
Culture Cube can put together a website performance report with recommendations for site speed improvement.
Or you can call us to discuss your business pain points and determine what Culture Cube can do for you.
Get in touch today!
Peter Losh is the SEO Director of Culture Cube Marketing in Upland, California. He's also a de facto UX designer, site builder, and content creator. Unlike most folks in the SEO biz, he works directly on the sites he optimizes, having witnessed the effects of recommendations that go ignored or misunderstood (in previous gigs).
Peter has worked on websites since the salad days of the internet, first as a graphic artist and web designer at the Centers for Disease Control. Then came several years of freelance web development, SEO and e-commerce management for business sites of various sizes, and ultimately a 10-year stint as the sole SEO Manager of PartyCity.com.
In his spare time, he enjoys classic film, classical music, and classic comebacks. And cats.
Professional Work Experience
- Search engine optimization
- Ecommerce management
- Conversion rate optimization
- UX design and analysis
- Copywriting and training
- E-mail campaign design
- Web design and development
- Graphic design
