How does your website load time compare to your competitors? Did you know that Google actually prefers websites that load up fast? It could eventually mean that it will increase your chances of being listed higher in search results. Even if your website load time seems fine, there’s a very good chance it’s actually failing in the search engine’s “eyes”. I’ll show you how to first check your website’s loading time score, and then start to fix some problems that may be happening.
Your first step is to head over to the Google Page Speed tool – (link opens in another tab) -, and enter your website’s web address into the input there.
After you hit the “analyze” button, it should only take a few seconds for your Google Page Speed score to be listed. There’s two tabs. One for mobile and one for desktop.
The goal is to have your score 90 or above. I was able to bring this very site up from a score of 68, to a current score of 96! What are you seeing for yours?
There will be a list of suggested fixes listed here that can help you improve the score. I will say that getting your score to 90 or above isn’t always easy, especially when we’re talking about what is served to our website visitors on mobile. Some of these suggestions may be more involved than you are prepared to take on. If that is the case, be sure you contact your web designer and have them start working on these fixes.
Reduce Image Size = Reduce Website Load Time
One of the suggestions you might see from your test is to reduce your image file sizes. This step alone can reduce your load time significantly. There are a number of ways to do it, but I’ll show you how I reduce my images here on the Preeminent Productions website.
If you happen to own a copy of Photoshop make sure that you are always saving your images with the “SAVE FOR WEB” option. If it’s a jpeg image you can play with the image quality settings. The trick is to get the image file size as small as you can without seeing a lot of noticeable distortion. If it’s a png image you can’t play with the quality settings, but Photoshop is still saving it at the smallest size the software can.
If you don’t have access to Photoshop there is a free alternative called, Gimp that does a lot of the same things. Saving for the web is one of those tasks. You can download Gimp here. Then be sure to read their instructions on how to reduce your image sizes.
Some engineers at Yahoo created a great service called SmushIt to reduce image file sizes. All you have to do is upload your desired images and they will provide you with versions with a much smaller file size.
If you’re using WordPress then there’s a quick and easy SmushIt plugin that you can install as well: WP SmushIt.
Make Sure Gzip Compression Is On
All modern browsers are able to deliver compressed files to the user’s computer as long as you have properly compressed those files, and you’ve made sure that compression is enabled. What is compression? And why do I need to deliver these files? Compressed files are just versions that have had the fat trimmed off their code. Smaller versions that are downloaded and viewed quicker. It’s sent to our visitor’s computer browsers and then “reverted” back to the original version for them to view or use. The first thing you’ll want to do is head over to the Gzip Compression Checker (opens in new window), and enter your website’s address. If that tells you that compression is enabled then you’re good to go. Just skip to the next main section. If it’s not turned on then continue reading.
Editing Your .HTACCESS File
This is the ideal method of turning on compression for your website, but it’s also the hardest way of doing it if you’re not too familiar with the files on your server. If you’re unsure or just don’t want to mess with your server files, be sure to contact your web designer or let me know if you’d like help fixing this for you. (Also, be sure you are a recipient of my free Optimize course, where I go even further into detail -with images- on how you can edit your .HTACCESS file.) Once you have found and opened your .htaccess file, go ahead and add the following to the file without deleting what’s already there:
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
# remove browser bugs
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
Save and upload it back onto your server, and head back over to the compression checker tool to make sure that it’s working properly.
Use PHP To Turn On Gzip Compression
An easier way to turn it on is to just simply add the following to the very top of your website page files:
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?>
But don’t forget to change the extension of your files to “.php”. For example, if your website home page file is named, “index.html”, just change it to “index.php” after adding in the compression code listed above.
Don’t Forget To Actually Compress Your Files!
You’ve turned on Gzip compression, but it won’t do you much good unless you actually provide a compressed file to send to your users. There are free tools online that do this for you: Itools.com, or you can use open source software that you can download onto your computer, like 7-Zip. I’m a big fan of COMPRESS for Mac. Just pick the files you need to compress, choose “GZIP” as your chosen file version, and these tools will provide you with a smaller compressed Gzip version for you to upload onto your server. Upload them right along with your uncompressed versions. For example, you might have a file named, “thank_you.html”, and after compressing that file, you’ll also have “thank_you.html.gzip” as well. Put them all on your server so that they can be quickly delivered to your users.
<link rel="stylesheet" type="text/css" href="css/my_css_file.css" />
Use This Code To Defer Your Linked Files From Loading
Modified for brevity from https://github.com/filamentgroup/loadCSS
loadCSS: load a CSS file asynchronously.
[c]2014 @scottjehl, Filament Group, Inc.
var ss = window.document.createElement('link'),
ref = window.document.getElementsByTagName('head');
ss.rel = 'stylesheet';
ss.href = href;
// temporarily, set media to something non-matching to ensure it'll
// fetch without blocking render
ss.media = 'only x';
// set media back to `all` so that the stylesheet applies once it loads
ss.media = 'all';
WordPress Plugin To Handle Deferring For You
This plugin called, Autoptimize is absolutely amazing and it’s really all you need! Takes care of everything for you. Download it now!
Those steps will get you well on your way to a much higher Google Page Speed score, but there is plenty more to cover if you’re looking to get close to a 100 score. In the free Optimize Course below I go into more detail on the previous steps, including image and file examples, plus even more tips and techniques needed in order to lower your website load time. Google will certainly love your site, but most importantly your users will appreciate it, and most likely you’ll be beating your competition!