L’equip de rendiment bàsic de WordPress va llançar dos connectors que acceleren les pàgines web amb noves tecnologies que pre-representen els URL abans que un usuari faci clic en un enllaç i acceleren les imatges carregades amb gandules.
Equip de rendiment bàsic de WordPress
L’equip de rendiment bàsic de WordPress és responsable de coordinar-se amb els diferents equips de desenvolupament bàsic de WordPress amb la finalitat de millorar el rendiment i també de treballar en projectes que afectin directament la millora del rendiment bàsic de WordPress.
El pla inicial de l’equip de rendiment consistia en:
- liderar la formació dels grups de treball
- coordinar les tasques administratives inicials (canal slack, reunions setmanals, programar les nominacions de representants dels grups de treball, etc.)
- crear una declaració de missió per a l’equip
- coordinar les àrees a abordar
- esbossar l’abast i el full de ruta
Connectors de rendiment de WordPress
Algunes de les millores de rendiment de WordPress es comencen a provar en complements abans d’integrar-se posteriorment en una versió futura de WordPress.
Els usuaris que descarreguen els connectors poden ser els primers del món a utilitzar i beneficiar-se de les millores de velocitat de la pàgina web i s’espera (esperar) que els que utilitzen els connectors també proporcionin comentaris sobre les seves experiències, tant positives com negatives.
El primer connector i el més popular llançat per l’equip de rendiment és el Connector de Performance Lab que inclou cinc mòduls que es poden activar o desactivar segons les necessitats de l’usuari.
Els mòduls actuals del connector Performance Lab són:
- Imatges en color dominant:
Afegeix suport per emmagatzemar el color dominant de les imatges recentment penjades i crear un fons de marcador de posició d’aquest color. - Comprovació de salut de WebP Support:
Afegeix una comprovació de suport de WebP a l’estat de salut del lloc. - Càrregues WebP:
Crea versions WebP per a càrregues noves d’imatges JPEG si el servidor ho admet. - Comprovació de l’estat dels actius en cua:
Afegeix una comprovació de recursos CSS i JS a l’estat de salut del lloc. - Comprovació d’estat d’opcions carregades automàticament:
Afegeix una comprovació de les opcions carregades automàticament a l’estat de salut del lloc
Dos nous connectors de rendiment
Els dos complements nous que s’han anunciat avui són:
- Mides automàtiques per a imatges carregades amb mandrosa
- Normes d’especulació
Els dos connectors milloren el rendiment de dues maneres diferents, cosa que significa que es poden utilitzar tots dos per obtenir la major quantitat de millores.
Nou connector de mida automàtica de WordPress
La càrrega mandrosa és una tècnica d’optimització del rendiment que difereix (pausa) la càrrega d’imatges no crítiques per millorar els temps de càrrega de la pàgina. Les imatges que són necessàries per renderitzar la part visible de la pàgina web es carreguen primer, mentre que les que no són necessàries es defereixen fins que l’usuari es desplaça i les imatges són necessàries.
El que fa aquest connector és integra un nou atribut HTML de càrrega mandrosa anomenat sizes=”auto” que estableix l’atribut “sizes” a “auto” per a imatges carregades amb mandros mitjançant “srcset” i accelera la descàrrega de les imatges que es necessitaran quan l’usuari es desplaça cap avall per la pàgina.
L’atribut sizes=”auto” per a les imatges forma part de l’especificació d’imatges responsives en HTML, però no està relacionat específicament amb la càrrega mandrosa. En lloc d’això, l’atribut sizes s’utilitza amb srcset per proporcionar al navegador les dimensions de mida de la imatge necessàries per mostrar la imatge en diferents mides de la finestra gràfica. Aleshores, el navegador pot seleccionar la font d’imatge més adequada del srcset.
Nou connector de regles d’especulació de WordPress
El connector de regles d’especulació aprofita l’API de regles d’especulació per descarregar els recursos de les pàgines web que és probable que sol·liciti un usuari. El complement de Regles d’especulació prediu bàsicament que es sol·licitarà una pàgina i començarà a renderitzar la pàgina web abans que l’usuari faci clic en un enllaç.
La descripció oficial del connector explica:
“Utilitza l’API de regles d’especulació per prerenderitzar els URL enllaçats de manera predeterminada en passar el cursor”.
L’API de regles d’especulació és una característica dissenyada per millorar el rendiment de la navegació web permetent que les pàgines web proporcionin consells al navegador sobre els enllaços potencials que un usuari pot fer clic per navegar a una pàgina web diferent. Aleshores, el navegador pot recuperar o renderitzar prèviament els recursos en funció de la probabilitat que un visitant del lloc faci clic en un enllaç per navegar a una pàgina web nova.
La pàgina de desenvolupadors de Mozilla per a API de regles d’especulació explica:
“L’API de regles d’especulació està dissenyada per millorar el rendiment per a futures navegacions. S’orienta a URL de documents en lloc de fitxers de recursos específics, de manera que té sentit per a aplicacions de diverses pàgines (MPA) en lloc d’aplicacions d’una sola pàgina (SPA).
L’API de regles d’especulació ofereix una alternativa a la funció àmpliament disponible i està dissenyada per substituir la funció obsoleta només per a Chrome. Proporciona moltes millores sobre aquestes tecnologies, juntament amb una sintaxi més expressiva i configurable per especificar quins documents s’han de recuperar o renderitzar prèviament”.
La implementació del connector requereix l’ús d’almenys Chrome 121. Els usuaris que visiten un lloc mentre utilitzen un navegador diferent que no admet l’API de regles d’especulació no es veuran afectats de cap manera, la pàgina web es mostrarà com ho faria normalment.
Segons la documentació del connector:
“Per defecte, el connector està configurat per renderitzar prèviament els URL de la interfície de WordPress quan l’usuari passa el cursor per sobre d’un enllaç rellevant. Això es pot personalitzar mitjançant la secció “Normes d’especulació” a sota Configuració > Lectura.
Es pot utilitzar un filtre per excloure que determinats camins d’URL siguin aptes per a l’obtenció prèvia i la representació prèvia (vegeu la secció de PMF). Alternativament, podeu afegir la classe CSS “no-prerender” a qualsevol enllaç (
<a>etiqueta) que no s’hauria de presentar prèviament”.
Llegiu més sobre els nous connectors de rendiment de WordPress i descarregueu-los aquí:
Mides automàtiques de WordPress per al connector d’imatges carregades amb mandrós
Connector de regles d’especulació de WordPress
Imatge destacada de Shutterstock/Haali
