Πώς να δοκιμάσετε τον ιστότοπό σας με το Google Lighthouse;

Ένα νέο εργαλείο της Google είναι να δοκιμάσει και να σας προτείνει να βελτιώσετε την απόδοση, το SEO, την ασφάλεια, τις βέλτιστες πρακτικές και την προσβασιμότητα.

Η Google κυκλοφόρησε πρόσφατα Φάροςένα εργαλείο ανοιχτού κώδικα για τον έλεγχο του ιστότοπού σας χειροκίνητα και αυτόματα.

Ποιες μετρήσεις ελέγχονται από το Google Lighthouse;

Υπάρχουν περισσότερες από 75 μετρήσεις που δοκιμάζει και σας δίνει τη συνολική βαθμολογία. Μπορεί να σας ενδιαφέρουν μερικά από τα παρακάτω δημοφιλή ως κάτοχος ιστότοπου, αναλυτής SEO και webmaster.

• Απόδοση – χρόνος διαδραστικής λειτουργίας, καθυστέρηση, δείκτης ταχύτητας, βελτιστοποίηση πόρων, TTFB, παράδοση στοιχείων, χρόνος εκτέλεσης σεναρίων, μέγεθος DOM κ.λπ.
• SEO – Φιλικό προς κινητά, meta, crawling, canonical, structure, κ.λπ.
• Βέλτιστες πρακτικές – Βελτιστοποίηση εικόνας, βιβλιοθήκες JS, καταγραφή σφαλμάτων προγράμματος περιήγησης, προσβάσιμες μέσω HTTPS, γνωστά τρωτά σημεία JS κ.λπ.
• Προσβασιμότητα – Στοιχεία σελίδας, γλώσσα, χαρακτηριστικά ARIA κ.λπ.
• PWA (Progressive Web Application) – ανακατεύθυνση HTTP σε HTTPS, κωδικός απόκρισης εντάξει, γρήγορη φόρτωση σε 3G, οθόνη εκκίνησης, θύρα προβολής κ.λπ.

Είναι ένα φανταστικό εργαλείο και μπορείτε να το χρησιμοποιήσετε με πολλούς τρόπους.

Αυτό είναι σωστό – τόσοι πολλοί τρόποι. Εάν είστε προγραμματιστής, μπορείτε να χρησιμοποιήσετε το Node.js για να εκτελέσετε μια δοκιμή μέσω προγραμματισμού. Υπάρχουν ήδη μερικά εργαλεία στην αγορά που υποστηρίζονται από το Lighthouse που προσφέρουν συνεχή παρακολούθηση της απόδοσης του ιστότοπου.

Ας μάθουμε πώς εκτελείτε τη δοκιμή φάρου στον ιστότοπό σας.

Ξεκινήστε από το πιο εύκολο.

Μέτρηση μέσω web.dev

Η Google κυκλοφόρησε το web.dev πριν από λίγους μήνες και κέρδισε μεγάλη δημοτικότητα. Η διαδικτυακή δοκιμή είναι εύκολη.

Παω σε Μετρήσει σελίδα και εισαγάγετε τη διεύθυνση URL για την εκτέλεση του ελέγχου. Θα χρειαστούν μερικά δευτερόλεπτα και θα πρέπει να δείτε τη λεπτομερή αναφορά με τη συνολική βαθμολογία.

Τα αποτελέσματα δείχνουν επίσης τη δοκιμή μετρήσεων επιτυχίας για τους επιτυχείς ελέγχους και η εργασία σε αυτούς χρειάζεται προσοχή.

Μην ξοδεύετε πολύ χρόνο για να λάβετε 100. Ακόμη και οι ιστότοποι της Google δεν βαθμολογούν αυτό.

Εξετάστε τα ως κατευθυντήριες γραμμές και προσπαθήστε να βελτιώσετε όσο περισσότερο μπορείτε.

Σημείωση: το web.dev μιμείται μια δοκιμή χρησιμοποιώντας φορητή συσκευή και ενώ γράφω, δεν βλέπω επιλογή δοκιμής με χρήση Επιτραπέζιου υπολογιστή.

Χρώμιο

Γνωρίζετε ότι το Lighthouse είναι διαθέσιμο στο πρόγραμμα περιήγησης Chrome; Και, τα καλά νέα είναι ότι μπορείτε να επιλέξετε να κάνετε δοκιμή χρησιμοποιώντας Κινητό ή Επιτραπέζιο υπολογιστή και είναι διαθέσιμο στα Εργαλεία προγραμματιστών.

• Ανοίξτε το πρόγραμμα περιήγησης Chrome
• Αποκτήστε πρόσβαση στον ιστότοπό σας για δοκιμή
• Ανοίξτε τα Εργαλεία προγραμματιστή (Πατήστε F12 εάν χρησιμοποιείτε Windows) ή κάντε δεξί κλικ στη σελίδα και κάντε κλικ στην Επιθεώρηση.
• Μεταβείτε στην καρτέλα ελέγχους.

Όπως μπορείτε να δείτε παραπάνω, έχετε την επιλογή να επιλέξετε αυτό που θέλετε να δοκιμάσετε. Αυτό είναι υπέροχο για να εστιάσετε στον στόχο σας και να λάβετε τα αποτελέσματα του ελέγχου πιο γρήγορα.

Η εμφάνιση και η αίσθηση των αποτελεσμάτων από το Chome και το web.dev είναι σχεδόν παρόμοια.

Αλλά αν το κοιτάξετε προσεκτικά, υπάρχει μια επιπλέον ομάδα μετρήσεων εδώ – η Προοδευτική εφαρμογή Ιστού. Ένας άλλος λόγος λοιπόν για έλεγχο με χρήση του Chrome.

grtechpc.org Lighthouse API

Μπορείτε επίσης να λάβετε τα δεδομένα απόδοσης ιστού με το grtechpc.org Lighthouse API. Αυτό εξάγει μετρήσεις Lighthouse για κινητά ή επιτραπέζιους υπολογιστές με ένα μόνο κλικ σε μορφή HTML, JSON ή CSV.

Μπορείτε επίσης να προσαρμόσετε την αναφορά αλλάζοντας τη μορφή εξόδου ή/και εστιάζοντας σε μια συγκεκριμένη μέτρηση όπως το SEO.

{
  "parameters": [
      "--output=html",
      "--only-categories=seo",
  ],
  "url": "example.com"
}

Και ευτυχώς, έχουμε ένα δωρεάν επίπεδο χωρίς συμβολοσειρές που συνοδεύεται από 3000 κλήσεις API ανά μήνα. Ωστόσο, οι πληρωμένοι προσθέτουν υποστήριξη πολλαπλών τοποθεσιών, πληρεξούσιο κατοικιών και υψηλότερες χρεώσεις αιτημάτων, ξεκινώντας από μόλις 5 $ το μήνα.

Node.js

Το Lighthouse είναι διαθέσιμο ως μονάδα Node. Μπορείτε να το εγκαταστήσετε στον διακομιστή σας και να το χρησιμοποιήσετε μέσω προγραμματισμού ή γραμμής εντολών. Ας δούμε γρήγορα πώς να εγκαταστήσετε το Lighthouse για να εκτελέσετε μερικές δοκιμές.

Εγκατάσταση Lighthouse στο Ubuntu 18.x

Το παρακάτω, το έχω δοκιμάσει στο DigitalOcean υπηρέτης. Το Lighthouse απαιτεί Node LTS 8.9 ή μεταγενέστερο, και υποθέτω ότι το έχετε ήδη εγκαταστήσει. Εάν όχι, ανατρέξτε σε αυτόν τον οδηγό εγκατάστασης του Node.js.

Θα χρειαστεί επίσης να εγκαταστήσετε ένα πρόγραμμα περιήγησης chromium στον διακομιστή. Κάλυψα τις οδηγίες εγκατάστασης εδώ.

Η εγκατάσταση του Lighthouse είναι απλή, όπως και άλλες μονάδες.

• Συνδεθείτε στον διακομιστή σας
• Εκτελέστε την ακόλουθη εντολή για εγκατάσταση

npm install -g lighthouse

Χρησιμοποιώ το -g εδώ, οπότε εγκαθίσταται ως καθολική λειτουργική μονάδα.

[email protected]:~# npm install -g lighthouse
/usr/bin/lighthouse -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js
/usr/bin/chrome-debug -> /usr/lib/node_modules/lighthouse/lighthouse-core/scripts/manual-chrome-launcher.js

> [email protected] postinstall /usr/lib/node_modules/lighthouse/node_modules/axe-core
> node build/utils/postinstall.js

+ [email protected]
added 179 packages from 119 contributors in 10.094s
[email protected]:~#

Μόλις εγκατασταθεί, εκτελέστε την εντολή lighthouse για να βεβαιωθείτε ότι έχει εγκατασταθεί σωστά.

[email protected]:~# lighthouse
Please provide a url

Specify --help for available options
[email protected]:~#

Ωραία, ο φάρος είναι έτοιμος να εκτελέσει τον έλεγχο. Ας δοκιμάσουμε μερικές επιλογές δοκιμής.

Για να εκτελέσετε μια δοκιμή χρησιμοποιώντας ένα πρόγραμμα περιήγησης χωρίς κεφαλή

lighthouse URL --chrome-flags="--headless"

Πρέπει να παρέχετε μια απόλυτη διεύθυνση URL, συμπεριλαμβανομένου του HTTP ή του HTTPS.

Πρώην:

[email protected]:~$ lighthouse https://grtechpc.org.com --chrome-flags="--headless"
  ChromeLauncher Waiting for browser. +0ms
  ChromeLauncher Waiting for browser... +1ms
  ChromeLauncher Waiting for browser..... +511ms
  ChromeLauncher Waiting for browser.....✓ +2ms
  status Connecting to browser +176ms
  status Resetting state with <a href="https://grtechpc.org.com/aboutblank-in-chrome-firefox-safari/">about:blank</a> +24ms
  status Benchmarking machine +30ms
  status Initializing… +508ms
  status Loading page & waiting for onload Scripts, CSSUsage, Viewport, ViewportDimensions, ThemeColor, Manifest, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, Accessibility, LinkElements, AnchorsWithNoRelNoopener, AppCacheManifest, Doctype, DOMStats, JSLibraries, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, MetaDescription, FontSize, CrawlableLinks, MetaRobots, Hreflang, EmbeddedContent, Canonical, RobotsTxt +27ms
  status Retrieving in-page: Scripts +2s
  status Retrieving in-page: CSSUsage +0ms
  status Retrieving in-page: Viewport +0ms
  status Retrieving in-page: ViewportDimensions +0ms
  status Retrieving in-page: ThemeColor +0ms
  status Retrieving in-page: Manifest +0ms
  status Retrieving in-page: RuntimeExceptions +0ms
  status Retrieving in-page: ChromeConsoleMessages +0ms
  status Retrieving in-page: ImageUsage +0ms
  status Retrieving in-page: Accessibility +0ms
  status Retrieving in-page: LinkElements +0ms
  status Retrieving in-page: AnchorsWithNoRelNoopener +1ms
  status Retrieving in-page: AppCacheManifest +0ms
  status Retrieving in-page: Doctype +0ms
  status Retrieving in-page: DOMStats +0ms
  status Retrieving in-page: JSLibraries +0ms
  status Retrieving in-page: OptimizedImages +0ms
  status Retrieving in-page: PasswordInputsWithPreventedPaste +0ms
  status Retrieving in-page: ResponseCompression +0ms
  status Retrieving in-page: TagsBlockingFirstPaint +0ms
  status Retrieving in-page: MetaDescription +0ms
  status Retrieving in-page: FontSize +0ms
  status Retrieving in-page: CrawlableLinks +0ms
  status Retrieving in-page: MetaRobots +0ms
  status Retrieving in-page: Hreflang +0ms
  status Retrieving in-page: EmbeddedContent +0ms
  status Retrieving in-page: Canonical +0ms
  status Retrieving in-page: RobotsTxt +0ms
  status Retrieving trace +1ms
  status Retrieving devtoolsLog & network records +110ms
  status Retrieving: Scripts +27ms
  status Retrieving: CSSUsage +53ms
  status Retrieving: Viewport +192ms
  status Retrieving: ViewportDimensions +5ms
  status Retrieving: ThemeColor +13ms
  status Retrieving: Manifest +2ms
  status Retrieving: RuntimeExceptions +295ms
  status Retrieving: ChromeConsoleMessages +1ms
  status Retrieving: ImageUsage +2ms
  status Retrieving: Accessibility +22ms
  status Retrieving: LinkElements +526ms
  status Retrieving: AnchorsWithNoRelNoopener +10ms
  status Retrieving: AppCacheManifest +6ms
  status Retrieving: Doctype +20ms
  status Retrieving: DOMStats +4ms
  status Retrieving: JSLibraries +50ms
  status Retrieving: OptimizedImages +25ms
  status Retrieving: PasswordInputsWithPreventedPaste +234ms
  status Retrieving: ResponseCompression +3ms
  status Retrieving: TagsBlockingFirstPaint +7ms
  status Retrieving: MetaDescription +6ms
  status Retrieving: FontSize +7ms
  status Retrieving: CrawlableLinks +245ms
  status Retrieving: MetaRobots +6ms
  status Retrieving: Hreflang +2ms
  status Retrieving: EmbeddedContent +2ms
  status Retrieving: Canonical +3ms
  status Retrieving: RobotsTxt +6ms
  status Resetting state with about:blank +19ms
  status Loading page & waiting for onload ServiceWorker, Offline, StartUrl +24ms
  status Retrieving in-page: ServiceWorker +59ms
  status Retrieving in-page: Offline +0ms
  status Retrieving in-page: StartUrl +1ms
  status Retrieving devtoolsLog & network records +0ms
  status Retrieving: ServiceWorker +2ms
  status Retrieving: Offline +1ms
  status Retrieving: StartUrl +1ms
  status Resetting state with about:blank +5ms
  status Loading page & waiting for onload HTTPRedirect, HTMLWithoutJavaScript +48ms
  status Retrieving in-page: HTTPRedirect +260ms
  status Retrieving in-page: HTMLWithoutJavaScript +0ms
  status Retrieving devtoolsLog & network records +0ms
  status Retrieving: HTTPRedirect +7ms
  status Retrieving: HTMLWithoutJavaScript +12ms
  status Disconnecting from browser... +7ms
  status Analyzing and running audits... +6ms
  status Evaluating: Uses HTTPS +3ms
  status Evaluating: Redirects HTTP traffic to HTTPS +24ms
  status Evaluating: Registers a service worker that controls page and start_url +1ms
  status Evaluating: Current page responds with a 200 when offline +0ms
  status Evaluating: Has a `<meta name="viewport">` tag with `width` or `initial-scale` +1ms
  status Evaluating: Contains some content when JavaScript is not available +1ms
  status Evaluating: First Contentful Paint +6ms
  status Evaluating: First Meaningful Paint +54ms
  status Evaluating: Page load is fast enough on mobile networks +10ms
  status Evaluating: Speed Index +33ms
  status Evaluating: Screenshot Thumbnails +529ms
  status Evaluating: Final Screenshot +287ms
  status Evaluating: Estimated Input Latency +2ms
  status Evaluating: No browser errors logged to the console +16ms
  status Evaluating: Server response times are low (TTFB) +1ms
  status Evaluating: First CPU Idle +1ms
  status Evaluating: Time to Interactive +30ms
  status Evaluating: User Timing marks and measures +0ms
  status Evaluating: Minimize Critical Requests Depth +2ms
  status Evaluating: Avoid multiple page redirects +3ms
  status Evaluating: Web app manifest meets the installability requirements +2ms
  status Evaluating: Configured for a custom splash screen +1ms
  status Evaluating: Sets an address-bar theme color +0ms
  status Evaluating: Content is sized correctly for the viewport +1ms
  status Evaluating: Displays images with correct aspect ratio +0ms
  status Evaluating: Avoids deprecated APIs +1ms
  status Evaluating: Minimizes main-thread work +0ms
  status Evaluating: JavaScript execution time +11ms
  status Evaluating: Preload key requests +3ms
  status Evaluating: Preconnect to required origins +2ms
  status Evaluating: All text remains visible during webfont loads +2ms
  status Evaluating: Network Requests +1ms
  status Evaluating: Metrics +2ms
  status Evaluating: start_url responds with a 200 when offline +1ms
  status Evaluating: Site works cross-browser +1ms
  status Evaluating: Page transitions don't feel like they block on the network +0ms
  status Evaluating: Each page has a URL +0ms
  status Evaluating: `[aria-*]` attributes match their roles +1ms
  status Evaluating: `[role]`s have all required `[aria-*]` attributes +1ms
  status Evaluating: Elements with `[role]` that require specific children `[role]`s, are present +0ms
  status Evaluating: `[role]`s are contained by their required parent element +1ms
  status Evaluating: `[role]` values are valid +1ms
  status Evaluating: `[aria-*]` attributes have valid values +0ms
  status Evaluating: `[aria-*]` attributes are valid and not misspelled +1ms
  status Evaluating: `<audio>` elements contain a `<track>` element with `[kind="captions"]` +1ms
  status Evaluating: Buttons have an accessible name +1ms
  status Evaluating: The page contains a heading, skip link, or landmark region +1ms
  status Evaluating: Background and foreground colors have a sufficient contrast ratio +1ms
  status Evaluating: `<dl>`'s contain only properly-ordered `<dt>` and `<dd>` groups, `<script>` or `<template>` elements. +1ms
  status Evaluating: Definition list items are wrapped in `<dl>` elements +0ms
  status Evaluating: Document has a `<title>` element +1ms
  status Evaluating: `[id]` attributes on the page are unique +1ms
  status Evaluating: `<frame>` or `<iframe>` elements have a title +1ms
  status Evaluating: `<html>` element has a `[lang]` attribute +0ms
  status Evaluating: `<html>` element has a valid value for its `[lang]` attribute +1ms
  status Evaluating: Image elements have `[alt]` attributes +1ms
  status Evaluating: `<input type="image">` elements have `[alt]` text +1ms
  status Evaluating: Form elements have associated labels +0ms
  status Evaluating: Presentational `<table>` elements avoid using `<th>`, `<caption>` or the `[summary]` attribute. +1ms
  status Evaluating: Links have a discernible name +1ms
  status Evaluating: Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`). +1ms
  status Evaluating: List items (`<li>`) are contained within `<ul>` or `<ol>` parent elements +1ms
  status Evaluating: The document does not use `<meta http-equiv="refresh">` +0ms
  status Evaluating: `[user-scalable="no"]` is not used in the `<meta name="viewport">` element and the `[maximum-scale]` attribute is not less than 5. +1ms
  status Evaluating: `<object>` elements have `[alt]` text +1ms
  status Evaluating: No element has a `[tabindex]` value greater than 0 +1ms
  status Evaluating: Cells in a `<table>` element that use the `[headers]` attribute only refer to other cells of that same table. +1ms
  status Evaluating: `<th>` elements and elements with `[role="columnheader"/"rowheader"]` have data cells they describe. +0ms
  status Evaluating: `[lang]` attributes have a valid value +1ms
  status Evaluating: `<video>` elements contain a `<track>` element with `[kind="captions"]` +1ms
  status Evaluating: `<video>` elements contain a `<track>` element with `[kind="description"]` +1ms
  status Evaluating: `[accesskey]` values are unique +1ms
  status Evaluating: Custom controls have associated labels +0ms
  status Evaluating: Custom controls have ARIA roles +1ms
  status Evaluating: User focus is not accidentally trapped in a region +0ms
  status Evaluating: Interactive controls are keyboard focusable +0ms
  status Evaluating: Headings don't skip levels +0ms
  status Evaluating: Interactive elements indicate their purpose and state +1ms
  status Evaluating: The page has a logical tab order +0ms
  status Evaluating: The user's focus is directed to new content added to the page +1ms
  status Evaluating: Offscreen content is hidden from assistive technology +0ms
  status Evaluating: HTML5 landmark elements are used to improve navigation +0ms
  status Evaluating: Visual order on the page follows DOM order +0ms
  status Evaluating: Uses efficient cache policy on static assets +1ms
  status Evaluating: Avoids enormous network payloads +3ms
  status Evaluating: Defer offscreen images +1ms
  status Evaluating: Eliminate render-blocking resources +12ms
  status Evaluating: Minify CSS +28ms
  status Evaluating: Minify JavaScript +64ms
  status Evaluating: Defer unused CSS +69ms
  status Evaluating: Serve images in next-gen formats +12ms
  status Evaluating: Efficiently encode images +11ms
  status Evaluating: Enable text compression +6ms
  status Evaluating: Properly size images +6ms
  status Evaluating: Use video formats for animated content +7ms
  status Evaluating: Avoids Application Cache +11ms
  status Evaluating: Page has the HTML doctype +0ms
  status Evaluating: Avoids an excessive DOM size +1ms
  status Evaluating: Links to cross-origin destinations are safe +2ms
  status Evaluating: Avoids requesting the geolocation permission on page load +1ms
  status Evaluating: Avoids `document.write()` +0ms
  status Evaluating: Avoids front-end JavaScript libraries with known security vulnerabilities +0ms
  status Evaluating: Detected JavaScript libraries +9ms
  status Evaluating: Avoids requesting the notification permission on page load +1ms
  status Evaluating: Allows users to paste into password fields +0ms
  status Evaluating: Uses HTTP/2 for its own resources +0ms
  status Evaluating: Uses passive listeners to improve scrolling performance +1ms
  status Evaluating: Document has a meta description +0ms
  status Evaluating: Page has successful HTTP status code +1ms
  status Evaluating: Document uses legible font sizes +5ms
  status Evaluating: Links have descriptive text +1ms
  status Evaluating: Page isn’t blocked from indexing +1ms
  status Evaluating: robots.txt is valid +2ms
  status Evaluating: Document has a valid `hreflang` +1ms
  status Evaluating: Document avoids plugins +1ms
  status Evaluating: Document has a valid `rel=canonical` +0ms
  status Evaluating: Page is mobile friendly +1ms
  status Evaluating: Structured data is valid +0ms
  status Generating results... +0ms
  ChromeLauncher Killing Chrome instance 7098 +59ms
  Printer html output written to /home/chandan/grtechpc.org.com_2019-01-20_19-29-35.report.html +46ms
  CLI Protip: Run lighthouse with `--view` to immediately open the HTML report in your browser +1ms

Στη δεύτερη τελευταία γραμμή, μπορείτε να δείτε ότι έχει εκτυπώσει τη διαδρομή για να βρείτε την αναφορά. Από προεπιλογή, θα δημιουργήσει μια αναφορά σε μορφή HTML, την οποία μπορείτε να δείτε είτε κατεβάζοντας στον υπολογιστή σας είτε εξυπηρετώντας την μέσω κάποιου διακομιστή ιστού.

Τι γίνεται όμως αν πρέπει να δημιουργήσετε μια αναφορά σε μορφή JSON;

Είναι εφικτό ως εξής.

lighthouse URL --chrome-flags="--headless" --output json --output-path URL.json

Χρησιμοποιώντας το Lighthouse CLI, έχετε τον πλήρη έλεγχο να το χρησιμοποιήσετε όπως θέλετε. Θα συνιστούσα ανεπιφύλακτα να ελέγξετε το Αποθετήριο GitHub για να μάθετε περισσότερα σχετικά με τη χρήση του CLI ή μέσω προγραμματισμού.

συμπέρασμα

Το Google Lighthouse μοιάζει με ένα πολλά υποσχόμενο εργαλείο για την εκτέλεση μιας δοκιμής συνέχειας για τη βελτίωση της απόδοσης και της χρηστικότητας του ιστότοπου. Εάν χρησιμοποιείτε WordPress και θέλετε να κάνετε τον ιστότοπό σας να φορτώνει πιο γρήγορα, ρίξτε μια ματιά Ρουκέτα.