Google Page Speed Recommendations

google-pagespeed-insights-and-recommendations

Enable Compression

This is an easy to improve the speed of a webpage. The size of a page impacts the time it takes for the browser to download files. Enabling compression reduces that size  by using gzip (similar to zipping a folder on your computer so you can email it to someone). How to enable this will depend on the type of server your website is hosted on.

For an Apache Server

For most people reading this, compression is enabled by adding some code to a file called .htaccess on their web host/server. This means going to the file manager (or wherever you go to add or upload files) on your webhost.  If you are not familiar with the .htaccess file, please read Patrick Sexton’s working with .htaccess article to get some know how before changing it.

The code below should be added to your .htaccess file:

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

Save the .htaccess file and then refresh your webpage.

The instructions and code above will work on Apache. If they are not working there is another way that may work for you. If the above code did not seem to work, remove it from your .htaccess file and try this one instead:

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

Check to see if your compression is working with these compression check tools:

  • https://checkgzipcompression.com/
  • https://varvy.com/tools/gzip/

Sources:

For an IIS (Microsoft) Server

The <httpCompression> element specifies the HTTP compression settings for Internet Information Services (IIS) 7.

Note: An HTTP client must initiate communication for compressed content by sending the appropriate HTTP Accept-encoding header. If a client is not capable of HTTP compression, it will not pass that header and IIS 7 will always return uncompressed content.

IIS provides the following compression options:

  • Static files only
  • Dynamic application responses only
  • Both static files and dynamic application responses

Static Compression

IIS 7 caches compressed static content in the path that is specified by the directory attribute, which increases compression performance by eliminating the need to recompress content that has already been compressed. After IIS 7 has compressed a file, subsequent requests are given the compressed copy of the file from the cache directory.  You should use static compression with files that do not typically change, such as HTML files (*.html, *.htm), text files (*.txt), Microsoft Office documents (*.doc, *.xls, *.ppt), etc.

Note: Image files such as *.jpg and *.png files are also static files, but typically they do not benefit from HTTP compression because these image files are already compressed.

Dynamic Compression

Unlike static compression, IIS 7 performs dynamic compression each time a client requests the content, but the compressed version is not cached to disk. Dynamic content is typically content that is created by an application and therefore changes often, such as Active Server Pages (ASP) or ASP.NET content. Since dynamic content should change often, IIS 7 does not cache it.

Sources:

For an NGINX Server

Compressing responses often significantly reduces the size of transmitted data. However, since compression happens at runtime it can also add considerable processing overhead which can negatively affect performance. NGINX performs compression before sending responses to clients, but does not “double compress” responses that are already compressed (for example, by a proxied server).

To enable compression, include the gzip directive with the on parameter.

gzip on;

By default, NGINX compresses responses only with MIME type text/html. To compress responses with other MIME types, include the gzip_types directive and list the additional types.

gzip_types text/plain application/xml;

To specify the minimum length of the response to compress, use the gzip_min_length directive. The default is 20 bytes (here adjusted to 1000):

gzip_min_length 1000;

NGINX Compression via Varvy.com

To enable compression in NGINX you will need to add the following code to your config file:

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
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 some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";

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

Sources: 

Leverage Browser Caching

Properly setting up browser caching can reduce the number of files a browser must download in order to render the page. For files that do not change often – like template css, js, and imagery – we recommend setting the browser cache to at least one month. Included in this audit is a list of resources that were flagged and their current cache length, evaluate these first.

Sources:

Eliminate Render Blocking JavaScript

Google recommends deferring the parsing of any non-essential scripts that are not critical to constructing the visible content for the initial render. Alleviating this problem can also be done by making JavaScript load asynchronously instead of synchronously. Google has documentation on how to do this here. Included in this audit is a list of JavaScript resources that were flagged by Googles PageSpeed Tool.

Sources: