Frontier Software

Lighthouse

Mobile First

Google’s mobile-friendly page now redirects to a page for its lighthouse testing tool.

This is the output I got as it built its report:

  LH:status Auditing: Uses HTTPS +6ms
  LH:status Auditing: Has a `<meta name="viewport">` tag with `width` or `initial-scale` +34ms
  LH:status Auditing: First Contentful Paint +21ms
  LH:status Auditing: Largest Contentful Paint +194ms
  LH:status Auditing: First Meaningful Paint +36ms
  LH:status Auditing: Speed Index +31ms
  LH:status Auditing: Screenshot Thumbnails +918ms
  LH:status Auditing: Final Screenshot +2ms
  LH:status Auditing: Total Blocking Time +5ms
  LH:status Auditing: Max Potential First Input Delay +41ms
  LH:status Auditing: Cumulative Layout Shift +23ms
  LH:status Auditing: No browser errors logged to the console +6ms
  LH:status Auditing: Initial server response time was short +9ms
  LH:status Auditing: Time to Interactive +9ms
  LH:status Auditing: User Timing marks and measures +7ms
  LH:status Auditing: Avoid chaining critical requests +13ms
  LH:status Auditing: Avoid multiple page redirects +9ms
  LH:status Auditing: Web app manifest and service worker meet the installability requirements +13ms
  LH:status Auditing: Configured for a custom splash screen +24ms
  LH:status Auditing: Sets a theme color for the address bar. +11ms
  LH:status Auditing: Manifest has a maskable icon +13ms
  LH:status Auditing: Content is sized correctly for the viewport +20ms
  LH:status Auditing: Displays images with correct aspect ratio +8ms
  LH:status Auditing: Serves images with appropriate resolution +13ms
  LH:status Auditing: Fonts with `font-display: optional` are preloaded +11ms
  LH:status Auditing: Avoids deprecated APIs +7ms
  LH:status Auditing: Avoids third-party cookies +8ms
  LH:status Auditing: Minimizes main-thread work +20ms
  LH:status Auditing: JavaScript execution time +31ms
  LH:status Auditing: Preload key requests +17ms
  LH:status Auditing: Preconnect to required origins +8ms
  LH:status Auditing: All text remains visible during webfont loads +21ms
  LH:status Auditing: Diagnostics +8ms
  LH:status Auditing: Network Requests +2ms
  LH:status Auditing: Network Round Trip Times +11ms
  LH:status Auditing: Server Backend Latencies +6ms
  LH:status Auditing: Tasks +5ms
  LH:status Auditing: Metrics +2ms
  LH:status Auditing: Performance budget +13ms
  LH:status Auditing: Timing budget +6ms
  LH:status Auditing: Resources Summary +4ms
  LH:status Auditing: Minimize third-party usage +23ms
  LH:status Auditing: Lazy load third-party resources with facades +9ms
  LH:status Auditing: Largest Contentful Paint element +8ms
  LH:status Auditing: Largest Contentful Paint image was not lazily loaded +9ms
  LH:status Auditing: Avoid large layout shifts +6ms
  LH:status Auditing: Avoid large layout shifts +5ms
  LH:status Auditing: Avoid long main-thread tasks +6ms
  LH:status Auditing: Avoids `unload` event listeners +17ms
  LH:status Auditing: Avoid non-composited animations +6ms
  LH:status Auditing: Image elements have explicit `width` and `height` +6ms
  LH:status Auditing: Page has valid source maps +7ms
  LH:status Auditing: Preload Largest Contentful Paint image +8ms
  LH:status Auditing: Ensure CSP is effective against XSS attacks +5ms
  LH:status Auditing: Script Treemap Data +5ms
  LH:status Auditing: Site works cross-browser +10ms
  LH:status Auditing: Page transitions don't feel like they block on the network +25ms
  LH:status Auditing: Each page has a URL +5ms
  LH:status Auditing: `[accesskey]` values are unique +6ms
  LH:status Auditing: `[aria-*]` attributes match their roles +8ms
  LH:status Auditing: Values assigned to `role=""` are valid ARIA roles. +7ms
  LH:status Auditing: `button`, `link`, and `menuitem` elements have accessible names +10ms
  LH:status Auditing: Elements with `role="dialog"` or `role="alertdialog"` have accessible names. +9ms
  LH:status Auditing: `[aria-hidden="true"]` is not present on the document `<body>` +8ms
  LH:status Auditing: `[aria-hidden="true"]` elements do not contain focusable descendents +31ms
  LH:status Auditing: ARIA input fields have accessible names +12ms
  LH:status Auditing: ARIA `meter` elements have accessible names +30ms
  LH:status Auditing: ARIA `progressbar` elements have accessible names +11ms
  LH:status Auditing: `[role]`s have all required `[aria-*]` attributes +13ms
  LH:status Auditing: Elements with an ARIA `[role]` that require children to contain a specific `[role]` have all required children. +10ms
  LH:status Auditing: `[role]`s are contained by their required parent element +10ms
  LH:status Auditing: `[role]` values are valid +11ms
  LH:status Auditing: Elements with the `role=text` attribute do not have focusable descendents. +10ms
  LH:status Auditing: ARIA toggle fields have accessible names +35ms
  LH:status Auditing: ARIA `tooltip` elements have accessible names +12ms
  LH:status Auditing: ARIA `treeitem` elements have accessible names +16ms
  LH:status Auditing: `[aria-*]` attributes have valid values +14ms
  LH:status Auditing: `[aria-*]` attributes are valid and not misspelled +14ms
  LH:status Auditing: Buttons have an accessible name +13ms
  LH:status Auditing: The page contains a heading, skip link, or landmark region +33ms
  LH:status Auditing: Background and foreground colors have a sufficient contrast ratio +49ms
  LH:status Auditing: `<dl>`'s contain only properly-ordered `<dt>` and `<dd>` groups, `<script>`, `<template>` or `<div>` elements. +25ms
  LH:status Auditing: Definition list items are wrapped in `<dl>` elements +15ms
  LH:status Auditing: Document has a `<title>` element +33ms
  LH:status Auditing: `[id]` attributes on active, focusable elements are unique +24ms
  LH:status Auditing: ARIA IDs are unique +16ms
  LH:status Auditing: All heading elements contain content. +15ms
  LH:status Auditing: No form fields have multiple labels +41ms
  LH:status Auditing: `<frame>` or `<iframe>` elements have a title +14ms
  LH:status Auditing: Heading elements appear in a sequentially-descending order +15ms
  LH:status Auditing: `<html>` element has a `[lang]` attribute +22ms
  LH:status Auditing: `<html>` element has a valid value for its `[lang]` attribute +42ms
  LH:status Auditing: `<html>` element has an `[xml:lang]` attribute with the same base language as the `[lang]` attribute. +24ms
  LH:status Auditing: Identical links have the same purpose. +15ms
  LH:status Auditing: Image elements have `[alt]` attributes +46ms
  LH:status Auditing: Image elements do not have `[alt]` attributes that are redundant text. +15ms
  LH:status Auditing: Input buttons have discernible text. +16ms
  LH:status Auditing: `<input type="image">` elements have `[alt]` text +16ms
  LH:status Auditing: Elements with visible text labels have matching accessible names. +15ms
  LH:status Auditing: Form elements have associated labels +36ms
  LH:status Auditing: Document has a main landmark. +16ms
  LH:status Auditing: Links have a discernible name +22ms
  LH:status Auditing: Links are distinguishable without relying on color. +42ms
  LH:status Auditing: Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`). +30ms
  LH:status Auditing: List items (`<li>`) are contained within `<ul>`, `<ol>` or `<menu>` parent elements +29ms
  LH:status Auditing: The document does not use `<meta http-equiv="refresh">` +26ms
  LH:status Auditing: `[user-scalable="no"]` is not used in the `<meta name="viewport">` element and the `[maximum-scale]` attribute is not less than 5. +77ms
  LH:status Auditing: `<object>` elements have alternate text +45ms
  LH:status Auditing: Select elements have associated label elements. +35ms
  LH:status Auditing: Skip links are focusable. +94ms
  LH:status Auditing: No element has a `[tabindex]` value greater than 0 +21ms
  LH:status Auditing: Tables have different content in the summary attribute and `<caption>`. +24ms
  LH:status Auditing: Tables use `<caption>` instead of cells with the `[colspan]` attribute to indicate a caption. +21ms
  LH:status Auditing: Touch targets have sufficient size and spacing. +21ms
  LH:status Auditing: `<td>` elements in a large `<table>` have one or more table headers. +24ms
  LH:status Auditing: Cells in a `<table>` element that use the `[headers]` attribute refer to table cells within the same table. +37ms
  LH:status Auditing: `<th>` elements and elements with `[role="columnheader"/"rowheader"]` have data cells they describe. +21ms
  LH:status Auditing: `[lang]` attributes have a valid value +43ms
  LH:status Auditing: `<video>` elements contain a `<track>` element with `[kind="captions"]` +21ms
  LH:status Auditing: Custom controls have associated labels +20ms
  LH:status Auditing: Custom controls have ARIA roles +0ms
  LH:status Auditing: User focus is not accidentally trapped in a region +0ms
  LH:status Auditing: Interactive controls are keyboard focusable +1ms
  LH:status Auditing: Interactive elements indicate their purpose and state +0ms
  LH:status Auditing: The page has a logical tab order +0ms
  LH:status Auditing: The user's focus is directed to new content added to the page +0ms
  LH:status Auditing: Offscreen content is hidden from assistive technology +0ms
  LH:status Auditing: HTML5 landmark elements are used to improve navigation +1ms
  LH:status Auditing: Visual order on the page follows DOM order +0ms
  LH:status Auditing: Uses efficient cache policy on static assets +1ms
  LH:status Auditing: Avoids enormous network payloads +10ms
  LH:status Auditing: Defer offscreen images +8ms
  LH:status Auditing: Eliminate render-blocking resources +44ms
  LH:status Auditing: Minify CSS +8ms
  LH:status Auditing: Minify JavaScript +21ms
  LH:status Auditing: Reduce unused CSS +44ms
  LH:status Auditing: Reduce unused JavaScript +21ms
  LH:status Auditing: Serve images in next-gen formats +23ms
  LH:status Auditing: Efficiently encode images +42ms
  LH:status Auditing: Enable text compression +20ms
  LH:status Auditing: Properly size images +22ms
  LH:status Auditing: Use video formats for animated content +22ms
  LH:status Auditing: Remove duplicate modules in JavaScript bundles +20ms
  LH:status Auditing: Avoid serving legacy JavaScript to modern browsers +21ms
  LH:status Auditing: Page has the HTML doctype +40ms
  LH:status Auditing: Properly defines charset +19ms
  LH:status Auditing: Avoids an excessive DOM size +6ms
  LH:status Auditing: Avoids requesting the geolocation permission on page load +11ms
  LH:status Auditing: No issues in the `Issues` panel in Chrome Devtools +7ms
  LH:status Auditing: Avoids `document.write()` +6ms
  LH:status Auditing: Detected JavaScript libraries +6ms
  LH:status Auditing: Avoids requesting the notification permission on page load +6ms
  LH:status Auditing: Allows users to paste into input fields +6ms
  LH:status Auditing: Use HTTP/2 +5ms
  LH:status Auditing: Uses passive listeners to improve scrolling performance +23ms
  LH:status Auditing: Document has a meta description +6ms
  LH:status Auditing: Page has successful HTTP status code +7ms
  LH:status Auditing: Document uses legible font sizes +6ms
  LH:status Auditing: Links have descriptive text +8ms
  LH:status Auditing: Links are crawlable +53ms
  LH:status Auditing: Page isn’t blocked from indexing +21ms
  LH:status Auditing: robots.txt is valid +8ms
  LH:status Auditing: Tap targets are sized appropriately +7ms
  LH:status Auditing: Document has a valid `hreflang` +14ms
  LH:status Auditing: Document avoids plugins +6ms
  LH:status Auditing: Document has a valid `rel=canonical` +6ms
  LH:status Auditing: Structured data is valid +7ms
  LH:status Auditing: Page didn't prevent back/forward cache restoration +3ms

Audits

Lighthouse splits its audits into 5 parts:

  1. Performance
    1. Serve static assets with an efficient cache policy
  2. Accessibility
    1. HTML5 landmark elements
    2. frame or iframe elements do not have a title
    3. Heading elements appear in a sequentially-descending order
    4. Links are distinguishable without relying on color
    5. Lists contain only li elements
    6. Visual order on the page follows DOM order
  3. Best Practices
    1. Browser errors were logged to the console
    2. Uses third-party cookies
  4. SEO
    1. Document doesn’t use legible font sizes
    2. Tap targets are not sized appropriately
  5. Progressive Web App Deprecated

Embed Guide

How to Add YouTube Videos Without Cookies

Simply change youtube.com to youtube-nocookie.com in source URLs.

3 Core We Vitals

1. Largest Contentful Paint (LCP)

2. Interaction to Next Paint (INP)

3. Cumulative Layout Shift (CLS)

The most common causes of a poor CLS are the following:

  1. Images without dimensions.
  2. Ads, embeds, and iframes without dimensions.
  3. Dynamically injected content such as ads, embeds, and iframes without dimensions.
  4. Web fonts.

Minimize layout shift

We recommend tackling this issue by specifying the size of your ad slot via min-height and min-width CSS properties:

<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

Optimize Cumulative Layout Shift