How To Improve Page Speed In WordPress
Today, I’d like to share some tips for improving your page speed in WordPress.
Performance and optimizing for page speed are now as much a part of web development as writing code.
There are several reasons performance matters. The most important is user experience. The faster your WordPress website loads, the less likely a user will click away and go to another site.
Humans are impatient — we want instant gratification, and we expect a web page to load in less than three seconds, and if it hasn’t, then we leave.
Forrester Research did a study in 2011 that reported 47% of participants expected e-commerce pages to load in 2 seconds or less. A delay of one second in load time reduced conversions by 7%. This is why companies like Facebook, Google, and Amazon spend so much time and effort reducing load time — because they understand how important shaving those milliseconds is to their bottom line.
Why Performance and Page Speed Matter So Much
Your customers expect it. A late 2013 report by Strangeloop Networks reported that 57% customers would abandon a mobile site after 3 seconds if it had not loaded. This number was an increase from 40% in a similar 2012 test. At the same time, the weight of the average web page increased by 30% in 2012, and again in 2013, up another 32% to a staggering 1.7KB.
Search engines grade your site on it. Since Google announced in late 2012 that they would be a mobile first company, page speed has become a ranking factor. If two sites are equal in every other way, the site that loads faster will rank higher. You can see how Google rates the speed of your own web pages on mobile and desktop by using their Page Speed Insights tool. You should also check out the Page Speed Insights Guide published by Kinsta.
Here’s the good news. By optimizing your site, you can gain a performance advantage over some of your competitors. This will also please your customers and deliver a better overall experience to them. Here’s a breakdown of site conditions that are most often in need of speed optimization.
Hosting
Having the appropriate type of hosting package is critical to reducing load times. If you employ all the other tips in this article, but have a shoddy hosting plan, you’re not going to get the site performance that you seek. So what type of hosting should you be using? Shared hosting is the incorrect answer.
Shared hosting is appealing to many people because it the lowest in cost ($10 a month or less), but you get what you pay for. Shared hosting servers contain thousands upon thousands of sites. To make these plans profitable, the hosting company must cram as many sites as possible into each server. All the sites share the resources of the server at the same time, resulting in poor performance and slower load times.
Shared hosting is fine for sites that are low traffic and low priority, like your cat photo blog. Do not use shared hosting for your serious business websites.
VPS (aka Virtual Private Server) hosting is superior to shared hosting. With a VPS server, there are still other websites on a single server, but far less than with shared hosting. Each VPS is given dedicated memory, bandwidth and resources of its own. Page speed improves significantly compared to shared hosting. For many businesses, VPS hosting will be sufficient.
Dedicated hosting is for businesses with heavy traffic. On dedicated hosting, it is one site to one server. These are not common for small businesses, but more common for larger sites.
Using a managed WordPress host like WP Engine or Flywheel can help you immensely, as they take care of many optimization techniques on the server itself.
Reduce Page Load by Optimizing Images
Download speed correlates to the weight of the page, and over half the weight of most web pages consists of image files. One simple thing you can do use images that are the right size for the page, and no bigger. If you usually load images directly from your iPhone to your website, you may be using images that are unnecessarily large, adding extra weight to the page. What I usually do is download iPhone images to my computer, and size them down in Photoshop before uploading them to a website. This helps improve page download speed.
Retina Devices. If you are targeting retina devices, you can use double-sized images and Retina.js to substitute background images. If you are using thumbnails with a plugin such as Yet Another Related Posts Plugin, and need to target retina devices, you can set create a custom thumbnail that is 2x normal size, and use CSS to constrain the width and height to 1x.
Responsive / Mobile. Optimizing for mobile first is a key component in site performance. If your site is responsive, and you use display: none in your CSS to hide large images, be aware that the browser still downloads those assets. Think about what assets mobile devices would need to download, and plan accordingly. If you have a large background image on the desktop version of a site, load a smaller background image on mobile, and if the screen is larger, conditionally load the larger version of the image.
DNS Prefetch
DNS prefetching is something I first read about in Harry Roberts’ article on front-end performance a couple of years ago. It’s well worth your time to read.
The short version: Your browser downloads files from other sites as they are needed to make the page render. When you have Facebook widgets, Google Fonts, or embedded Tweets, the browser has to look up the domain name (DNS) for each of these to get the files it needs. It takes fractions of a second to look up these different domains, and after a while, those add up. DNS prefetching tells the browser to look up the domain name zone before it normally would, and this saves a little time. Once the domain has been looked up, it does not need to be done so again later in the page.
DNS prefetchs are simply links that go in your page , and they look like this:
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//platform.twitter.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
Use DNS prefetch requests wisely — these are also HTTP requests, and using too many can slow the rendering of your page. These are best used for assets that will be looked up on every page of your site.
Check Your Theme, Use Only What You Need
One thing that can bog down a site is excessive HTTP requests. Each file that your WordPress theme requests adds milliseconds to the loading time. Many themes today are built for convenience first, not for performance first. It’s a trade off. Themes that allow you to set fonts via the Customizer almost always rely on Google Fonts, and load one style sheet for each font that is selected. While Google’s CDN servers are fast, these extra style sheets still need to be loaded to render the page. Check the source code on your site. How many individual style sheets are being loaded for fonts and plugins? See if you can combine all your font style sheet requests into one.
If you’re a theme developer, make sure your list of Google Fonts in the theme customizer is correct. One client site I diagnosed for slow loading times was sending a request to Google Fonts for an Arial style sheet (which doesn’t exist), causing page rendering to stall for obscene amounts of time, until the browser finally gave up and rendered the page without the file. If you’re a client, make sure your developer and you are working together to choose a base theme.
If you are building a custom theme, get all of your theme specific JavaScript in one file, load it in the footer. Load CSS in the head, as the page won’t render without that, but JavaScript can wait, as it is usually not on what the browser considers the critical path for page rendering.
Page Caching
Caching your site makes page loading much quicker. The logistics of how caching works is a bit technical, but here’s an easy way to explain it. Without caching, a browser requests the files needed to build a web page, and the server checks for each one, and then fetches it each time. With caching, the server makes copies of the files it needs to render a page, and serves those to browsers from the Cache folder instead of going back for the original files each time. In short, the server doesn’t have to work as hard to build web pages.
There are two good plugins for WordPress sites, W3 Total Cache and WP Super Cache. Most of the time, W3 Total Cache works beautifully. Occasionally, WP Super Cache is the right choice — it depends on the server you are using. Either one is fine, but for my own sites, I use W3 Total Cache. WP Rocket is a premium caching plugin that I recommend.
The caching plugins will give you options for Page Cache, Object Cache, Database Cache, and Minifying files (more on that in a second). The better your hosting, the better options you will have for serving your cache files.
Minify Your Files
We just mentioned minifying your files as an option with caching plugins. Minification is when all the white space is taken out of source code files. This saves some extra kilobytes, reducing page weight. I recommend testing your particular site before minifying every file on your live site. While CSS files are usually fine, minifying JavaScript files can sometimes cause unpredictable results. I have also experienced RSS feeds breaking with HTML minification. Minify whatever files you are able to without affecting the page rendering.
GZIP and HTTP Compression
HTTP compression works similarly to zipping a file on your computer. HTTP compression takes the code files that make up a web page: HTML, CSS, JavaScript, XML, and SVG — and compresses them before serving them to browsers and uncompressing them again. This can be done via PHP or your .htaccess file. How this works is not important to the majority of us; what you need to know is that it makes your site faster.
WP Super Cache or W3 Total Cache (with CDN integration) takes care of this automatically. You can easily test to see what files are GZipped on your website at GZIPwtf.com.
CDNs
CDNs, or Content Delivery Networks, help make your site faster by allowing you to download files from multiple domains at once. When a browser requests a web page, the server can only download from one domain at once. But browsers can download from different domains at the same time. CDNs serve your selected site files at the same time as your home server, from a global server network. The CDN chooses the server location closest to the requesting browser, and sends files from there, saving additional time.
Some popular CDNs are Amazon Web Services (AWS), Akamai, and MaxCDN. WordPress also offers its own CDN service, Photon as part of the Jetpack plugin. Photon uses the servers at WordPress.com to store and serve images. This feature is free if you connect your site to WordPress.com, but has certain restrictions. For instance, Photon will not serve images larger than the original, and only archives images in posts, pages, and thumbnails. Photon will also not archive new versions of images — to change an image, you must rename and upload it again.
Amazon Web Services is a popular CDN, but the initial learning curve can be confusing. MaxCDN is what I am using on this site, as it is integrates with W3 Total Cache. The WordPress hosting at WP Engine also has integration with MaxCDN. The important thing is to be comfortable using whichever content delivery network you choose.
Conclusion
There are tons of ways you can improve your page speed in WordPress, and performance is going to continue to be a point of differentiation. I’d like to hear about steps you have taken recently to improve your page speed and what the results were.
Thanks for taking your time to explain what I need to do to speed up my site. Currently, I am using an Amp, is it okay i use it with a caching plugin like wp rocket?
Also, do i need to use lazy loading when on amp?
Thanks as I await your replies.
Unless you have a news site, don’t use AMP. If you have a regular business site or e-commerce site, don’t use AMP.
As far as I know, you can use caching with AMP. You can use lazy loading if you’d like.
If you have negative movement in SERPs after any changes, revert and see if rankings go back.