Is getting a higher Pagespeed Insights score bothering you? If you are a WordPress Developer like me and really focuses around best practices and latest web development trends, this article will help you. I am sharing the settings that can help your website get a better Pagespeed Insights speed score. A brief introduction at WP […]
Is getting a higher Pagespeed Insights score bothering you? If you are a WordPress Developer like me and really focuses around best practices and latest web development trends, this article will help you. I am sharing the settings that can help your website get a better Pagespeed Insights speed score.
I normally don’t blog that much about paid plugins, but WP Rocket stands. I have written in details about WP Rocket Test, to show how it increases loading speed.
Some of the reasons I love WP Rocket is because:
WP Rocket is primarily a caching plugin. But since it is built around focusing web development practices, it does help a lot to get better scores in Pagespeed Insights. Rather than writing long articles about what settings you need to optimize your site, I will be sharing the screenshot from my website and mentioning some important points that will help you get a better score.
As a matter of precaution and safety, please backup your website and make sure you can roll back to initial states if needed. These settings are to be done with care, and depending upon how your website is built and based on, sometimes things can go a bit wrong.
WP Rocket refers Mobile primarily as mobile devices but includes tablets too. You should turn this feature on if your website is responsive. With this featured on, WP Rocket creates a dedicated caching for mobile devices.
Personally, this is one of the best features of WP Rocket. This is where the WP Rocket does its magic, and helps to get higher scores for mobile devices especially.
Even with Custom WordPress Development, this is where WP Rocket works wonders. If you are using premium themes, WP Rocket will be your saviour.
My settings include combining and minifying CSS files, though you might argue why combine all css and make it heavier loading on every page.
When I develop a website, I build from scratch without using any CSS frameworks, so this strategy works for me. I go for a single css file.
If your website is using loads of plugins that add a lot of CSS files, I would recommend testing with/without combining CSS files.
WP Rocket also lets you add a list of websites and its related files to delay execution.
Media such as images, iframes, videos etc can be the heaviest website elements. They tend to make websites slow. WP Rocket takes care of this by serving these elements when they are needed i.e. when the user reaches the section of page, where they are located, often referred to as viewport.
LazyLoading can be enabled for various media such as:
Setting Image Dimensions attribute is good for increasing score in PageInsights. This helps in improving the layout shift, which is also part of web vitals.
At the moment I have turned this off, but this is a good feature to add. WebP is the new format of image, which are much smaller in size, and hence they decrease the page size and load faster. I will cover this topic soon. And good news is as of WordPress 5.8, it is supported.
Preload refers to creating the cached version of a site even before the user browses those pages/content. This makes sure when a user visits a website they are delivered content much faster.
In case if you are using third party websites such as Google font, this will slow down your website. WP Rocket takes advantage of this by Prefetching DNS, which makes sure these resources/websites are loaded before they are needed.
You can add a list of urls to pretech inside the dashboard.