Long exposure photography of road and cars

How and why our websites are so fast

By Darren Carlin in Technology on May 13th, 2019

Technology has come a long way

Over the past few years there have been some incredible leaps forward in web development technologies. Of these, the most notable is the emergence of static site generators. A static site generator basically compiles a website with dozens of pages into a single file (or single page application), eliminating the need for a website to reload each time the user switches pages, which in turn significantly increases speed.  

Older technologies

Still, many digital agencies continue to use older technologies from previous years. They are embedded in a digital eco-system which relies on these technologies that it would require a huge amount of of time and effort to shift away from. Websites built by these agencies are still good, well designed, functional, fast websites (for the most part), however they are not up to the highest modern standards given todays technologies.

Performing tests

Google Lighthouse Audit

There is a great tool by Google called Lighthouse Audit, which is what we use extensively on our sites. It tests in several different categories including PerformanceAccessibilityBest PracticesSEO and whether or not the website is PWA (Progressive Web App) enabled on both desktop and mobile devices. It scores each category out of 100.

We performed a Lighthouse Audit on 11 different agencies across the country, their websites, and one client website each,  and compiled an average score for each of the above categories:

Agencies Website - Mobile

  • Performance = 59.3 / 100

  • Accessibility = 72.3 / 100

  • Best Practices = 69.3 / 100

  • SEO = 94.8 / 100

Agencies Website - Desktop

  • Performance = 59.5 / 100

  • Accessibility = 73.5 / 100

  • Best Practices = 70.8 / 100

  • SEO = 95.4 / 100

Agencies Clients Website - Mobile

  • Performance = 40.1 / 100

  • Accessibility = 68.2 / 100

  • Best Practices = 60.8 / 100

  • SEO = 91.6 / 100

Agencies Clients Website - Desktop

  • Performance = 41.3 / 100

  • Accessibility = 73.6 / 100

  • Best Practices = 61.6 / 100

  • SEO = 90.2 / 100

Pretty similar results. A crucial factor in these tests was that only 1 out of the 11 sites tested was Progressive Web App enabled. Why is this important? Progressive Web Apps treat websites as if they were native apps, like the apps you find on your phone; in other words, once loaded you can continue to access the app regardless of internet connection. They are faster, better for SEO, and they work offline ( which is huge ).

Here are our results for our site and our clients:

Our Website - Mobile

  • Performance = 95 / 100

  • Accessibility = 100 / 100

  • Best Practices = 100 / 100

  • SEO = 100 / 100

  • PWA Enabled

Our Website - Desktop

  • Performance = 95 / 100

  • Accessibility = 100 / 100

  • Best Practices = 100 / 100

  • SEO = 100 / 100

  • PWA Enabled

Our Clients Website - Mobile

  • Performance = 98 / 100

  • Accessibility = 98 / 100

  • Best Practices = 93 / 100

  • SEO = 100 / 100

Our Clients Website - Desktop

  • Performance = 100 / 100

  • Accessibility = 98 / 100

  • Best Practices = 93 / 100

  • SEO = 100 / 100

Why is all this important?

Traditionally there has been shortcomings in the the technology we use to build websites. There are certain parts of the these test results that are not useful and that we can ignore, like the render-blocking resources. In order to achieve only a marginal increase in this section of a website's score, it has to compromise in other areas, making it actually less user-friendly in the end. But when we are talking about the newer web building technologies (the ones we use), modern speed tests are now more important than ever in separating good user experiences from the amazing ones.


Side note: Its worth testing any potential agency you are going to choose for your website. To perform the lighthouse audit:

You need to be using Google Chrome to perform these tests.

Mac

  1. Keyboard Shortcut: Command+Option+I

  2. Click the audits tab at the top right of the window that opens

  3. Choose mobile or desktop and click run audits to give you a detailed score

Windows

  1. Keyboard Shortcut: Control+Shift+I

  2. Click the audits tab at the top right of the window that opens

  3. Choose mobile or desktop and click run audits to give you a detailed score

Image of Darren Carlin

Author: Darren is the founder and lead developer at dazzle works. He's from Waterford but lives all over, currently in NYC consuming way too much coffee and pizza.

Connect with Darren: