Lighthouse is an open-source, automated tool used to improve the quality of web pages. It runs against any web page, public, or requiring authentication and has audits for:
- Accessibility
- Best Practices
- Performance
- SEO
- Progressive Web Apps
Lighthouse can be run in Chrome DevTools, from the command line, or as a Node module. When giving Lighthouse a URL to audit, it runs a series of audits against the page and then generates a report on how well the page did. From there, the failing audits can be used as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.
Why Should You Care About Google Lighthouse?
The scoring system and suggestions of improvement that Google Lighthouse generates make the best “barometer” for Digital Marketing Concepts to:
- assess the quality of the audited pages (in case of an existing website, so we know what we’re dealing with)
- evaluate our work (after we’ve built/improved a website)
- identify existing issues and prepare our “To Do” lists to fix them
Performance
Lighthouse analyzes how quickly a website or app loads and how quickly users can access or view the content.
How to Get High Score:
- Avoid using too many external fonts
- Animation like slider can also slow down the site
- Do not use PNG format images
- Use compress images
- Use the fewest div elements as possible
Accessibility
Lighthouse’s accessibility audits to examine how well a website or app can be used by people with disabilities. Tests on important elements, like buttons or links determine whether they are sufficiently described or whether images have been assigned an alt-attribute so the visual content can also be described by screen readers for visually impaired users.
How to Get High Score:
- [accesskey] must be unique
- Page must contain a Heading, Skip Link, or Landmark Region
- [id] attributes on active, focusable elements must be unique ( Avoid duplicate IDs )
- Heading elements must be in a sequentially-descending order( h1, h2, h3, h4, h5, and h6 Order )
- [tabindex] value should be 0
- Do not let button be empty or don't have accessible name
- Page must have title element
- frame tag or iframe tag should have unique and descriptive title attributes
- An image should have [alt] Text
- Form elements should have associated labels
- object element should have [alt] text
Best Practices
Lighthouse checks highlight opportunities to improve the overall code health of your web app.
How to Get High Score:
General Best Practices
- Page must have !DOCTYPE html
- Image aspect ratio must be less than 5% from its natural ratio
Page Speed
- Use HTTP/2 for All Resources
- Do not use document.write() ( JavaScript )
- Does not use passive listeners to improve scrolling performance ( JavaScript Scrolling )
Page Security
- Use HTTP/2 for All Resources
- Add rel="noopener" or rel="noreferrer" to target="_blank" links(External Links)
- Do not use JavaScript libraries with known security vulnerabilities
Create a Good UX
- Do not request the geolocation permission on page load
- Do not request the notification permission on page load
- Allow users from pasting into password fields
Avoid Deprecated Technologies
- Do not use Application Cache
- Do not use deprecated APIs
Progressive Web Apps
Does the website register a service worker? Does it work offline with internet access? Does it return a 200 error? These audits were how Lighthouse began, but are now just one of the five audit categories and only of real importance to Progressive Web App providers.
SEO
Lighthouse runs various tests to establish how well a website or app can be crawled by search engines and displayed in the search results. Lighthouse tests that Google describes as “SEO” are extremely limited; anyone with a website or app that does not achieve a maximum score should make the required fixes. Once changes have been made, search engine optimization offers huge potential for additional improvements, which should certainly be explored.
How to Get High Score:
- Page must have a title tag element
- Page must have a meta description
- Do not use Descriptive Text for Links
- Page must have a valid hreflang
- Page must have a valid rel=canonical
- Check Meta for noindex
- Page HTTP Status Code should be 200s or 300s not 400s or 500s
- Make Sure robots.txt is Valid
- Do not use files with swf, flv, class, and xap file format. Don't use plugins to display your content.
Web Design Services in Fort Myers, FL
Digital Marketing Concepts of Fort Myers, FL designs beautiful websites that attract traffic and convert. We focus on design and UX in addition to website performance. Check out our portfolio. Call us at (239) 244-2009 or email us for a free consultation.