Google PageSpeed — Under the Hood Details of Duda’s Website Speed Improvements

By Amir Glatt

cover_350x350_012017 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.

Challenge Accepted

image01

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.

screen-shot-2017-03-15-at-1-23-36-pm

How We Did It

The biggest challenge was making sure that most of our JavaScript and CSS code wouldn’t block the browser from rendering the initial content of the page. For the JavaScript part, we refactored our JavaScript framework so that none of it is required in order to render the page. After the refactoring, we moved all JavaScript towards the end of the <body/> tag. This ensures that the browser loads the code last, instead of first, prioritizing the content over the JavaScript execution.

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.

image04

image06

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.

image02
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

image03

Wix – 48/100 on mobile, 71/100 on desktop. Test was based on “Barista” template – See results

image00

Conclusion

Now it’s your turn to take advantage of our work and make your website optimized for speed. Login to your Duda account and republish every existing site that you have. If you’ve made HTML and JavaScript customizations to your site, please follow our guidelines to make sure your site is fully optimized. Let’s make the internet faster together!

, ,

About Amir Glatt

Amir is the Co-Founder, CTO and Duda's first developer. In addition to dreaming day and night about Duda's next cool features, he's a frustrated soccer fan as his team always loses. He also hates the color yellow. After watching The Big Lebowski more than 50 times, he recently decided his favorite character is Liam O'Brien, Jesus' bowling partner.
Blog Comment Policy