Is it possible to score 100 points on Google PageSpeed with WordPress? Yes, it’s possible. Read this step-by-step guide and learn how to optimize WordPress websites for Google PageSpeed. This guide will help your website load faster and performs better, not just for SEO, but for your visitors too.
This guide should help you score greater results, but please note that some websites need structural changes in order to be able to score over 90 points in the PageSpeed test.
If you find this too hard for you, please consider our professional SEO & Performance optimization services.
We provide this kind of service for quite some time and we have a lot of happy customers.
How to optimize your WordPress website for Google PageSpeed
There are certain actions that need to be taken in order to achieve the highest possible score. These actions aren’t requiring an advanced-level knowledge, they can be performed by a beginner WordPress website owner. Just make sure that you follow them correctly.
Table of content
- Optimize website content
- Remove unused plugins
- Set up caching with minification
- Utilize Redis memory caching
- Utilize CDN
- Serve images in next-generation format WebP
- Set up Cloudflare reverse proxy (optional)
- Add AMP support (optional)
- PWA – Progressive Web Apps
- Google PageSpeed tests
- Lighthouse report and metrics
- Conclusion
Before we begin, you should consider that the hosting is playing a crucial role in overall website speed. This guide can’t help you much if you are hosted on an overloaded server with large response time. The response time is related to the overall delay before your host response to the HTTP requests sent by visitors.
* We highly recommend that you check our guide on the best WordPress hosting in 2020
Optimize website content
The first step is the optimization of your WordPress website content. You should follow the best practice when it comes to website design.
Sliders
Make sure that you are not overusing the sliders. If your WordPress has a slider, make it use a fewer number of slides. Don’t add too many slides and don’t add more than once unless it’s necessary. Sliders can have a high impact on the overall website size in Megabytes, as well as the page rendering time.
Optimize your images
Before you upload any images in your WordPress website, make sure they are optimized in dimensions and size. If you don’t use PhotoShop or Gimp for image editing, then install some plugin that optimizes the images and compress them.
Take care of the fonts and typography
Avoid using too many fonts, the 2 distinctive fonts are enough in modern design. The one for heading text and menus and some other sans based font for paragraph texts. More fonts will add a significant payload to the overall website size.
Remove unused plugins
You should now that all plugins that are extending any feature on the front-end of your website, are also loading their own CSS styles and JavaScripts. Thus that being said, you need to use only the plugins that directly benefit your website.
Consider removing all plugins that you don’t need and aren’t crucial to your website features and functionality.
Set up caching with minification
This is a very important step and it’s made by installing some of the caching plugin available for WordPress. The job of the caching plugin is to compress, combine and minify HTML, CSS, and JavaScript files. It also needs to add expire headers, defer loading of critical JavaScript objects, cache database requests and make fewer HTTP requests needed to process your pages.
There are several highly popular WordPress caching plugins:
- WP Rocket (paid only)
- W3 Total cache (free and paid)
- WP Optimize (free)
- Autoptimize (free and paid)
- WP Fastest Cache (free and paid)
- WP Super Cache (free)
All of these free and paid plugins are packed with lots of features, so we won’t go thru all of them. The choice of caching plugin is up to you and your preferences.
However, please consider adjusting these values and following these advises and rules.
- Don’t cache pages for logged in users, just for visitors
- Don’t separate cache for mobile devices, use the same cache instead (some plugins are offering this feature, make sure you don’t separate the cache)
- Turn on the page and post caching
- Activate minification (it will compress the code and overall website size will get smaller)
- Minify HTML (it will compress HTML code of your pages)
- Minify and combine CSS (compresses all CSS files from theme and plugin and combines them into one file)
- Minify JavaScript (compress and combine JS files, please check if there are any errors in the browser console after you activate this option)
- Cache database requests (if plugin offers this option, it will speed up the website as it will cache the database requests and serve static content)
- Cache WordPress Objects (this can significantly speed up your WordPress website)
- Set expiry headers (set the reasonable amount of time for caching headers to make browsers cache the requests and lower the loading time )
- User page preloading (this feature will build the pages and post cache in advance so that the visitors get served the already optimized pages)
- Adjust the cache expiration time to 10 hours or less (it might depend on the total number of posts you are adding on daily basis)
- Set up cache pruning
Utilize Redis memory caching
Redis is an open-source server-side memory caching solution that can benefit the WordPress website by caching WordPress Objects. We highly recommend that you use Redis to speed up your website. However, not all hosting companies are offering this great caching solution.
If you are running your own VPS, check out our guide on how to install Redis and accelerate your WordPress website.
Utilize CDN – Content delivery network
One of the things that can help you with the website speed and loading time is the CDN.
CDN stands for Content delivery network and you could benefit by serving your website images and media.
How CDN works?
The CDN providers are having their own data centers across the world and they will serve the images to your visitors based on their distance to the nearest data center in their region. This will provide the faster loading time of your images and also benefit in terms of parallel concurrent HTTP requests.
If you are aiming for the global web and your visitors are distributed across the whole world, then adding CDN is absolutely recommended.
Serve images in next-generation format WebP
WebP is a relatively new image format that aims to speed up image loading on the web. Serving images in this new generation format will add a few more points in the PageSpeed test.
You don’t need to convert your images in WebP as there are a couple of plugins that will automate these tasks for you.
These are the most popular WebP plugins for WordPress:
We recommend the WebP Express as it’s the simple solution for adding WebP support. It will make a backup of your original images in jpeg, png, or gif formats. It will then generate the WebP images and serve them instead of the original ones.
Set up Cloudflare reverse proxy
This is entirely optional but it can also benefit your website, not just in speed and performance, but also in terms of security and protection against DDOS attacks.
Cloudflare offers free reverse proxy, anti-DDOS protection, and CDN. You just need to register for this free service and add your website. Then just change the DNS to the provided Cloudflare DNS and it will act as a reverse proxy.
You can also check this article on How to set up Cloudflare reverse proxy guide!
Your website data and content will be server over their network and they are present across the entire globe. The website will load much faster as it will be server from the nearest Cloudflare data center. You can see all the Cloudflare data centers in the world here.
Add AMP support
AMP – Accelerated Mobile Pages is a Google framework aiming to provide faster, user-first pages, stories, and more. With the help of AMP, your WordPress website can be loaded much faster on slower internet connections and mobile devices.
Adding AMP is optional as it’s not helping with the SEO or with the PageSpeed tests. The AMP will generate the separated pages that will be the server for mobile devices.
The AMP can be added via the plugin and these are the most popular AMP plugins for WordPress:
Both of these plugins are working great and you can choose between any of them. You can also search the WordPress plugin repository for various AMP addons like Stories for AMP, Contact form for AMP, etc.
Progressive Web Apps
You can turn your WordPress website into the PWA (The Progressive Web Apps).
The Progressive Web Apps are favored by PageSpeed tests as they benefit the visitors in terms of loading, fewer HTTP requests, the ability to offer the content while offline, and more. Some of the key features are:
- Work offline
- Fast performance
- Access to the phone’s sensors
- Support for push notifications
- An icon on the phone‘s home screen
You can convert your WordPress website into Progressive Web App with the plugin, but it’s entirely optional and up you to decide.
Here are the most popular PWA plugins for WordPress:
Google PageSpeed tests
After you finish conduction all these steps, it’s time for testing. You should access the Google PageSpeed insights and start testing your website.
Once you receive your first report, focus on the recommendation and errors.
Lighthouse report and metrics
These are the most important metrics reported by the Lighthouse that will impact the website speed test results and you’ll have to overcome them.
1. First Contentful Paint (FCP) – this metric measures the time needed for the browser to render the first DOM element.
How to improve First Contentful Paint (FCP)?
You should consider that this largely impacts the content that needs to remain visible while the page is loading. It’s usually the fonts loading and you should consider adding swap parameters to your fonts CSS.
2. Largest Contentful Paint (LCP) – it measures when the largest content element in the viewport is rendered on the screen. It also predicts the time when the page will be loaded and ready for use.
How to improve the Largest Contentful Paint (LCP)?
Please, refer to this article here as this matter is a bit more complex and we can’t cover it inside this guide.
3. Time to Interactive (TTI) – this metric relates to the time your website becomes interactive or usable for the visitors. It’s known to be a very frustrating factor as your website might appear to be fully loaded, but when the visitor tries to click on something, it doesn’t respond.
It’s crucial that you lower this value to the lowest possible.
How to improve Time to Interactive (TTI)?
You should consider deferring or removing unnecessary JavaScript work. Look for ways to optimize your JavaScript and consider reducing JavaScript payloads with code splitting.
4. Speed Index – this metrics measures how quickly content is visually displayed during page load. Lighthouse captures all frames of your website loading in the video format and then analyze them to calculate the approximate loading time.
How to improve Speed Index?
You will have to find a way to overcome these 3 key factors to gain better speed index results:
- Minimize main thread work
- Reduce JavaScript execution time
- Ensure text remains visible during the web font load
5. Total Blocking Time (TBT) – this metrics displays the total time needed for your website to become usable for the visitors in terms of blocking any input.
How to improve Total Blocking Time (TBT)?
This usually comes from un-optimized code, unnecessary JavaScript loading, parsing, or execution. You should consider optimizing JavaScript code to gain better results in TBT. If you don’t know how to optimize the JavaScript call stack, consider hiring us as we provide professional-grade optimization services.
After you successfully improve all of the Lightbox metrics mentioned here, you will gain a score of 100 points in Google PageSpeed for sure.
Conclusion
We hope this article was helpful to you and that by following this guide, you’ve made some progress when it comes to your WordPress website speed & performance. If you have any questions or comments, feel free to share them with us in the comments section below.
