How To Optimize a WordPress Site – Google PageSpeed Score
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:
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 #
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/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:
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/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/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 no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
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:
- Access those files using FTP or through file manager
- Then copy the code contained within them
- Go to my free online minifier tool, Minime
- Select the type of code you will be minifying
- Paste your code into the tool
- 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:
- Download the images that need to be optimized
- Use a photo editor like GIMP or Adobe Photoshop to open the images
- Reduce the images size and resolution
- 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.
<script src="/file/" defer>
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!