The time it takes to load a web page is called the page download speed, or load time. Your site’s average load time is an important factor in Google’s site ranking algorithm. Web users expect pages to load quickly, and pages with longer load times tend to have higher bounce rates, and those sites are seen as less important. For more information on the effect of site performance and organic rankings and conversion, see Cloudflares article on Website Performance and Conversation Rates.
To measure site speed, Google released a SEO tool called Lighthouse back in 2018 that offers some insight on the performance of your website and its pages. This audit gives a mobile and desktop score across four areas: Performance, Accessibility, Best Practices, and SEO. For the sake of this article, we will be focusing on solely the “Performance” category of the testing and its associated fixes. So, let’s dive in!
This area is scoring based on factors such as:
- How long it takes your webpage to first “begin” loading. This is known as the “first contentful paint” or “first meaningful paint”. This is usually based solely on the server and it’s performance, we will ignore this metric in this post since we can’t do anything about it in Site Builder.
- How many render-blocking elements such as scripts, fonts, etc. are in the head and must finish loading before the browser can start to draw the page.
- Do you defer “offscreen images”? Also called “lazy loading”
- Do you serve properly sizes images? Are they properly compressed?
What Can We Do?
Call a web development professional! In all seriousness, you will need to, but lets go over some things in the meantime.
Header and Footer: Common Files/Scripts
We recently optimized the Site Builder site www.OhMyArthritis.com and will explain our process using it as an example. When we examined the common scripts, we found them to be dispersed throughout the header and footer. Remember that each separate request in the <head> to a script or file is going to add to our “render-blocking” scripts, and thus increase page load time.
To alleviate this and increase our improvements in lighthouse performance score, we needed to:
- LOAD. All of our libraries for our fonts, jQuery version, and other scripts locally rather than from an external URL
Lazy Loading Images “Below The Fold”
To optimize our images and save on overall page load size, which is the biggest factor in speed and performance of a web page, we needed to:
- Download all of the images use on our website
- Process these through an image optimization library which, on average, saves anywhere from 25-45% of image file size (depending on what compression already existed)
- Ensure no loss to visual quality and re-upload
Our entire image folder ended up being compressed by a total of 30%, and we ended up saving ~82mb off our total image folder size! Mark that up in the win column.
One interesting I noticed while auditing using the Lighthouse performance tool, was that it was all over the board in terms of numbers. This made it difficult to focus on the metrics we can control. First paint and other server-response times ranged from 6s to 43s during testing. To alleviate an unsatisfying / inaccurate report on our performance work, I took 3 tests before (for mobile and desktop) and after our upgrades mentioned above. This gave us a good mean, average score.
We wanted to test a set of pages that would cover all features that exist on the site. To accomplish this we chose to test:
- The Homepage
- A Category Page
- Two Product Pages
- A Content Page
You can see there was a definite improvement across the board, we are happy! Don’t mind the size of the scores during testing, there are some scripts and other things that are causing other issues at the moment which is drastically bringing down the numbers.
You can see we took our render-blocking resources line item from in some cases taking 3s+ to an average of 0.84s!
- Third-Party Scripts: Facebook, Hotjar, Hubspot, Pinterest, Bing Ads, Tawk.to, analytics, etc. were contributing a half-second to the initial load time.
- Script Execution Time: LeadFlows, collectedforms.js, facebook, getsitecontrol.com were contributing about a second of execution time.
Contact us for a Quote
We have become expert at getting the most out of Site Builder, and are happy to supply examples & references. Contact us for a quote to optimize your Site Builder site – the improvements will pay for themselves through better organic rankings and conversion rates!
More from Fourth Wave
Latest posts by Kevin Carpenter (see all)
- How to Increase eCommerce Revenue With Upsells and Cross-sells: Cart and Product Detail Page - September 8, 2020
- Netsuite 2020.2 Update: Data-center URL deprecation + What You Need To Know - August 8, 2020
- Site Builder Performance Upgrades - July 19, 2020
- Protect Your Online Forms from Bots & Spam - October 22, 2019
- What to know about schema.org and microdata tagging - May 2, 2019