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 image size reduction.
- Optimize the insertion of CSS into the website.
- Set the priority order of content in the website.
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.
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 .
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) “.
If you use the Apache webserver without using the two plugins above, you can enable Gzip by inserting the following into .htaccess :
Or if the above you insert into that 500 error or no gzip then delete and use the paragraph below.
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 :
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
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
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.
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 .
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 “.
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:
If you use NGINX then add the following to the domain configuration file of NGINX:
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.