Optimize WordPress Site and get a better Google PageSpeed Score



With instructions on how to: Leverage Browser Caching, Enable Compression, Minify HTML, CSS, and JS, Optimize Images and Defer JavaScript – For WordPress Websites (typically using shared hosting, Cpanel, Apache Servers)

One test that clients/employers will often ask their web developers or SEO consultants to perform on their websites is the Google PageSpeed test. This is because page speed is an important factor in your search rankings. So running this test will tell you what components of your website are slowing down your page speed. It does this by evaluating the resources on your webpage and returning a score. Often times companies will want you to achieve a perfect Google PageSpeed score of 100/100. Although it is possible to achieve a perfect 100 score it may not be necessary.

Before we address why it may not be necessary or even possible to achieve a perfect score, let’s go over the different warnings you will see and how to fix them.

Optimizing your site manually versus with plugins

You may consider the following plugins to help you resolve your Google PageSpeed Insights (many of these plugins I’ve tested or used myself; if you have certain types of shared hosting, your hosting provider may not allow you to download or active some of these options):

I think that using a full plugin approach to optimizing your site can work well, but isn’t the best strategy to get the best results.
The plugins that I use are for JS, CSS, and HTML deferring and optimizing. I do all the other optimizations manually to get the least amount of flagged resources. Those 2 plugins that I do use are:

Autopimitize and Async JavaScript plugins work together and these is an option within these plugin settings to turn on additional features when both plugins are activated.

How To Leverage Browser Caching

Your Google PageSpeed Insights will suggest that you leverage browser caching when it doesn’t see caching headers returned from your websites server or if resources are loaded that are only cached for a short period of time.

To add the caching headers to your website you will have to access your .htaccess file. You can do this by using FTP or through your hosting companies online file manager.

Your .htaccess file is on your sites most delicate files so be sure to make a backup and review your site after you make any changes.
You can add this code underneath any code that is already there:


#START CODE EXPIRES CACHING #
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"
#END CODE EXPIRES CACHING #

This will let your server know how long to cache certain resources. After doing this your Google PageSpeed score will improve but the suggestion to leverage browser caching may not be gone. Typically if there are still links there those are being loaded from a resource not connected to your site, like an API for google Analytics or links for Facebook widgets, things like that. Resources that are not cached on your server.

You can either remove these plugins, widgets, or APIs that are not able to be cached on your server from your website or leave them and it will slightly affect your score and page speed.

Enable Compression on your Server

Google’s PageSpeed Insights will suggest that you enable compression when it detects a large amount of resources are been transferred without gzip compression.

Gzip simply takes all your websites parts and compresses them while they are being transferred across the net making the total load smaller and processing time faster.

You can put this code in your .htaccess file:


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

Then use my free online GZIP compression checker to test and see if compression has been enabled on your server.

How to Minify HTML, CSS, and JS

Googles PageSpeed Insights may return a list of code that’s used to load your site that isn’t minified. Code that isn’t minified contains things like large amounts of white space and comments.

To resolve this warning all you need to do is minify your code. You can do that by following these steps:

  1. Access those files using FTP or through file manager
  2. Then copy the code contained within them
  3. Go to my free online minifier tool, Minime
  4. Select the type of code you will be minifying
  5. Paste your code into the tool
  6. Copy the minified output

Then return the file on your web server, delete the unminified code, paste in the minified output, then save the file. Do this for every file that was reported on the results of your Google PageSpeed Insights until all resources are minified.

Optimize Images for Web

A easy way to slow your website down is by adding a lot of large images into the site. Many images produced by cameras today are very high resolution making the image file size very large. On websites it isn’t necessary to serve such high resolution images and it can slow your site down considerably.

If you have images on your site that haven’t been optimized for web your Pagespeed Insights report will list these resources for you.

You can choose to download the optimized resources from Google in a zip file;  inside will be your images that Google has compressed. Sometimes, I’ve had trouble with these files so you may have to optimize your images manually.

To optimize your images manually all you have to do is:

  1. Download the images that need to be optimized
  2. Use a photo editor like GIMP or Adobe Photoshop to open the images
  3. Reduce the images size and resolution
  4. Save the image (sometimes there is an option to “save for web.” In those options you can reduce the resolution also.)

You also will need to either stay aware of the images you are uploading to ensure they are optimized or start using a plugin like WPSmush to help optimize your images on upload.

How to Defer JavaScript and CSS

One of these last suggestions you can get from your Google PageSpeed Insights is to defer JavaScript and CSS resources that are stopping your page from loading. Meaning there are some scripts and CSS files that need to be executed before your page content. The idea is that would move that ones that are not necessary to be executed with the above the fold content lower so that the users page loads faster.

Like I mentioned early I use two plugins, Autopmize and Async JavaScript, to optimize my page delivery and defer these resources. If you want to do this manually you will have to locate every script that needs to be deferred and add the following bit of code within all the script tags:

<script src="/file/" defer>

You can optimize your CSS delivery by in-lining the styles you need to load first, and the others would have to be loaded either asynchronously or with JavaScript. Now if this all sounds very complicated to you, that’s because it is. This may be the only step in the optimization process that requires a higher level of technical skill. Also it could be time-consuming and difficult to do if you aren’t familiar with your websites code, which is why I recommend that you also use the plugins I use to resolve this warning on PageSpeed Insights.

If you have trouble doing this yourself you can have me do it for you! Just book my WordPress Website Optimization Gig on Fiverr, or if you have a bigger more complex website or server, contact me directly for help!

With Love,

Lauren Alyce

Tags: , ,

Leave a reply

Share