Waiting for a website to load is fun for no one. Most website visitors will not wait long if your page takes forever to load. Slow loading pages not only have an adverse effect on user experience but also on search engine ranking. If a page takes too long to load your visitors will most likely end up leaving your page for another. Google has picked up on this and will punish your page with a lower search position than a page that loads quickly. Your best bet is to shoot for a 3 second or less load time and your visitors and Google will be happy. So how do you fix this on your WordPress website? We spent some time speeding up our site and this article will explain how we did it.
Our Problem – Massive Page Size
Alpine Design’s homepage had a major loading issue. Due to an HTML5 embedded video, our page was over 70 MB in size when an average web page is just 1-3 MB. This left us with a 15 second load time. We had to get the load time down significantly but first we had to get the page size down. Our first step was uploading our video into video editing software. The length of the video was 30 seconds long to start. We know that most visitors don’t spend more than 10-12 seconds above the fold so we clipped the video to 12 seconds. Next we edited the resolution slightly and ended up with a video that was 1/8th its original size. We tested the page speed with GT Metrix and improved our load time to about 10 seconds.
Our next step was to optimize the images. Many images were much bigger than they needed to be so we installed the WordPress image compression plugin EWWW Image Optimizer. This reduced the size of all of the images on the website. Between reducing the video size and compressing the images, this left our homepage with a total size of 8 MB. That is 90% of it’s original size! Our load time dropped to 7 seconds.
Website Caching And The Road To Glory
We have successfully cut the load time in half by reducing our page size but we are not yet to the magic number of 3 seconds. Our next step was to install a caching program. A good caching program like W3 Total Cache will come with quite a few great features that improve your website performance. On PHP website software like WordPress, web pages are created dynamically on the fly. There is typically some lag time while the code queries the MySQL database and “builds” the pages. A caching program will essentially pre-build these pages and take snapshots of the code to server to web visitors. This greatly reduces the database lookups and decreases page load time.
A good caching program will also come with other great features like GZ compression, CSS minify and JavaScript minify. The CSS and JavaScript minify will compress some of the code together to decrease load time. We added W3 Total Cache, configured it and all of it’s features and re-tested the website. 5 Seconds.
Delivering Content At the Speed of Light
Well not really the speed of light but fast is how a CDN or Content Delivery Network can serve your website. A CDN is a network of servers around the globe that cache and store a copy of your website to be served to regional users. We like Cloudflare for it’s ease of use and free package to get started. Setting up is relatively easy if you understand how DNS works. You will need to point your websites nameservers to Cloudflare and then instruct Cloudflare where to point the IP. This is done quite easily in their dashboard and the rewards are almost immediate. Once you configure your parameters, Cloudflare will cache your site and images then deliver them around the globe at lightning speeds. And you can see the results for yourself:
3 Seconds! We have successfully taken our page load time from 15 seconds down to 3 and you can too. If you follow the steps.
Conclusion
Page speed is one of the most important factors of any website since it will directly affect your visitors’ experience and your search engine position. Follow these steps and you too can have a dramatic reduction in your WordPress page load time.
- Reduce size of media by clipping videos or compressing images
- Use a caching plugin
- Minify CSS and HTML
- Run your website through a content delivery network
We will continue to optimize to get that load time even lower but always shoot for the 3 seconds benchmark.
Leave a Reply
You must be logged in to post a comment.