Desvetllem com assolir un 100 a Google Audit Lighthouse

Com quasi aconsseguim 100 a google audit lighthouse

Posicionar alt a Google Lighthouse és un treball dur quan la pàgina de WordPress és complexa.

Volíem compartir la nostra experiència en aconseguir una puntuació del 100% a l’auditoria de Google Lighthouse.

Table of Contents

Es tant important Google Lighthouse?

Els desenvolupadors i dissenyadors web contínuament perseguim millorar el SEO, l’accessibilitat i la usabilitat de les webs. Ho fem millorant el codi, funcionalitats i rendiment del lloc, bé. Però si hi ha alguna cosa que de manera comuna perseguim, és la necessitat de bones eines per avaluar i mesurar l’impacte de la nostra feina.

Amb Google Lighthouse Audit Score, ens aventurem a afirmar que estem davant d’una molt bona eina per la seva detallada anàlisi i com no, per la seva alineació amb els interessos del motor de cerca de Google.

Què és Google Lighthouse Audit?

Google Lighthouse és una eina d’auditoria de codi obert de Google.

Utilitza la seva connexió i les dades del lloc per mesurar el rendiment del vostre lloc web, però també el seu rendiment de SEO, PWA i altres millors pràctiques.

Lighthouse divideix les auditories en 5 àrees:

  • Rendiment ,
  • Accessibilitat,
  • SEO,
  • Bones pràctiques i
  • Aplicacions web progressives.

L’objectiu és avaluar de forma general l’experiència de l’usuari i els problemes que podria tenir amb el teu lloc web.

Google Lighthouse audita la pàgina web i la classifica entre 0 i 100.

Què és una bona puntuació a Lighthouse?

Una puntuació “Bona” (verda) està per sobre de 90. Una puntuació Pobre (taronja) oscil·la entre 89 i 50, i una “experiència dolenta de l’usuari final” (vermell) és una puntuació inferior a 50.

Nivells de puntuació de Google Lighthouse
Rangs de puntuació de Lighthouse: 0 a 49 Deficient – 50 a 89 Necessita millorar – 90 a 100 Bé

Lighthouse de Google vs PageSpeed Insights

Lighthouse està integrat directament a Chrome DevTools, al panell “Lighthouse”, però també s’usa com a motor de prova a l’eina de test de rendiment online Google PageSpeed Insights.

PageSpeed insights LCP FID CLS FCP INP i TTFB
Resultat de PageSpeed Insights de wetopi.com al final del procés

Si bé Google PageSpeed utilitza la informació generada per Lighthouse, enriquint-la amb dades de la teva audiència,
Lighthouse proporciona altres informes no limitant-se exclusivament a “Rendiment”.

Lighthouse audita altres aspectes com ara SEO, Accessibilitat, Progressive Web App, etc.

Si ets desenvolupador, una altra diferència és que també pots executar Lighthouse amb programació. Google Lighthouse està disponible com un mòdul nodejs que pots executar des del codi o en comandes de terminal.

Millorant la nostra web amb Google Lighthouse

En aquest article, compartim com ho hem fet per a millorar la puntuació d’auditoria de Google Lighthouse del nostre lloc web.

Comencem amb poques expectatives. El nostre WordPress treballa amb un tema antic i molt carregat d’opcions. Tenint en compte el punt de partida, acabem amb un resultat impressionant.

NOTA: aquest darrer any hem redissenyat el nostre web usant el nou tema “Full site Editing” de WordPress: “Twenty Twenty-Two”. El resultat és: Encara estem impactats!

Mai pensarem que amb un tema “Full Site Editing” de WordPress, seria tan fàcil obtenir una puntuació de 100 a totes les proves.

Aquest és el nostre viatge

  • Des d’aquí:
Una puntuació d'auditoria dolenta de Google Lighthouse
  • Fins aquí :
Resultats de 100 a Google Lighthouse

Com puc obrir Lighthouse de Google?

Pots trobar Lighthiouse a les eines per a desenvolupadors del teu navegador Chrome.

Per obrir les “Eines de desenvolupador”, selecciona:

  • “Menú superior → View → Desenvolupador → Eines per a desenvolupadors” o
  • “⌥+⌘+I” a Mac o
  • “F12+Ctrl+Majúscules+I” al Windows.

Nota: també el pots accedir-hi des de la part superior dreta “Menú de tres punts”:

Accediu a les eines de desenvolupament des del menú de tres punts

A la barra superior on veus Elements, Consola, … tria “Auditories”.

Desplaceu-vos cap avall per les opcions i feu clic a Executar auditories.

Panell Audits de Google a DevTools

Prova sempre els canvis en un servidor de test

Tingues en compte que l’informe d’auditoria de Google us suggerirà molts canvis. És important que treballis sempre en un entorn staging que et permeti fer proves sense trencar res.

Per no trencar la teva web producció, els entorns de prova “staging” són la solució.

Clonar un lloc de WordPress amb Wetopi és tan fàcil com un simple clic.

Clonem el nostre lloc amb l’eina de clonació de Wetopi. En uns segons, la clonació ens proporciona un nou servidor que s’executa en un subdomini de desenvolupament totalment separat de l’utilitzat en producció:

Desplega un entorn staging per provar els canvis suggerits per Google Lighthouse

Quina configuració utilitzar a Google Lighthouse?

En el nostre cas, no hem volgut alterar els valors suggerits per Google.

Executarem les auditories amb les opcions predeterminades:

puntuació d'optimització amb l'auditoria de Google amb opcions predeterminades

Després d’uns segons, l’auditoria s’acaba. El més interessant de Google Lighthouse és que ens mostra una llista d’oportunitats ordenades per “Estalvi estimat” en segons.

Abordem la primera oportunitat d’optimització.

Treballant a les oportunitats que suggereixen els resultats de Google Lighthouse

Aquest va ser el nostre primer esforç de refactorització centrat en l’eina d’auditoria Google Lighthouse . Decidim adoptar l’enfocament experimental i avançar a través de les troballes de l’informe.

És important abordar els passos amb més marge de millora i menys esforç d’execució. No facis com nosaltres que comencem per netejar els CSS.

Ajornar la càrrega d’estils CSS no utilitzats

Optimitzi el far d'auditoria Ajornar CSS no utilitzat

Estàvem carregant un full d’estils CSS enorme.

Si treballes amb un tema WordPress super carregat d’opcions, aquest és el preu a pagar.

En el nostre cas, prenem la decisió de netejar manualment aquest fitxer CSS. Eliminem les seccions que sabem que no es fan servir. Per exemple: tots els estils de woo-commerce i “slides” animats.

Reemplaçar el fitxer CSS del tema WordPress

Per prendre el control del nostre CSS de tema, retirem de la cua de styles el css principal del tema i el reemplacem amb el nostre estil curat afegint un wp_enqueue .

Al nostre functions.php del nostre tema fill, “Child Theme” afegim aquest fragment de codi:

function my_load_child_scripts() { 
  wp_dequeue_style( THEME_SHORT.'-theme' ); 
  wp_deregister_style( THEME_SHORT.'-theme' ); 
  wp_enqueue_style( THEME_SHORT . '-child-theme' , get_stylesheet_directory_uri() . '/style.css', array(), false, 'all' );
}

add_action( 'wp_enqueue_scripts', 'my_load_child_scripts', 100);

Identificar el codi CSS no utilitzat

Per ajudar-nos a identificar els blocs de codi CSS no utilitzats, utilitzem l’eina per a desenvolupadors de Chrome de Coverage .

Aquesta tasca de “neteja” requereix molt de temps. Acabem reduint el nostre style.css a la meitat de la seva mida original. Principalment eliminant woo-commerce, totes les funcions del control lliscant i altres codis CSS no utilitzats.

El resultat? Saltem de 54 a 66 a la puntuació de rendiment de lighthouse:

66 en el resultat de l'auditoria de rendiment

Ajornar la càrrega d’imatges fora de pantalla

Aquest “Ajornament d’imatges fora de pantalla” té un temps d’estalvi potencial estimat de 1,05 segons!

Ajornar imatges fora de pantalla

Google va fer una gran feina en proporcionar-nos “Més informació” per ajudar-nos a resoldre el problema.

Les imatges fora de pantalla són imatges que apareixen “Above de Fold” .

Si els usuaris no poden veure les imatges fora de pantalla quan carreguen una pàgina, no hi ha motiu per descarregar les imatges fora de pantalla com a part de la càrrega inicial de la pàgina.

Lazy Loading obliga que les imatges es carreguin només quan estan “a la meitat superior de la pàgina”; en altres paraules, es carreguen les imatges conforme les anem necessitant.

NOU: Native Lazy Loading va arribar amb WordPress 5.5

Al nostre WordPress actual, eliminem aquest plugin.

Si preferiu la idea d’un plugin per resoldre les vostres necessitats de càrrega diferida, vam resoldre aquesta primera optimització, després d’algunes investigacions, amb Lazy Load de WP Rocket, el plugin més ràpid i lleuger per resoldre aquest problema. Actualment està actiu en més de 20.000 instal·lacions amb una qualificació de 4 de 5 estrelles. El gran avantatge daquest plugin és que pesa menys de 10 KB. No hi ha opcions per configurar, simplement instal·la el connector i la càrrega diferida simplement funcionarà.

NOTA: després de la instal·lació de Lazy Load, aneu a la configuració d’administrador de WordPress i seleccioneu la càrrega diferida d’imatges.

La càrrega diferida ens va portar de 66 a 70 a la puntuació d’acompliment d’auditoria.

Afegir l’etiqueta de preconnexió “preconnect”

L’establiment de connexions implica sovint un temps significatiu en xarxes lentes, especialment quan es tracta de connexions segures. Això passa quan tenim cerques de DNS, redireccionaments i acabem fent viatges d’anada i tornada al servidor que dóna resposta a la sol·licitud de l’usuari.

La cave consisteix a informar amb antelació el navegador de la nostra intenció. Això permet al navegador establir per endavant i en paral·lel les connexions.

Com afegir el preconnect?

La solució, és força senzilla. Consisteix a afegir l’etiqueta d’enllaç ” preconnec t” a l’inici de pàgina dins del bloc header .

Per modificar les capçaleres, hem d’editar al nostre directori de temes secundaris, el fitxer header.php afegint una línia per a cada servei extern al que sabem la nostra pàgina connectarà.

<link rel="preconnect" href="https://www.google-analytics.com"> 
<link rel="preconnect" href="https://stats.g.doubleclick.net">

Elimina els recursos que bloquegen el renderitzat

Conforme anem solucionant punts de l’informe d’Oportunitats, és normal que es vagi produint una alternança entre “Eliminar CSS no utilitzat” i “Eliminar recursos que bloquegen el renderitzat”.

Ara és el moment de reduir “recursos que bloquegen el renderitzat”, és a dir revisar lús de javascript.

Eliminació de vídeos i el seu codi javascript de bloqueig:

Una gran decisió que vam prendre va ser eliminar les incrustacions de vídeo del nostre servei de vídeo extern Wistia. Observem a Auditories que Wistia CSS i javascript bloquejaven l’execució del renderitzat. A més, ni tan sols les miniatures per al “previsualitzat” estaven optimitzades.

Reemplacem les incrustacions de vídeo amb infografies simples.

Una altra neteja que vam fer va ser eliminar jQuery Migrate (el nostre registre de la consola de Chrome ens va donar la pista que mostra ” JQMIGRATE : Migrate està instal·lat, versió 1.4.1″)

jQuery Migrate simplifica el procés de moure el codi antic del jQuery a versions més noves del jQuery mitjançant la identificació de característiques obsoletes. En el nostre cas, jQuery Migrate no cal. Estem executant plugins i temes actualitzats.

Provarem el nostre lloc sense ell.

Eliminar jQuery Migrate:

Anem a afegir aquest codi al nostre functions.php

//Remove JQuery migrate 

function remove_jquery_migrate( $scripts ) { 
  if ( ! is_admin() && isset( $scripts->registered['jquery'] ) ) { 
    $script = $scripts->registered['jquery']; 
    if ( $script->deps ) { 
      // Check whether the script has any dependencies 
      $script->deps = array_diff( $script->deps, array( 'jquery-migrate' ) );
    } 
  } 
} 

add_action( 'wp_default_scripts', 'remove_jquery_migrate' );

Aquest fragment de codi, quan no estem a "wp-admin", verifica si utilitzeu jQuery. Si és així procedeix a desregistrar jQuery Migrate de la matriu de dependències.

Revisa sempre que totes les pàgines i els racons del teu lloc funcionen com s’espera. En el nostre cas, tot va anar bé.

Tornant a l’anàlisi, un nou test amb Lighthouse ens va donar la nostra primera puntuació en verd de 89 en rendiment:

L'eliminació de vídeos i de jQuery Migrate millora la mètrica de rendiment a 89

NOTA: les darreres versions de Lighthouse són una mica més estrictes i només donen verd a partir del 90.

Servint les nostres fonts de Google i afinant amb font-display:

Continuant amb la nostra tasca de reduir els bloquejos. L’auditoria de Google suggereix configurar font-display .

El nou descriptor de visualització de fonts per a @font-face permet als desenvolupadors decidir com es representaran (o retrocediran) les seves fonts web, segons el temps que triguin a carregar-se. La idea és no bloquejar el procés de renderitzat, per la qual cosa font-face es renderitza amb un respatller al principi si no està carregat, però la font s’intercanvia tan aviat com es carrega.

Una altra millora que podem fer és servir les fonts de Google des del nostre servidor. Els nostres servidors wetopi són ultraràpids i tenen una millor política de memòria cau.

Deshabilitarem totes les fonts de Google al nostre panell d’administració de temes i descarregarem els fitxers.

Aquí va un consell. El lloc de fonts de Google no proporciona tots els formats de font! volem almenys woff i woff2 . Trobem aquest projecte en línia: http://google-webfonts-helper Una forma sense complicacions d’autohostatger Google Fonts. @majodev Gràcies!

Així és com allotgem les nostres fonts de Google:

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    font-display: fallback;
    src: local('Roboto Thin'), local('Roboto-Thin'), url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-100.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: fallback;
    src: local('Roboto Light'), local('Roboto-Light'), url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-300.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: local('Roboto'), local('Roboto-Regular'), url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-regular.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
Allotjar al nostre server les fonts de Google permeten augmentar el rendiment de Lighthoouse
Augmenta el rendiment auto-hospedant les fonts de google

Presentem Cache i connexions segures amb Https

Arribats al punt on ens resulten inviables les opcions suggerides per a la millora de rendiment, ens queda sempre l’opció de reduir els temps de càrrega.

habilitarem el nostre plugin de memòria cau WP Super Cache i habilitarem el certificat Letsencrypt per servir pàgines amb HTTPS (en el nostre domini producció ja estava actiu, avui dia és imprescindible que treballem connexions segures).

Un aspecte important a tenir en compte amb connexions segures és treballar amb servidors moderns que utilitzin com a mínim protocols a la seva versió HTTP/2 i TLS 1.3

A wetopi disposes de servidors amb les últimes versions i protocols de seguretat.Prova amb una còpia del teu site .

En el nostre cas els servidors estan finament ajustats i utilitzen el darrer protocol HTTP/2 amb TLS 1.3

HTTPS augmenta el rendiment d'auditoria de Google

El resultat? Genial.

Gràcies a HTTPS, saltem a les “puntuacions verdes” en rendiment i també a Millors Pràctiques.

En aquest punt, la llista d’oportunitats ja és més curta:

Oportunitats per accelerar el rendiment de l'aplicació i augmentar Google Lighthouse Score

El primer punt encara apunta al CSS i al javascript. Vam decidir passar més temps buscant més estils sense utilitzar per reduir la mida. Mentre treballàvem a la neteja, vam descobrir que estàvem carregant codi javascript de plugins que no eren necessaris a la pàgina inicial.

Per ser més selectius amb el “on” i “quan” es carreguen els plugins, tenim dos camins:

  1. Utilitza un connector capaç de controlar la càrrega de fitxers de javascript i CSS: per exemple, W3 Total Cache. Ens dóna el control per utilitzar les tècniques de “diferir” i “precarregar”.
  2. Codificar al nostre functions.php la lògica per carregar plugins només quan sigui necessari. O trobar un connector que ens faci aquest treball de selecció.

Apostem per la darrera opció. No obstant això, hi ha un inconvenient, i és que podem carregar-nos el sistema de memòria cau del navegador si som agressius a les combinacions de plugins. Potencialment, podem acabar donant més feina al navegador en tenir un javascript concatenat diferent i un fitxer CSS d’estil a totes i cadascuna de les pàgines del lloc.

El nostre enfocament va ser dividir els plugins en dos blocs: una combinació de plugins per a les pàgines del nostre lloc corporatiu i una segona per a les publicacions del nostre bloc.

Instal·lem Plugin Load Filter per implementar aquest enfocament. Aquest plugin us permet habilitar/deshabilitar plugins segons molts criteris. Compte, no siguis un boig!

En resum, us dóna una pàgina de configuració amb 2 pestanyes. A la pestanya “Registre de filtre” tu decideixes els connectors que vols controlar. Després, per a aquells plugins que desitges administrar en funció del “Tipus de pàgina”, pots canviar a la segona pestanya “Activacions de filtre de pàgina”. Aquí és on pots tornar boig/a. En el nostre cas érem “binaris”, i ens vam restringir a les opcions de filtre “Pàgina” o “Publicació”:

Filtre de càrrega de plugin utilitzat per augmentar la puntuació a l'auditoria de Google Lighthouse

Això ha reduït la mida del nostre javascript principal, donant-nos un rendiment decent de 97 i un temps decent de Primer Pintat (First Contentful Paint) de 1,6 segons a xarxes 3G:

97 en rendiment i First Content Paint de 1,6 segons

Estem satisfets amb la puntuació de rendiment, passem a la secció d’auditoria de Lighthouse següent.

Convertir WordPress en una PWA, Aplicació Web progressiva

Les aplicacions web progressives (PWA) són aplicacions web que es carreguen com a pàgines web o llocs web normals, però que poden oferir a l’usuari funcions com ara treballar sense connexió, notificacions automàtiques, etc.

https://en.wikipedia.org/wiki/Progressive_web_applications

No totes les pàgines web necessiten aquesta funcionalitat fora de línia. En el nostre cas, els nostres clients solen anar a la nostra pàgina web per fer clic al botó d’inici de sessió. Si el nostre lloc web cau, perdran la ruta al panell d’allotjament de wetopi. Sona bé afegir aquesta funcionalitat sense connexió per als nostres clients.

Buscant Progressive Web App trobem SuperPWA .

L’ecosistema de plugins de WordPress és com la butxaca de Doraemon:

Sempre hi ha un connector que ens resol el problema.

Aquest connector és increïble. Ho instal·lem i configurem simplement carregant les icones de la nostra aplicació. En uns minuts, el nostre PWA està llest i funcionant.

Pàgina de configuració d'aplicacions web superprogressives
Pàgina de configuració de Super PWA.

¡El resultat de l’auditoria PWA de Lighthouse ens dóna un impressionant 100!

Gràcies a Super PWA per crear aquest increïble plugin i posar-lo a disposició de la comunitat de WordPress.

En aquest moment, estem en verd i aconseguim una puntuació de gairebé 100 a totes les seccions.

La llista de correccions daccessibilitat i SEO va ser fàcil de resoldre: especialment les imatges principals sense descripcions alternatives i botons sense noms accessibles.

Arribem gairebé al 100% a l'auditoria de Google Lighthouse

Estem satisfets amb el resultat general per la quantitat de temps invertit. Moure la puntuació daccessibilitat i la puntuació de millors pràctiques a 100 significaria un canvi en el disseny i el tema.

És recomanable utilitzar PWA a WordPress?

PWA optimitza el teu lloc de WordPress per a les aranyes SERP de Google. Això és “imprescindible” si el temps de càrrega de la pàgina del vostre lloc no és òptim.

En el nostre cas, en redissenyar la nostra web wetopi utilitzant el darrer tema Full Site Editing “Twenty Twenty-Two”, els temps de càrrega de la pàgina eren tan baixos que vam decidir prescindir de la funcionalitat PWA. Al final, un connector menys també significa, menys temps de procés i més velocitat.

Consells generals per millorar el rendiment

Aquí hi ha un parell de consideracions que cal tenir en compte quan es tracta del rendiment de WordPress.

Reduir l’ús de connectors

Afegir plugins significa afegir càrrega al nostre servidor i al navegador del nostre usuari final.

No instal·lis plugins que estrictament no necessitis.

Menys temps de procés significa més velocitat.

Especialment aquells plugins amb impacte al front-end. Els plugins afegeixen càrrega al nostre lloc web. Els connectors que afegeixen funcionalitats d’usuari o modificant l’aspecte, afegeixen fulls d’estil i javascript que condueixen a incrementar els temps de càrrega i pintat de la pàgina.

Construeix la teva web utilitzant temes lleugers

Pel nostre proper redisseny de web, sens dubte posarem especial atenció a la tria del tema. El tema és una peça crucial a WordPress. Tot dependrà duna bona elecció.

NOTA: Al nostre darrer restyling de la web, varem decidir apostar per un tema “Full Site Editing” de WordPress Core. El resultat va ser impressionant.

Varem treballar amb el tema “Twenty Twenty-Two”, posant també especial atenció als recursos gràfics, convertint-los a SVG i WebP. Amb aquests simples canvis, varem assolir immediatament un 99~100 als resultats de l’Auditoria.

Sense més, esperem amb aquest cas pràctic, haver-te ajudat a clarificar com millorar el rendiment general de la teva web fent servir el panell d’Auditories Lighthouse de Chrome DevTools.

Si tens en ment optimitzar el teu propi web, compta amb nosaltres.

Amb Wetopi, tens servidors de desenvolupament gratuïts i migracions gratuïtes .

No esperis més i migra una còpia del teu lloc web per començar a treballar amb Google Lighthouse!

Resumidament, som uns techies apassionats per WordPress que hem creat Wetopi, un Allotjament WordPress Gestionat, per minimitzar la fricció a la que tot professional s’enfronta en treballar i allotjar projectes WordPress.

Inclou servidors de desenvolupament Gratis.
No cal tarjeta de crèdit.