articles

Home / DeveloperSection / Articles / Google Lighthouse and how is it changing the way we development and design websites

Google Lighthouse and how is it changing the way we development and design websites

Alycia Gordan1193 25-Jan-2019

Google Lighthouse and how is it changing the way we development and design websites

Google has always championed the cause of accessibility without legislation for all internet users. To that end, they have rolled out various open source tools. Lighthouse is an example of a DevTool provided directly by Google. It can be used to assess website optimization. But Google didn’t stop at that. It released Lighthouse’s accessibility audit tool that has the potential of making billions of websites more accessible. For Google, it is all about improving the online experience for everyone. And it intends to continue doing just that. 

Today, we take a detailed look at how Google’s Lighthouse is changing Website Design and development. But we’ll start with a description of the Lighthouse:

Google Lighthouse and how is it changing the way we development and design websites

What is Google Lighthouse? 

Before Lighthouse, there were other tools like Mobile-Friendly Test, PageSpeed Insights, and Structured Data Testing Tool. However, none of them gave you a complete picture of your website – a global view so to say. The Lighthouse doesn’t focus on just one area, and while it is all about gauging performance, it views a page from different angles to do so. Thus, you can benefit from multiple audits and improve your website due to a clear assessment.

Here’s the best part about Google Lighthouse: it isn’t only meant for developers! Look at how easy it is to access the tool. You don’t have to use the command line. You can run it via browser, and enjoy a nice user interface even if you don’t know how to code.

Now for the change that this tool has introduced into the field of website development and design:

Google’s Lighthouse has these new best practices

The earlier versions of Lighthouse were all about the quality and performance metrics of Progressive Web Apps (PWAs). Now, the project has transformed itself into a sort of a guidebook that focuses on all of the web development. This means it provides you with features such as general best practices guidance, end-to-end help with app making, and performance and accessibility tips.

The Lighthouse motto is helping developers and other web users to do better on the internet. Thus, it equips you with all the tools that can help modernize your apps and optimize them. For instance, some web developers still use setInterval() instead of requestAnimationFrame() for JS-based animations. The newer API hasn’t been accepted by all, which is why those developers who don’t know about it will create less than well-functioning web apps.

Whether you are looking to improve scrolling performance – by using passive event listeners – or a way to modernize the CSS & JavaScript features, the Lighthouse has it all. The later version comes with many suggestions for new best practices. They can also help you improve performance by limiting how many render-blocking assets you use.

Google Lighthouse and how is it changing the way we development and design websites

Google’s Lighthouse makes audits faster and reduces variance

The Lighthouse 3.0 speeds up audits and reduces the variance between runs. It manages this via simulated throttling. Unlike the previous version of Lighthouse that audited a page only after throttling it, this one uses a new internal auditing engine. The engine known as Lantern will engage the normal CPU settings and network for the audit. Then it will estimate the page loading time for a website under mobile conditions.

Besides simulated throttling, the latest version has reduced the waiting period. It requires a CPU and a network with no activity to make that determination. Once it has both, it can tell you whether a page has finished loading or not.

Google’s Lighthouse gives usable results

With the results that Lighthouse produces, businesses can begin improving their websites immediately. For instance, when Walmart.com was audited by Lighthouse on May 7, 2018, some accessibility errors were uncovered. These included an iframe that didn’t have a title attribute. This made it difficult for shoppers who were using a screen reader to understand the page. When the Lighthouse point showed the iframe tag in question, Walmart developers added the title attribute. Immediately, the site’s accessibility improved!

Another example comes to us from Kohls.com. Its site went through an audit on May 7, 2018. According to Lighthouse, it had several unused CSS declarations at that time. By pointing out these specific style sheets, the tool could estimate the data bytes that Kohl’s could save.

Google’s Lighthouse integrates with other tools

Besides the features that we mentioned above, the Lighthouse has many other characteristics that make it an important recommendation to developers. This also includes its various and useful integrations. Some of them are:

  • Calibre enables you to run Lighthouse continuously. Alternatively, you can also use this web performance monitoring tool to run Lighthouse on-demand with an API. While you will have to buy it after 14 days, the trial version also allows you to test connection speeds and devices from different places. Actionable guidelines that come with Calibre make it easy to improve website performance.
  • Speedrank is another tool that you can use to monitor the performance of your website. It is a paid product that keeps functioning in the background. Speedrank will display Lighthouse reports and make recommendations that can improve your website performance.
  • An open source tool, the Web Page Test measures how well web pages perform on real devices. You can take advantage of its analysis and match it against a Lighthouse report for maximum improvement.

Google’s Lighthouse was built by experts

If you are getting a tool from Google, you can depend on the fact that the best of the best would have been involved in its creation. This is true for Lighthouse, as well. You have something in your hands that is the construction of engineers who deeply understand browsers because they have been building them. The performance tool is great at what it does because these experts know what matters when it comes to websites.

Besides being familiar with the inner workings of the browser, these professionals also know more about the search engine experience than most people do. Finally, they can accurately track and benchmark the tool’s construction because they have direct access to API creators.

It seems that this open source tool is a good thing to have in your toolbox. Would you agree?

ABOUT Alycia Gordan

Alycia Gordan is a freelance writer who loves to read and write articles on healthcare technology, fitness and lifestyle. She is a tech junkie and divides her time between travel and writing. You can find her on Twitter: @meetalycia

Google Lighthouse and how is it changing the way we development and design websites



Updated 07-Sep-2019
Alycia Gordan is a freelance writer who loves to read and write articles on healthcare technology, fitness, and lifestyle. She is a tech junkie and divides her time between travel and writing.

Leave Comment

Comments

Liked By