Site speed and site performance. Believe it or not, it can have a serious impact on your businesses website performance. If a website loads too slow chances are people will leave and restart their search within Google. With the introduction of AMP pages and the growing focus on a singular search algorithm now is the time to focus on site speed.
If you still need a reason to care – Gary Illyes has been quoted as saying in the past page speed is a ranking factor.
I don’t know about you but that’s all I need to hear before I start making changes quick fast and in a hurry.
To see if you have a potential site speed issue log into Google analytics. Look under Behavior – Site Speed – Overview. This view will give you an overview of the average load time of your website.
I had a client site in the past with page speed issues and it became a concern. This got me thinking there has to be a quick and easy solution that I can implement. There is and I used my blog as the test subject.
If you aren’t familiar with the tool now Google page speed insights will be your best friend by the end of this project. It will grade your web page according to specific attributes search engines look for. The top issues you will need to fix initially are: optimizing images, leverage browser caching, and minify HTML and CSS.
This is not a guide on how to get a perfect score with Google page speed insights but rather how to get maximum results with the most efficient amount of effort exuded.
Step 1: Optimizing Images
Images are one of the main culprits of slow load time. To fix this we need to condense images and reduce load time. There are a few ways to achieve this. Don’t be deceived by WP smush while it provides a relatively quick and easy way to optimize images for WordPress it does a poor job. According to Google’s page speed insights test my site was still kicking up a red flag in the image department.
The solution I stumbled across was to use an online tool called compressor.io for large Homepage images. This reduced my homepage images by roughly 60% whereas WP smush reduced them by maybe 15%. For compressing multiple images for a site doing them, one off doesn’t quite make sense. So I use PNG gauntlet. This simple tool is a standalone piece of software you can download and set up to compress multiple images simultaneously.
Compressing images alone will work to improve load time significantly.
Key Takeaway: Continually look for ways to reduce images. Avoid large sliders unless they serve a specific purpose. Avoid flash like the plague.
Step 2: Leverage Browser Caching
The next step is to leverage browser caching. This is handy because if your site has a lot of static resources that do not change often you can cache those assets on a searcher’s computer. When they visit a second time the page will load significantly faster since those resources have been previously cached.
Now I did this a few different ways and the easiest by far is to utilize a CDN or content delivery network. The changes to caching have to happen in your HTTP access file. If you do not feel comfortable making changes then a CDN is your safest option.
I choose to use Cloud Flare as my CDN of choice. It is free and relatively easy to setup. You will need to make changes to your DNS Nameservers. If you host with Godaddy login to your account and click manage my domains. From there find your domain and click your site you want to make changes to within your account. Go to nameservers and click manage. You will need to change your nameservers to whatever Cloud Flare prompts you to change it to.
Once you’re within Cloud Flare’s dashboard you will see a wide range of icons. It might be overwhelming but for now, focus on the Caching section. Depending on your business objectives adjust your browser caching accordingly. Personally, for my blog, I do not publish new content or make changes on a weekly or even a bi-weekly basis so I set the caching to 16 days. This will be adjusted depending on your goals and content creation cadence.
Key Takeaway: You want to enable browser caching for resources that do not change that frequently. While Cloud Flare does not make much of a distinction it is still a good idea to cache depending on how frequently you update your website.
Step 3: Minify HTML and CSS
Next, we want to minify HTML and CSS to further improve load time. By minifying the file of your source code your web pages will load quicker. Fortunately, we do not have to do this manually. Cloud Flare will actually take care of that as well. I know what you’re thinking I don’t want the program potentially messing up my source code. Well, Cloud Flare makes use of a PHP script to dynamically minify the source code as the page loads.
To enable this click the speed icon at the top of the dashboard. At the top of the page under Auto Minify check HTML, CSS, and JS. This will enable the PHP script to fire off and dynamically reduce the file size of your source code throughout your site.
Key Takeaway: Source code with a lot of extra white space causes web pages to load slower. Sometimes we have to balance web development best practices with User Experience in mind. Utilizing minification via a dynamic PHP script allows us to achieve this.