Optimize Google Pagespeed Insights for WordPress – Part 1

Google Pagespeed Insights is a set of standards that measure the speed and relevance of a Google-initiated website. According to Google, the standards in Pagespeed Insights will focus on two key issues: page load speed and user experience. And if the websites get more points on the Pagespeed Insights page, then that page meets the many standards Google has.

In fact, these standards do not require you to apply the whole because there are no standards you can use on every case. So if you look at this series and are not able to do some standards then just ignore, because Google does not catch you up to standard.

And now, Google Pagespeed Insights has all 16 criteria :

Rule of speed optimization

  • Avoid using redirects at the landing page.
  • Enable compression of data sent to the browser.
  • Improved server response time.
  • Improved browser caching.
  • Compress CSS and Javascript resources on the website.
  • Compress image size reduction.
  • Optimize the insertion of CSS into the website.
  • Set the priority order of content in the website.
  • Unblock Javascript and CSS when loading pages.

Optimal use optimization rules

  • Avoid using plugins to display content.
  • Configure the viewport to display the appropriate screen size.
  • Optimize the buttons or links on the website.
  • Use the right font size to display the content.

So if you want your website to be Google Pagespeed-friendly then make sure you apply the rules above. So how to apply, how to apply to WordPress? That is what I will guide you through these Google Pagespeed Insights optimization tutorials.

 First Criteria: Use the appropriate host

If you are currently using free hosts do not follow these tutorials for nothing to do, because of its slow speed and little support for technology you will not be able to do very well. many features. Therefore, we encourage you to use good host for WordPress that the name you encourage is A2Hosting (with Singapore server), StableHost , Arvixe (with Hong Kong server) are good hosts for WordPress, compatible with many plugin.

In addition, we encourage you to use the service CloudFlare to optimize the speed of the website better.

Avoid using redirects at the landing page

Redirection means that when you go to a page you re-establish it redirects to another page or other type of address. This situation is most often seen with sites that use the domain name www.domain.com (www). In the habit of many people, they just type domain.com into the browser, so the webserver needs more time for it to redirect to the domain name has www and delayed a few seconds.

Therefore, I encourage you not to use the domain name www because it will take the user more time to redirect, as well as look at the website address is 3 characters long.

Enable compression

Compression function here means that the webserver will compress the data sent to the browser in the form of HTTP in gzip format instead of in the form of raw data, the browser will display the content is compressed gzip. And such compression can help you optimize the speed up several times because the capacity of each request has decreased significantly (about 50 to 70% after compression).

See also : Check out Gzip on the website at  http://gzipwtf.com/

To enable Gzip compression, you can do the following:

If using the W3 Total Cache plugin

You can enable Gzip compression at Performance -> General Settings -> Browser Cache .

Enable gzip for W3 Total Cache

Enable gzip for W3 Total Cache

Then go to Performance -> Browser Cache and check all the options ” Set expires header “.

If using WP Super Cache

For WP Super Cache, you can enable Gzip by going to Settings -> WP Super Cache -> Advanced and tick the option ” Cache hits to this website for quick access. (Recommended) “and” Compress pages are more quickly served to visitors. (Recommended) “.

Enable gzip for WP Super Cache

Enable gzip for WP Super Cache

For Apache

If you use the Apache webserver without using the two plugins above, you can enable Gzip by inserting the following into .htaccess :

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file. (html? | txt | css | js | php | pl) $
mod_gzip_item_include handler ^ cgi-script $
mod_gzip_item_include mime ^ text /.*
mod_gzip_item_include mime ^ application / x-javascript. *
mod_gzip_item_exclude mime ^ image /.*
mod_gzip_item_exclude rspheader ^ Content-Encoding:. * gzip. *
</ ifModule>

Or if the above you insert into that 500 error or no gzip then delete and use the paragraph below.

AddOutputFilterByType DEFLATE text / plain
AddOutputFilterByType DEFLATE text / html
AddOutputFilterByType DEFLATE text / xml
AddOutputFilterByType DEFLATE text / css
ADDOutputFilterByType DEFLATE application / xml
AddOutputFilterByType DEFLATE application / xhtml + xml
AddOutputFilterByType DEFLATE application / rss + xml
AddOutputFilterByType DEFLATE application / javascript
AddOutputFilterByType DEFLATE application / x-javascript

For NGINX

If you use NGINX and do not use the WP Super Cache or W3 Total Cache plugin, insert the following into the nginx.conf file :

gzip;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text / plain text / html text / css application / x-javascript text / xml application / xml application / xml + rss text / javascript;

# Disable for IE <6 because there are known problems
gzip_disable "MSIE [1-6]. (?! * * SV1)";

# Add a varying header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

Improved server response time

This improvement means optimizing the speed of the host or server you are using. If you use a host, make sure your host is as fast as the best host for WordPress . If you are using a separate server / VPS , keep an eye out ( Newrelic can be used ) to keep track of whether the server’s processing speed is slowing over time, from which you can apply additional saving methods. Other data buffers such as Database Cache or Object Cache.

If you are using a separate server or VPS, then use EasyEngine or Centminmod to run WordPress for maximum response speed.

Improved browser caching

By default, when the browser loads web pages, it will cache static files such as images, CSS, and even web content if you have gzip enabled. But if you do not optimize the time that your browser is allowed to cache, you will have problems caching too fast or too long, it is best to just browse the cache of static files on Your website is about 1 month beautiful.

To do this, we will need to declare a bit more Cache-Controland go ETagto the HTTP Header of the static files, for example thachpham.com:

HTTP / 1.1 200 OK
Date: Tue, 16 Jun 2015 17:13:06 GMT
Content-Type: image / png
Content-Length: 112
Connection: keep-alive
ETAG: "550032be-70" 
Expires: Fri, 13 Jun 2025 17:13:06 GMT 
Cache-Control: public, max-age = 315360000
Access-Control-Allow-Origin: *
CF-Cache-Status: HIT
Vary: Accept-Encoding
Accept-Ranges: bytes
Server: cloudflare- nginx
CF-RAY: 1f7824b54a4905b5-RNA

Above paragraph means that you have added Cache-Controlto the header parameter publicand max-agethe 315360000second, which means that this file will be cached in the browser during 10 years. At this point, the segment Expireswill display the exact time that the file has run out of cache, and ETagit will contain a random string of values ​​that the browser will check to see if the file has changed. If so, it will clear the cache. get older. So in summary, the above is the browser will cache this file for 10 years if the user does not clear the cache and the contents of the file is not changed.

To see HTTP Headers fast, you can go to  http://web-sniffer.net/ and copy a link of an image, CSS or Javascript file to your website to check if it already has the headers.

Add caching time with CloudFlare

If you use CloudFlare on your website, you can set expiration time for static files at Caching -> Browser Cache Expiration .

Cloudflare-browsercaching

For W3 Total Cache

If you use W3 Total Cache, when enabled Browser Cache (see the Gzip compression section above) it has added itself expiration time to the static file. However, you can go to Performance -> Browser Cache and mark the lines as ” Set entity tag (eTag) “, ” Set cache control header “.

For Apache

If you do not use CloudFlare and W3 Total Cache but use Apache webserver then you can add the following to .htaccess:

<ifmodule mod_expires.c>
<Filesmatch "\. (Jpg | jpeg | png | gif | js | css | swf | ico | woff | mp3) $
 ExpiresActive on
 ExpiresDefault "access plus 1 year"
</ Filesmatch>
</ ifmodule>

Or if the above does not work then use the following:

ExpiresActive On
ExpiresByType image / jpg "access plus 1 year"
ExpiresByType image / jpeg "access plus 1 year"
ExpiresByType image / gif "access plus 1 year"
ExpiresByType image / png "access plus 1 year"
ExpiresByType text / css "access plus 1 month"
ExpiresByType application / pdf "access plus 1 month"
ExpiresByType text / x-javascript "access plus 1 month"
ExpiresByType application / x-shockwave-flash "access plus 1 month"
ExpiresByType image / x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"

For NGINX

If you use NGINX then add the following to the domain configuration file of NGINX:

# Media: images, icons, video, audio, HTC
$ {
 expires 1M;
 access_log off;
 add_header Cache-Control "public";
}

# CSS and Javascript
location ~ * \. (?: css | js) $ {
 expires 1y;
 access_log off;
 add_header Cache-Control "public";
}

Term 1

This section is about the Google Pagespeed Insights rating system, and we have optimized our website based on the first four criteria in Google Pagespeed. In the next section we will continue to do other standards offline.

You May Also Like

About the Author: ThangZ

ThangZ is the founder of ThangMedia.com,is a personal webblog that was launched on 2017 and is being operated / developed by ThangZ founder.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This