+8801704300193 contact@proseoclub.com

Sharing is caring!

Web site speed is an important factor for any site. If the site takes more than one second to load:

Pageviews were reduced by 11%.

Customer satisfaction will be reduced by 18%.

Conversion will be reduced by 8%. (Info Source: Aberdeen)

If your site takes more than 2 seconds to load, then most visitors will leave the site and you will have a chance to show them the content of your site. Also, site speed is now a ranking factor in Google. So it plays an important role in SEO.

In this article, we will try to show you how to bring a WordPress site to Google PageSpeed Insight with a score of 91-100.

Two caching plug-in are most commonly used to speed up WordPress sites. These are W3 Total Cache and WP Super Cache. Although optimized in various ways, I did not get the expected results from these two plug-ins. So today we will see how to increase the speed of the site by using 3-4 other small plug-in besides these two.

Page speed Tips

① Hosting: Hosting is the biggest reason for low site speed. But the sad thing is that no hosting company will tell you that the problem is theirs. They will say at first that your site is not optimized. After that, if they need more speed, they need to upgrade to another hosting package.

However, the reality is that if you use shared hosting and do VPS, you will not find much difference in speed. So you can get hosting from Namecheap, Bluehost, or Dreamhost from any company. I did not notice any difference between them. You can even get hosting from a reputed company. In that case, the hassle of payment will be reduced.

② Theme: Just a little slow as a WordPress platform. Its theme on top of that makes it even slower. Theme developers usually focus more on aesthetics than speed. So the themes become heavy later. There is no difference between free and paid themes. I have worked on two sites with one free theme and one paid theme. I chose Basic Theme as Free Theme and Ultimate One as Paid Theme.

③ Enable GZP Compression: Large pages are usually 100 KB or larger. As a result, this page takes longer to download. The best way to reduce load time is to distribute them as zip files. This is not usually enabled in shared hosting. So we need to manually activate it by editing the .htaccess file.

Open the .htaccess file from your FTP account. Then copy/paste the following code.

# 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

 

Make sure the code is below the code in the .htaccess file.

If you are using NGINX, paste the following code into the Nginx.conf file.

36 gzip on;

37 gzip_disable “MSIE [1-6]\.(?!.*SV1)”;

38 gzip_vary on;

39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

 

④ Image Optimization: Image has a big impact on the loading time of the site. So all the images on the site should be optimized. This can be done in two ways. One, optimizing the image and uploading it to the site, and two, optimizing when uploading the image to the site using plug-ins.

WP Smush can be used for plug-ins.

Images can be optimized before uploading to the site with Adobe Photoshop, GIMP, etc. software. The width of the image should be consistent with the width of the site. For example, if the width of the site is 570px, then the image should be brought to the same width. The image format should be JPEG.

⑤ Removing Render-blocking JavaScript and CSS from Above-the-Fold Content: When a browser loads a website, JavaScript and CSS resources usually prevent the site from displaying until they themselves are being downloaded.

Some resources must first be downloaded and processed before anything can be displayed. However, some CSS and JavaScript resources play no role in above-the-fold Content rendering. So you should eliminate all render-blocking CSS and JavaScript.

We can get the above results by loading JavaScript asynchronously. For this, we need a free plug-in Async JavaScript.

After installing, go to Settings and enable Async JavaScript.

Then Async the Async JavaScript Method.

Defer jQuery.

Enable Autoptimize Support in Async JavaScript For Plugins and Defer jQuery Method.

Async JavaScript Setting > Save

 

Optimize CSS Delivery: You can do this easily with the Autoptimize plugin.

Install and activate the Autoptimize plugin.

Go to Autoptimize Settings from Settings.

Select Show advanced setting.

Select Optimize HTML Code from HTML Options.

Select Optimize JavaScript Code and Also aggregate inline JS from JavaScript Options.

Select Optimize CSS Code, Remove Google Fonts, and Also aggregate inline CSS from CSS Options.

Click Save and empty cache.

The only thing left to do here is to activate “Inline and Defer CSS”. To activate it, we need to generate Critical Path CSS. To find out, right-click anywhere on your site and view the page source. You will get the CSS file of your page at the beginning of the page. Get the file in the format – http: //yoursite.com /…/ auto-optimize …

Select and copy all the contents of the site’s CSS file. Now go to Critical Path CSS Generator and paste your site name and copied CSS content and click create Critical Path CSS button. Your above-the-fold CSS is now created.

Copy it and go to Autoptimize Settings and check-in Inline and Defer CSS of CSS Options and paste above the fold CSS in the blank space next to it. Save and come out.

⑦ Leverage Browser Caching: We can do this in two ways. One, cache-control header, and two expire header. However, anyone method should be used. The cache-control header is the new method and it is usually the recommended method.

Adding Cache-Control Header to Nginx: Add the following code to the server location or block in the server config file.

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {

expires 2d;

add_header Cache-Control “public, no-transform”;

}

Adding Expires Header to Nginx: Add the following code to the server block.

 

location ~* \.(jpg|jpeg|gif|png)$ {

expires 365d;

}

location ~* \.(pdf|css|html|js|swf)$ {

expires 2d;

}

Adding Cache-Control Header to Apache: Add the following code to the .htaccess file.

Header set Cache-Control “max-age = 604800, public”

Adding Expires Header to Apache: Add the following code to the .htaccess file.

## EXPIRES HEADER CACHING ##

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 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”

## EXPIRES HEADER CACHING ##

Now if we look at our site in Google PageSpeed ​​Insights, we will see that only the script of Google Analytics is under Leverage Browser Caching. We can remove this warning by hosting this script locally. However, keep in mind that Google does not support this method.

There is a great free plugin called Complete Analytics Optimization Suite, with which you can host Google Analytics locally. Install the plugin and enter your Google Analytics Tracking ID. The plug-in will automatically download the tracking code and place it on your server, and it will be updated via schedule script. The settings must allow it to load on the footer. And this plugin cannot work with other Google Analytics WordPress plugins.

Reduce Server Response Time: We will use the Cache Enabler plug-in. This is a lightweight plug-in that generates static HTML files and makes the site load faster. This plugin is fully compatible with Async JavaScript and Autoptimize.

Install and activate.

Type 72 in Cache Expiry.

Cache Behavior-Ray Clear the complete cache if a new post has been published and check the Pre-compression of cached pages option

Keep Cache Minification disabled.

Save it.

⑨ Additional uses of the plugin:

Plugins are undeniable for WordPress, but using additional plugins can lead to major problems in WordPress performance. Sometimes we use too many plugins or use plugins that are not updated. Suppose you used a social share plugin, but it turned out that this plugin is not necessary because your theme has the option of building social share.

In many cases, we see to use different plugins for JavaScript, CSS but you can minify JavaScript, CSS with the plugin with auto optimizer.

Again it is seen that many times to use AMP separate plugin you will now get AMP from Yoast in building way. In that case, no plugin is required.

Again we use plugins to prevent spam but one plug-in is enough jetpack plugin in this case. So using extra plugins will do more good than using a few plugins that do a lot of work, rather than slowing down WordPress.

 Using Cloud Flare can speed up WordPress:

Cloud flare is a free content delivery network service with DDoS mitigation, internet security, distribution domain name service, reverse proxy caching system. You can add Cloudflare to your domain. By using Cloudflare you can easily protect your website from direct attacks. SSL can be connected. Network Gateway The right way to connect Cloudflare will increase the speed of your website.

Let's Work Together!