Category: Tech

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

  1. 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.

  1. 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.

  1. 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

  1. 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:

  1. 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
  1. 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.

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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 Friday, June 12, 2020. I'm sure your visit to us must be quite satisfying and in line together with your expectations from us.

About the author

I am a WordPress Developer and over the last three years, I've worked over 15+ projects including Custom Theme Development. I am skilled in WordPress, HTML, jQuery, Drupal and mySQL. I enjoy traveling, eating my way around the world, and sharing experiences on my blog! Outside of work, I attain knowledge from Udemy classes. I am going through various youTube Tech channels and learn something about new technologies a day. Also I like meeting new people over a cup of coffee. Please feel free to contact me at info@webdroyd.com