WordPress Speed Optimization:
Beating The New Google PageSpeed Insights
Beyond being a thorn in the side of many a WordPress webmaster, Google’s PageSpeed Insights tool is also one of the most well-known tools for WordPress speed optimization.
This free tool accepts your site’s URL and spits back two scores that indicate how optimized your site is for mobile and desktop visitors.
These scores are no longer just theoretical – they’re now based on real performance data, and they also have a real effect on your site, with Google using page speed as a ranking factor for both its desktop and mobile search results.
In this post, we’ll explain the recent changes to PageSpeed Insights. Then, we’ll share some WordPress page speed tips that you can use to speed up your site and get a better score.
Explaining How The New PageSpeed Insights Tool Works
In the past, PageSpeed Insights only provided a set of suggestions to optimize your site, with your score based upon how well your site implemented those suggestions. It did not include any real-world performance data in its page speed test.
That’s changed with the newest version. Now, PageSpeed Insights grades your site on how it actually performs using a tool called Lighthouse.
The latest version of PageSpeed Insights includes two types of real-world test data:
- Lab data – this is an emulated test that shows how long it takes your site to load on a mobile network (e.g. 3G).
- Field data – this incorporates real data from real anonymous mobile Chrome users via the Chrome User Experience Report (CrUX).
Because lab data uses fixed conditions, while field data includes a variety of devices and connection speeds, it’s normal to see different results between the two.
Based on how quickly your site loads for various performance metrics (full table), Google gives you a score that places your site into one of three buckets:
- Fast – 90-100.
- Average – 50-89.
- Slow – 0-49.
According to Google, “100 is the best possible score which represents the 98th percentile, a top-performing site. A score of 50 represents the 75th percentile.”
This ranking matters for a couple of reasons.
First, Google uses page speed as a ranking factor on both mobile and desktop devices. If your site is in the red (0-49), that means it loads slowly compared to other sites, which might negatively affect your site in Google’s rankings.
Second, Google makes speed a factor because of the connection between page speed and user experience. Humans just plain don’t like slow-loading websites, especially when browsing from mobile devices.
Why Your Mobile And Desktop PageSpeed Scores Might Be Different
When you test your site, it’s not uncommon to see a high desktop score and a low mobile score. Here’s why:
Desktop users experience your site from a comparatively high-powered device and a comparatively fast Internet connection.
Mobile users are the opposite – they’ll typically have a device with a less powerful CPU and be browsing from a slower mobile connection (those are also the conditions Google uses to emulate its test).
For those reasons, it’s quite possible to have a site that’s faster-than-average for desktop visitors (90+ score), but slower-than-average for mobile visitors (sub-50 score).
Here are two examples why that might happen:
- Image-heavy site. For desktop users, those extra images might not have much effect. But on a slower 3G connection, those images might take significantly longer to load.
- JavaScript-heavy site. A laptop might have no problem quickly processing lots of JavaScript, but a low-powered smartphone might take significantly longer to parse and process the code (Google uses a mid-tier Moto 4G for its emulation tests – not the latest flagship smartphone).
Both of those suggestions only apply to the mobile score and deal with the time it takes to parse and process JavaScript.
WordPress Speed Optimization: How To Improve Your PageSpeed Insights Score
Ok, now for the fun part – how to actually improve your WordPress site’s PageSpeed scores. Here are 6 tips that you can implement today to speed up your site and improve your score.
1. Enable GZIP Compression
GZIP compression shrinks the size of the files that your server sends to visitors’ browsers by a significant amount (up to 70%):
Some caching plugins – like WP Rocket – include GZIP compression functionality.
Alternatively, you can add the following code to your site’s .htaccess file:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
2. Optimize Images
To automatically resize and compress your site’s images, you can use a free plugin like Smush or ShortPixel. ShortPixel can also help you serve WebP images, which helps with PageSpeed Insights’ “serve images in next-gen formats” suggestion:
You can also enable lazy loading with the free Lazy Load by WP Rocket plugin, which waits to load below-the-fold images until a user starts scrolling down. This is a really nice method for WordPress speed optimization.
3. Eliminate Render-Blocking Javascript
“Render-blocking” JavaScript prevents your site from loading human-visible content until the blocking JavaScript finishes loading. This can be especially punishing on your mobile score, for reasons we discussed above:
For a non-technical solution, you can use the Async JavaScript plugin to async or defer JavaScript:
Make sure to thoroughly test your site afterward, as this all-in approach can break certain scripts.
4. Leverage Browser Caching
Browsing caching lets you store certain static assets – like your site’s logo – on visitors’ local computers to prevent visitors from needing to download those files on each page load.
Many caching plugins include browser caching. Otherwise, you can add this code snippet to your site’s .htaccess file:
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
5. Minify JavaScript And CSS
Minification lets you shrink the size of JavaScript and CSS files by eliminating unnecessary white space:
Many caching plugins include minification functionality. Or, you can use a dedicated solution like the free Autoptimize plugin:
6. Reduce Server Response Time
Part of server response time is your host’s performance, so one solution here is to simply upgrade to a faster host.
Other options to reduce server response time include:
- Use a good caching plugin. We recommend W3 Total Cache, WP Super Cache, or WP Rocket.
- Use a premium DNS service for faster Time to First Byte (TTFB).
- Use quality WordPress hosting. We recommend SiteGround or WP Engine.
- Use a CDN service like Cloudflare, which will not only make your website faster, but will also make it more secure.
Wrapping Up: WordPress speed optimization
Putting these WordPress speed optimization tactics into action isn’t just about improving the two numbers on your screen.
By optimizing your site, you’re speeding up its page load times. That means a better experience for your visitors, and it also means giving your site the best chance possible to reach more visitors in Google’s search results.
Apply these WordPress page speed tips today and start enjoying a faster WordPress site.
Original post: WordPress Speed Optimization: Beating The New Google PageSpeed Insights
Article first published here: WPZOOM Go to article source