Updates to MAP's Websites for Google’s New Lighthouse Test
One of the main themes that permeates nearly everything we do at MAP is speed . We constantly ask ourselves big questions like, “How can we help web pros build websites faster?” and “How can we get those websites to load more quickly?” It’s the latter of these questions that we would like to take a few moments to address today as Google has given site load times (often referred to as ‘pagespeed’) more and more importance as an SEO ranking factor over the past year. But first, a little background… As you may know, Google’s new Lighthouse site testing tool aims to deliver a robust and holistic view of how a website performs in the real world and issue a score accordingly. One of the key factors the test takes into account is how fast a website loads across desktop and mobile and we believe that fast loading websites are a key driver of a successful web presence. In fact, Duda was one of the first web design platforms to optimize every site built on our platform for scores in the high 90s in Google’s original PageSpeed test, which preceded the aforementioned Lighthouse project. (Quick aside: there is a new version of Google’s PageSpeed test based on Lighthouse that is quite different from the original test.) It’s important to note that all of the previous work we’ve done to achieve these scores is still as relevant today as when it was implemented. But of course, with a new test comes new benchmarks and we’d like to take this opportunity to pull back the curtain a bit and go over a few things we’re working on to ensure every MAP website receives the best possible Lighthouse score moving forward. So let’s dive in.
How MAP Is Getting Good with Lighthouse
After a fair amount of research, and far too many in-depth meetings, MAP’s team of developers and product managers sorted the tasks for improving our websites’ Lighthouse scores into two groups: those that could be classified as low-hanging fruit and addressed in the short-term, and those that would require a more fundamental reworking of how our sites are loaded. Here are a few of the tasks we worked on first to help immediately improve your websites’ Lighthouse scores:
- Improving Critical CSS & Removing Unused Fonts: When a visitor used to land on a MAP website, some Google fonts would load the entire Unicode range. This caused many sites to slow down, as the fonts were larger than necessary and often included characters that were not used on the actual website. We have improved the logic of how we include font ranges within the critical CSS generation. (Critical CSS is the styling that is required to load above the fold content). This improvement was deployed at the end of last year and roughly offers a 5% improvement in Lighthouse score.
- Lazy Loading All Images Below the Fold: Historically, all images (except in Photo Galleries) on Duda websites were fully loaded when a visitor landed on a page. Now all images at the top of a site (above the fold) are marked as ‘important,’. All the remaining images (marked as unimportant) are set to load after the page finishes loading or as they come into view while scrolling. This improvement was released in January and currently provides about a 5-10% improvement in Lighthouse scores. However, the amount of improvement may vary based on the number of images on an individual page.
- Lazy Loading CSS: MAP now sets CSS style sheets to load after a page loads. This enables the browser to better prioritize new styles and determine when they should be loaded and displayed on the page. This improvement was released in early January.
- Lazy Loading for Widgets: Previously, the Duda platform loaded all of the widgets on a page right when a visitor arrived, and this often meant loading and executing external scripts or code bases. Today, we’ve implemented lazy loading for Facebook based widgets, so they only start to initialize upon entering a visitor’s viewport. Eventually, we plan to extend this behavior to all widgets on the platform, as there are many (such as our Map widget, Twitter and others) we know could greatly benefit from this functionality. This is an ongoing project and should result in general improvements for our sites’ Lighthouse scores as we make progress.
- Re-work core CSS & JavaScript: We are currently planning to re-work how we deliver JavaScript and CSS to websites. Instead of loading large chunks of code, our goal is to dynamically deliver only the necessary JavaScript & CSS based on what is actively being used on the page of a site. We expect this to have the biggest benefit of all of our endeavors and believe it sets us up for long-term site speed success.
- New image format: We are currently investigating how much benefit converting uploaded images to the WebP format, in addition to JPG & PNG, will provide to MAP websites. WebP has about a 35% reduction in size as compared to JPGs, and has long been supported by Chrome with other browsers adding support all the time. However, our team will also ensure we have fallbacks in place for browsers that don’t support it yet. We don’t have an ETA yet — but as soon as we do, we’ll make sure you know.
