Overview of Google Lighthouse

1
(No Transcript)
2

• Getting the most conversions or selling the most
  products isnt the primary goal of the most
  successful websites. The quality of those
  features is certainly important, but user
  experience comes first.
• The performance of your website can be used to
  gauge the user experience (UX). When your website
  is slow, the user experience suffers. Users wont
  even notice if your website loads it is
  generally accepted that a site loses visitors
  after a couple of seconds.
• To evaluate your sites UX, an outside consultant
  isnt necessary or even necessary to redesign it.
  With Google Lighthouse, your website is audited
  by Google to see how it compares to others.
  Because its Google, it makes sense to pay
  attention.

3
What is Google Lighthouse?

• Google Lighthouse

• The Lighthouse tool, whether called Lighthouse or
  simply Lighthouse, is a free tool used to assess
  web page quality.
• Lighthouse measures the quality of any public
  page anywhere on the web, evaluating them
  according to five criteria speed, usability,
  SEO, and certification with PWA.
• Site owners can use these categories to measure
  usability on web pages as part of core web vitals
  tracked by Google. Lighthouse provides
  suggestions for improving the overall user
  experience in each of these categories

4

• Lighthouse is easy to use and provides valuable
  insights for both new and experienced webmasters
  alike. While website optimization can be a dense
  topic for new webmasters, Lighthouse isnt.
• All you have to do is enter the URL, and
  Lighthouse will do the rest, including
  recommendations for further reading about each
  issue.
• By providing a more realistic and comprehensive
  assessment of a pages overall quality, Google
  Lighthouse distinguishes itself from other
  popular website assessments.
• The page speed is not the only factor taken into
  account accessibility, indexability, and
  well-business are also important. Furthermore, it
  is open-source, which means it can be integrated
  into other web-based tools.

• Google Lighthouse

5
Google Lighthouse Metrics

• Performance
• Accessibility
• Best Practices

• SEO
• Progressive Web Application (PWA)

• The Lighthouse system grades the first four
  categories from zero to one hundred based on
  their overall quality. Scores from 0 to 49
  (triangle) indicate poor performance, 50 to 89
  (square) is a fair performance, and 90 to 100
  (circle) indicates excellent performance.
• It is very difficult to achieve a 100/100 grade
  for Lighthouse and Page Speed Insights.
  Therefore, dont strive to get perfect scores
  youll be fine as long as you get green.
• Lighthouse reports provide insight and
  suggestions for improving your pages based on
  each score. Without a Lighthouse report, these
  scores wouldnt be useful to us. Lets take a
  closer look at each one.

6
Performance

• With Lighthouses performance assessment, you are
  able to perform an enhanced speed test for your
  website.
• When evaluating website performance, there are
  two important considerations many dont give much
  thought to.
• A visitors internet connection or the device
  theyre using might be different from your own.
  Mobile devices make up nearly half of all
  internet traffic worldwide, and they connect over
  relatively slow connections, which affects
  loading time greatly.
• Additionally, you cant just sum up the time it
  takes for a page to load in one number. The speed
  at which a website appears to a viewer is
  affected by several factors, from how long it
  takes to load any content to how quickly it
  allows users to interact with it.

7

• As a result of these improvements to Google
  Lighthouse, the latest version (1) simulates the
  load time of pages on mobile devices, and (2)
  calculates your Performance score based on 6
  metrics
• An image of a piece of text that first appears
  on-screen fully rendered is known as the First
  Contentful Paint.
• A page is fully interactive after a certain
  amount of time has passed. Thus, the majority of
  user actions and inputs are processed within 50
  milliseconds.
• During the Total Blocking Time, users can view
  content but not interact with it. It occurs
  between the First Contentful Paint and the Time
  to Interactive.
• Your sites speed index determines how fast the
  visual elements of your site load completely.

8

• It is the duration it takes to fully render the
  element with the largest amount of text or image.
• Layout shifts are counted cumulatively as the
  total number of unexpected changes on a page. It
  can cause interaction issues for the user if they
  click in the wrong place at the wrong time if an
  element unexpectedly shifts from one location on
  the page to another
• Below Metrics, Lighthouse provides Diagnostics
  and Opportunities, which suggest ways to improve
  performance for each page. There are several
  things you can do to make your content load
  faster, such as removing rendering-blocking or
  unused code, making your code more efficient, and
  optimizing your images.

9
Accessibility

• Your page is then graded by Lighthouse based on
  accessibility for people with mental and physical
  disabilities.
• Access to public information on your website
  should be accessible to all visitors.
• In addition to accessibility audits, Lighthouse
  performs several other checks, such as evaluating
  the code structure and semantics of HTML tags,
  utilizing alternative text and applying ARIA
  landmarks, and testing the language of the pages.
• In case your accessibility score is less than
  ideal, usability for everyone can be improved
  using our web accessibility checklist and our
  guide to accessibility on the web.

10
Best Practices
SEO

• In addition, Lighthouse audits widely accepted
  web development best practices. This includes
  ensuring that HTTPS is used, safe links are used,
  and that JavaScript libraries and APIs are
  current but it can also try to ensure that your
  images are displayed in an appropriate resolution
  and that the HTML doctype is specified.

• A pages SEO score reflects the degree to which
  it adheres to SEO best practices as the last
  graded category. A good use of the HTML tags and
  attributes ensures that these tests check whether
  your page is crawlable.
• If any tests fail, see our Ultimate Guide to
  On-Page SEO for addressing issues associated with
  this category. Lighthouses SEO report is pretty
  basic, but it can help you boost your rankings
  almost immediately.

11
Progressive Web App

• We check your sites final performance to be sure
  it meets Googles standards for a Progressive Web
  Application, one that can be accessed via any
  device and from any location. The Lighthouse
  software was originally designed for this
  assessment, and it remains a valuable feature.
• There is no score assigned when you take the
  Progressive Web App test, but it indicates if you
  pass or fail. Performance, responsiveness, and
  other factors are assessed to make sure your web
  application meets the standards of your target
  audience.

12
(No Transcript)