Lighthouse Combat Super detailed parsing optimized item by item

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money

Lighthouse Ultra-detailed combat analysis, including Performance, Accessibility, Best Practices, SEO, AND PWA

preface

Analyze the home page of your test environment with Lighthouse built into Google’s Traceless browser

The Performance (Performance)

The Metrics (indicators)

First Contentful Paint (FCP)

First content draw, marks the time when the first text or image was drawn. website

• Ensure Text Remains Visible during Webfont Load Is an important point to improve your score
• Avoid displaying invisible text: in@font-faceAdd to stylefont-display: swap, Swap tells the browser that text using this font should be displayed in the system font immediately. When the custom font is ready, the system font is replaced.
• Preloading web fonts: use<link rel="preload" as="font">Get font files ahead of time

Speed Index

Speed index, which measures the visual display speed of content during page loading. website

Improved speed index score:

• Minimize main thread work
• Reduce JavaScript execution time
• Ensure that the text remains visible during webFont loading

Largest Contentful Paint(LCP)

Max content draw, marks the rendering time for drawing the maximum text or image. website

Time to Interactive(TTI)

Interaction time, which is the time required for the page to fully interact. website

Total Blocking Time(TBT)

Total blocking time, total time between FCP and TTI, expressed in milliseconds when the task length exceeds 50ms. website

Cumulative Layout Shift(CLS)

Cumulative layout offset. website

Opportunities (opportunity)

The following suggestions can help load pages faster, but they don’t directly affect performance scores

Enable text compression

Details on the official website

Text-based resources should use compression (gzip, Deflate, or Brotli) to minimize the total number of bytes on the network (FCP, LCP). That is, there is potential compression space, which can be configured with Gzip compression

Reduce unused JavaScript

Details on the official website

Reduce unused JavaScript and delay loading scripts until needed to reduce the number of bytes consumed by network activity (LCP). That is to delete useless JS, the main method is reasonable code segmentation and on-demand introduction

Eliminate render-blocking resources

Details on the official website

Lists all urls (FCP, LCP) that prevent the page from being drawn for the first time.

The goal is to reduce the impact of these rendering blocking urls by inlining critical resources, deferring non-critical resources, and removing any unused content. That is, load resources reasonably and control the loading sequence

• How to identify critical resources: Using Chrome DevToolsCoverageTAB to identify non-critical CSS and JS. This TAB analyzes how much code was used and how much code was loaded when the page was loaded or run, green (critical), red (non-critical)
• How to eliminate rendering blocking scripts: Fair useasync 或 deferAttribute tags
• How to eliminate blocking rendering stylesheets: availablepreloadLink asynchronous loading for the rest of the style, you can viewDelay non-critical CSS

Use HTTP/2

HTTP/2 offers a number of advantages over HTTP/1.1, including binary headers and multiplexing. That is, HTTP/1.1 is currently used, and HTTP/2 is recommended. This requires server side change and is currently not supported.

Diagnostics (diagnosis)

Avoid chaining critical requests

Details on the official website

Avoid link critical requests, the larger the chain length, the more downloads, and the greater the impact on page loading performance. The key request chain below shows you which resources are loaded with high priority. Consider reducing the length of the chain, reducing the download size of resources, or delaying the download of unnecessary resources to improve page loading.

Keep request counts low and transfer sizes small

Details on the official website

Keep the number of requests low and the transfer size small

Largest Contentful Paint element

Details on the official website

The largest content Paint element.

It can be optimized according to the diagram: mainly for personnel management

Avoid large layout shifts

Avoid large layout changes.

The home page has several modules are through the interface to obtain the data, the interface is not synchronous, so the skeleton screen form, asynchronous rendering. These modules are made up ofSkeleton screenSo there are big layout changes that affect performance.

Avoid long main-thread tasks

Details on the official website

Avoid long main thread tasks. Because of complex work that takes more than 50 milliseconds, there are long tasks that consume a lot of CPU. Long tasks keep the main thread busy, delaying user interaction. Chrome DevTools can now visualize long tasks, making it easier to see which tasks to optimize

• Manually find “long yellow block” scripts over 50 milliseconds in Chrome DevTools
• DevTools visualizes Long Tasks. If tasks (shown in gray) are long tasks, they carry red flags

Main.js and 5.js need to be optimized

Avoid non-composited animations

Avoid non-synthetic animations. Details on the official website

Look at the picture analysis: mainly skeleton screen code. The home page has several modules are through the interface to obtain the data, the interface is not synchronous, so the skeleton screen form, asynchronous rendering

Passed audits

• Propersize images: Properly sized images to avoid byte waste and slow page load times
• Defer offscreen images: Lazy loading of off-screen images
• Minify CSS: Shrink CSS files to reduce network load
• Minify JavaScript: Shrink JS files, reduce payload size and script parsing time
• Reduce unused CSS: Deletes the UNUSED CSS
• Works Efficiently encode images and optimize them
• Serve images in next-gen formats: Images are available in the next generation formats
• Enable text compression: enables text compression
• Preconnect to Required origins: Preconnect to the required source
• Initial Server response time was short: The Initial server response time was short
• Avoid multiple page redirects
• Preload key requests: Preloads key requests
• Use video formats for animated content: Replace animated GIFs with video
• Remove duplicate modules in JavaScript bundles: Removes duplicate modules in JavaScript bundles
• Avoid serving Legacy JavaScript to modern Browsers
• Preload Largest Contentful Paint Image: Preload the Largest content to draw
• Avoids Enormous Network payloads to avoid huge network loads
• Uses efficient cache policy on static assets: Uses an efficient cache policy for static assets
• Avoids an excessive DOM size: Avoid DOM elements that are too large
• User Timing marks and Measures: User Timing marks and measures
• JavaScript execution time: JavaScript execution time
• Minimizes main-thread work: Minimizes the main thread work
• All text remains visible during webFONT loads: All text remains visible during webFONT loads
• Minimize third-party usage: Minimize third-party use
• Lazy load third-party resources with facades: Lazy load of third-party resources
• Using passive listeners to improve scrolling performance
• Avoids document.write() : Avoid using document.write()
• Image elements have explicit width and height: Image elements should have explicit width and height

Accessibility

Accessibility. The content of a site is available and its functions can be manipulated by anyone

• Perceivable: Can the user perceive the content? Just because you can perceive content through one sense, such as vision, does not mean that all users can.
• Actionable: Can users use UI components and navigate through content? For example, content that requires a hover interaction cannot be manipulated by a user who cannot use a mouse or touch screen.
• Comprehensible: Does the user understand the content? Does the user understand the interface, and is it consistent enough to avoid confusion?
• Robust: Can the content be used by multiple User agents (browsers)? Can it work with assistive technology?

ARIA

Enhance the user experience of assistive technologies, such as screen readers.

[aria-] Attributes do not match their roles([aria-] attributes do not match their roles

Contrast

Improve internal readability

Background and foreground colors do not have a sufficient contrast ratio. Foreground and foreground colors do not have sufficient contrast ratio

Names and labels

Improve control semantics in applications to enhance the user experience of assistive technologies, such as screen readers

• Image elements do not have [Alt] attributes
  • Solution:Need to add alternative text to the image, addaltProperty, used as a placeholder, this is easy to change
• Links do not have a discernible name
  • Links get their accessible names primarily from their text content,It can be used if the content is not representativearia-labeldefine

Best practices

• [user-scalable=”no”] is used in the element or the [maximum-scale] attribute is less than 5: ([user-scalable=”no”] (disable browser scaling on web pages) for elements or [maximum-scale] attributes less than 5)
  • Analysis: Both configurations are problematic for low-vision users who rely on browser zooming to view web content
  • Solution: But in practice,Page styles are messy when zoomed, and generally cannot be zoomed.

Additional items to manually check

• The page has a logical TAB order
  • Test: You can TAB through the page and focus elements in DOM order
  • Fixed:The tabIndex property is controllable
• Interactive Controls are Keyboard Focusable
  • Test: Browse with Tab, then use Tab (or SHIFT + Tab) to move back and forth between controls and manipulate their values with the arrow keys ENTER and SPACE
  • Fixed: TabIndex to improve focus of controls You may also need to add appropriate ARIA roles to custom control elements
• Interactive elements indicate their purpose and state
  • Test: TAB test, :focus sets the style of the focus indicator
• The user’s focus is directed to new content added to The page
• User focus is not accidentally trapped in a region
  • Test: Use the keyboard to navigate between all page elements. Used for TAB “Forward” SHIFT + TAB navigation and “Backward” navigation.
  • Fix: provide a keyboard accessible method toEscape the modal.Create accessible Modal.Modal and keyboard traps
• Custom Controls have Associated Labels
• Custom Controls have ARIA roles (Check that all Custom controls have the appropriate and any required ARIA properties that role assigns to their properties and states)
• Visual Order on the Page follows DOM Order
• Offscreen content is hidden from assistive Technology
• HTML5 landmark elements are used to improve navigation (e.g. main, nav, aside, etc.)

Passed audits

• [aria-hidden=”true”] is not present on the document (body cannot write aria-hidden attribute)
• Elements do not contain focusable descendents ([Aria-hidden =”true”])
• [aria-] attributes have valid values ([aria-] property has no valid value.
• [aria-] attributes are valid and not misspelled ([aria-] property invalid or misspelled)
• Buttons have an accessible name (the Buttons do not have an accessible name, identified by the aria-label attribute)
• Contains a heading, skip link, or landmark region The page contains a heading, skip link, or landmark region
• Document has an element
• Heading elements appear in a sequentially-descending order
• Element has a [lang] attribute
• Element has a valid value for its [lang] attribute
• Form elements have associated labels Form elements have associated labels
• No element has a [tabIndex] value greater than 0 (Some elements with [tabIndex] value greater than 0 are considered anti-pattern)

Best Practices

Trust and Safety

• There were 14 unsafe requests that did not use HTTPS
  • Solution: Because the test is in the test environment, HTTPS is not used,The formal environment is HTTPS
• Ensure that CSPS are effective against XSS attacks

General (gm)

• Missing Source maps for large first-party JavaScript: Missing source maps for JavaScript
  • Solution:Development environments do exist, but production environments are generally not configured to reduce package sizes

Passed audits

• Links to cross-origin destinations are Safe
  • Problem: Usetarget="_blank"Properties that link to pages on another site may face performance and security issues
  • Solution: Addrel="noopener"orrel="noreferrer"
• Avoids requesting the geolocation permission on page load (requesting geolocation permission while the page loads)
  • Problem: code callsgeolocation.getCurrentPosition()orgeolocation.watchPosition()And the geolocation permission has not been granted, the audit fails
• Avoids requesting the notification permission on page load
  • Problem: code callsnotification.requestPermission()And the notification permission has not been granted, the audit fails
• Avoids front-end JavaScript libraries with known security vulnerabilities vulnerabilities back then Avoids front-end JavaScript libraries with known security vulnerabilities back then
  • Problem: Intruders can get throughAutomatic web crawlerScan the site for known security holes
• Allows users to paste into password fields
• Displays images with correct aspect ratio
• Serves Images with Appropriate Resolution (Provides responsive images)
• Page has the HTML docType (the Page lacks an HTML document type, triggering weird mode)
• Properly defines charset (missing character set declaration or appearing too late in HTML)
• Avoids Unload Event Listeners to avoid legacy lifecycle apis, events or listeners to unlog
• Avoids Application Cache (using Application Cache)
  • Use the caching API instead of application caching, and use the caching API through the Service Worker
• Detected JavaScript Libraries (lists all JavaScript libraries used by the front end)
• Avoids Deprecated APIs (using deprecated APIs)
• No browser errors logged to the console
• No Issues in the Issues Panel in Chrome Devtools No issues in the Issues panel in Chrome Devtools

SEO(Search Engine Optimization)

• Crawling and Indexing
  • Links are not crawlable: Links cannot be crawlable
    • Specific analysis:The a tag does not define the href attribute, but writes the jump event in click
• Content Best Practices
  • Image elements do not have [alt] attributes
    • Specific analysis:There's no Alt in the image, but that's easy to change, it's just a lot of images
• Additional items to manually check
  • Structured data is valid: Structured data is valid
• Passed audits
  • Has a tag with width or initial-scale: window width and zoom ratio
  • Document has an element: title
  • Document has a meta description: meta description
  • Page has successful HTTP status code
  • Links have Descriptive text: Descriptive link text
  • Page isn’t blocked from indexing: The Page does not prevent search engine crawlers from indexing
  • Document has a valid hreflang: indicates the valid language code
  • Document avoids plugins: Avoid plugins, such as Embed, Object, and applet
• Not applicable

PWA(Progressive Web Application)

Web. Dev /pwa-checkli…

• Installable (installed)
  • Web app manifest or service worker do not meet the installability requirements: The Web app manifest or service worker does not meet the installability requirements
• PWA Optimized
  • Does not register a service worker that controls page and start_URL: The service worker is not registered
  • Does not redirect HTTP traffic to HTTPS: HTTPS is used for protection
  • Is not configured for a custom splash screen, Failures: No manifest was touchable.
  • Does not set a theme color for the address bar: Sets the theme color for the address bar<meta name="theme-color" content="#317EFB"/>
  • Does not provide a valid apple-touch-icon: Adds an Apple touch icon<link rel="apple-touch-icon" href="/example.png">
  • Manifest doesn’t have a maskable icon: No Manifest was touchable

Because I did not configure PWA before, easyWebPack has the default configuration, but it is not enabled by default, you can open it

Summary of optimization points

Summary of optimization points for home page analysis:

• Font style control: in@font-faceAdd to stylefont-display: swap
• Gzip compression
• reasonableThe code segmentandAccording to the need to introduce
• CSS (preload), JS (async 或 defer) load sequence control
• Replace the HTTP / 1.1 HTTP / 2
• Reduce the length of the request chain, reduce the download size of resources, and delay the download of unnecessary resources
• Reduce the number of requests and transfer size
• Reduce rearrangement and redrawing to avoid large layout changes
• Avoid long main thread tasks
• Avoid non-synthetic animations and change the skeleton screen
• Accessibility should be strengthened
• Img image add Alt attribute
• PWA configuration is enabled

Reference documentation

• Google’s web dev /

Feel free to discuss in the comments section, nuggets officials will be onProject DiggAfter the event, 100 nuggets will be selected in the comments section. See the event article for details