Google PageSpeed — Under the Hood Details of Duda’s Website Speed Improvements
2017 is the year of website speed. That’s what we’ve been hearing from our customers, industry colleagues, and Google. Many influencers see slow websites as the biggest issue facing the web today.
In June of last year, Google announced its plan to use speed as a ranking factor. Add to that the fact that Google will soon use a mobile-first index and you can see that mobile + speed is very important for success on the web. In addition to the importance Google places on it, speed is important for other reasons too. For example, we know sites that show users content quickly are much more likely to show engagement, conversion and lower bounce rates. We know from DoubleClick that 53% of mobile visits are abandoned if it takes them more than 3 seconds to load. In other words, if you’re running any paid advertising, half of your budget could go out the window because of a slow site.
Various industry initiatives, including Google AMP (Accelerated Mobile Pages) and Facebook Instant Articles, aim to speed up mobile pages. But the most important and broader issue is making standard web pages load and start rendering faster. This means that the user, especially the mobile user, sees the initial page displayed while more content is loaded in the background.
For these reasons, Duda decided to embark on a speed optimization project: to follow Google PageSpeed recommendations to make our sites load faster and score higher.
A Quick Look Back
Two years ago, we were already addressing some aspects of page speed. As you can read in this post by Danny, our infrastructure architect, Duda sites already got a pretty good score compared to the industry. However, Google is constantly making changes to the way it calculates PageSpeed score and we decided it was time to put a big effort in order to get a very high score for all Duda sites.
We decided that we want every site built on the Duda platform to have the best possible PageSpeed score. We took on the challenge of ensuring a score of above 90 for every Duda template, and for sites built on our platform, on all devices. We wanted to affect both existing and new sites, so all Duda customers have the best performing websites.
We’ve been working hard on this challenge for the past few months, and I’m happy to announce that, as of today, after publishing a Duda site, new or old, you will get a great Google PageSpeed score. There are some exceptions as described in our support article but by and large, this is the new reality for Duda sites.
How We Did It
The CSS part was trickier. The browser needs CSS definition in order to show the styling of the page elements. If we were to move all the CSS to the bottom of the page, the initial rendering of the page would look ugly, as elements would be rendered without styling, and only after a second or so, styling would be added. This is definitely not what we wanted to achieve here.
Instead, we found a way, when publishing a site, to identify which CSS rules are critical to the initial rendering and placed them at the head of the page. The rest of the CSS was pushed to the end of the body, as it is not required for the initial rendering.
This calculation is quite heavy and needs to be done at scale, as many Duda sites can be published at the same time. We used a relatively new service provided by Amazon Web Services called “Lambda” that helped us parallelize this process efficiently.
We also worked hard to optimize image compression and resizing (we create several sizes of every image uploaded to Duda). We also started using the most recommended lossy image compression to significantly reduce image size while keeping image quality very high.
Finally, we decided to make the entire process asynchronous (i.e., it runs in the background and allows you to keep working) so that publish time won’t take longer than it does today. Typically, sites are optimized for PageSpeed ~30 seconds after publishing is complete.
If you want to know if your Duda site was optimized, you can take a look at the HTML source of your homepage. If it contains a chunk of style code called “criticalCss”, it means that the site was successfully optimized.
Looking Beyond Google PageSpeed
We’ve made sure that all Duda sites now get a very high score on Google PageSpeed, but what does this mean to actual users? The good news is, since the Google PageSpeed score ensures that the initial rendering of a page happens really fast when we compared our sites before and after using another tool called webpagetest.org, we saw a huge improvement in initial rendering time.
As you can see in the table above, we improved start rendering time by anywhere from 100% to a whopping 500%! And that’s what really important to users. When browsing sites from a slow mobile connection, this optimization is even more dramatic.
What About other Website Builders?
We couldn’t resist testing sites of some other website builders in the market. To keep the tests as fair as possible, we took the first template we found and published it without adding content or making modifications that could reduce the PageSpeed score.
Here are the results of our tests:
WordPress – 65/100 on mobile, 84/100 on desktop. Test was based on the “Edin” theme at www.wordpress.com. See results.
WordPress is obviously very fragmented, has many different versions, and many themes and theme developers, so pagespeed can vary drastically between themes. We picked the first theme offered for businesses on wordpress.com.
Weebly – 49/100 on mobile, 58/100 on desktop. Test was based on the “Love Seat” template (first template on Weebly’s template page) – See results
Wix – 48/100 on mobile, 71/100 on desktop. Test was based on “Barista” template – See results