The real purpose of testing a site’s performance with Google PageSpeed Insights isn’t to achieve a high score. Instead, it’s to find problem spots on your site, so that you can optimize them and decrease both your actual and perceived loading times.
General Issues Render while Optimizing Page Speed & 12 Ways to Improve Performance
- Eliminate Render-Blocking Resources
If you don’t have a lot of JavaScript or CSS, you can inline them to get rid of this warning. This process refers to incorporating your JavaScript and/or CSS into your HTML file. We can do this with a plugin like Autoptimize, w3 Total cache.
The other option is to defer your JavaScript. This attribute downloads your JavaScript file during HTML parsing, but only executes it after the parsing is complete. Also, scripts with this attribute execute in order of appearance on the page.
- Compress your images
The biggest cause of slow pages and low scores is large images.
One of the best ways to do this without spending much time is to use a plugin. It will scan your media library on WordPress and detect images that it can compress:
We can use WP Smush Image for Compression and Optimization of the images.
- Browser Caching, Minify CSS & Javascript
We can use W3 Total Cache for WordPress sites. It is the most popular caching plugin on the market
Fetching the resources to load your website takes a ton of effort. It requires loading each image and page element and then dealing with heavy HTML and coding.
Each time someone loads your site, this process has to happen all over again. Your site will take them too long to load. And that’s where browser caching can help.
W3 Total Cache claims that it can give you at least a 10x improvement in overall site performance.
On top of that, they claim (and back up) that this plugin will help you achieve higher results on Google’s PageSpeed tools.
The tool also helps you minify HTML (which we will dive into next), JavaScript, and CSS, giving you up to 80% bandwidth savings
- Minify your HTML
Minimizing the space that your HTML coding takes up is another big factor in getting a perfect score from Google.
We can use this best tools to do this is HTML Minify:
- Reduce Server Response Times (TTFB)
There are several factors that can influence your TTFB. Some strategies for lowering it include:
- Choosing a high-quality web hosting provider
- Using lightweight themes and plugins
- Reducing the number of plugins installed on your site
- Utilizing a Content Delivery Network (CDN)
- Implementing browser caching
- Selecting a solid Domain Name System (DNS) provider
- Defer Offscreen Images
The process of deferring offscreen images is more commonly known as ‘lazy loading’. This means that instead of making the browser load every image on a page before displaying the above-the-fold content, it will only load the ones that are immediately visible.
For lazy Loading, we have used the custom script and JS.
There are several WordPress plugins made specifically for lazy loading, including a3 Lazy Load and Lazy Load by WP Rocket.
- Enable Text Compression
In some cases, text compression will be enabled on your server automatically. If this is not the case for your site, we have a couple of options for following this recommendation.
The first is to install a plugin with a GZIP compression feature. WP Rocket is a viable solution if you’re willing to pay for it.
We can also compress your text manually. This involves editing your .htaccess file, which can be risky, so make sure we have a recent backup on hand.
Most WordPress sites run on Apache servers. The code for enabling GZIP compression looks like this:
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
You should add it after #END in your .htaccess file.
If you’d like to check your site’s text compression, we suggest using a tool such as GiftOfSpeed or you can also use websiteplanet
- Preconnect to Required Origins
There are a few ways to go about implementing this optimization strategy. If you’re comfortable with editing your WordPress theme files, you can add a link tag to your header.php file. Here’s an example:
<link rel=“preconnect” href=“example.com”>
In this case, the tag tells browsers that they need to establish a connection to example.com as quickly as possible.
- Preload Key Requests
implementing this technique is very similar to the previous recommendation as well. We can add link tags specifying the resources listed in PageSpeed Insights to your header.php file:
<link rel=“preload” href=“example.com”>
We can also incorporate this tag using Perfmatters, WP Rocket, or Pre* Party Resource Hints.
- Serve Static Assets With an Efficient Cache Policy
The most common way WordPress sites implement caching is with plugins. WP Rocket and W3 Total Cache are popular options.
Those with Apache servers should use this snippet in their .htaccess files instead:
<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$”>
Header set Cache-Control “max-age=84600, public”
</filesMatch>
Add this code before #BEGIN WordPress or after #END WordPress.
- Adding Expires Headers
Cache-Control headers are pretty much the standard now. However, there are some tools (including GTMetrix) that still check for Expires headers.
We should set different expiration times based on file types. Apache servers will produce the same results if you add this code to your .htaccess file:
## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/svg “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”
</IfModule>
## EXPIRES HEADER CACHING ##
Once again, you should add this code either before #BEGIN WordPress or after #END WordPress.
- Leverage browser caching
To enable browser caching you need to edit your HTTP headers to set expiry times for certain types of files.
Find your .htaccess file in the root of your domain. This file is a hidden file but should show up in FTP clients like FileZilla or CORE. You can edit the .htaccess file with notepad or any form of basic text editor.
In this file we will set our caching parameters to tell the browser what types of files to cache.
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType image/webp “access plus 1 year”
ExpiresByType image/svg+xml “access plus 1 year”
ExpiresByType image/x-icon “access plus 1 year”
# Video
ExpiresByType video/mp4 “access plus 1 year”
ExpiresByType video/mpeg “access plus 1 year”
# CSS, JavaScript
ExpiresByType text/css “access plus 1 month”
ExpiresByType text/javascript “access plus 1 month”
ExpiresByType application/javascript “access plus 1 month”
# Others
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
</IfModule>
Source: Google Images
Thanks for reading this text. This story is about "12 Ways to Improve Page Speed Score of any WordPress Website Performance" and last modernize on Saturday, May 20, 2023. I'm sure your visit to us must be quite satisfying and in line together with your expectations from us.
