Seu

5 maneres d'optimitzar el vostre lloc per als criteris de velocitat de la pàgina de Google

El maig de 2018, Google va llançar Lighthouse 3.0, una versió actualitzada de la seva eina de codi obert per auditar la qualitat i la velocitat de les pàgines web. Lighthouse 3.0 aporta noves opcions de sortida per als informes, però també una sèrie de canvis en la forma en què mesura la velocitat i el rendiment del lloc, com ara la introducció de First Contentful Paint com a mètrica de rendiment i velocitat i noves ponderacions per a les auditories de rendiment.

home amb imatge d'ordinador

I des de maig de 2018? Google ha publicat encara més canvis. És per això que avui compartim cinc maneres d'optimitzar el vostre lloc.

Comencem

Per què optimitzar la velocitat del vostre lloc ara?

El far ha continuat evolucionant durant l'any des que va caure 3.0. Google va anunciar recentment que estava treballant en "Paquets de plataforma" per a Lighthouse, pel qual els provadors poden rebre consells d'optimització de velocitat específics per al CMS i les biblioteques de codi que s'utilitzen als seus llocs.

Així, per exemple, si utilitzeu Angular JavaScript amb WordPress, esteu de sort, però ja s'estan desenvolupant més variants de Platform Packs, amb l'ajuda de la comunitat GitHub.

Actualització Lighthouse de Google amb Page Speed ​​Insights

Font de la imatge

Google ha anat augmentant gradualment la importància de la velocitat del lloc com a criteri de classificació de cerca des que va introduir per primera vegada l'índex per a mòbils el 2016, per la qual cosa és prudent parar atenció a aquestes mètriques i tendències. Google va llançar aproximadament 62 actualitzacions d'algorismes al llarg de la mitjana setmana el 2018, per la qual cosa assegurar-se que us classifiqueu bé s'està convertint en una pràctica cada cop més dinàmica. I tenint en compte la novetat relativa de l'índex de primers mòbils, així com la seva influència desproporcionada en el trànsit del lloc web, té sentit que la majoria dels perfeccionaments de l'algorisme es centren en el mòbil.

Potser l'argument més fort per vigilar de prop el Lighthouse és que aquesta és la primera vegada que Google crea una eina de mesura de velocitat d'autoservei que intenta replicar els temps de retard experimentats pels visitants reals del lloc, a diferència dels robots.

"Moltes d'aquestes mètriques que esteu mirant des de Lighthouse se us presenten principalment pel que fa a la cara dels usuaris", va explicar l'analista de tendències per a administradors web John Mueller al febrer durant una sessió de preguntes i respostes de Hangout d'horari d'oficina. "Des del nostre punt de vista, des del punt de vista de la cerca, ajuntem una varietat d'aquestes mètriques per esbrinar com hem de veure aquest lloc pel que fa a la velocitat".

Tenint tot això en ment, hem recopilat cinc consells per ajudar-vos a complaure els déus de Google amb la velocitat del vostre lloc.

1. Implementar càrrega mandrosa

Les imatges d'alta resolució poden alentir significativament el temps de càrrega del vostre lloc web, així com augmentar la memòria i el pes de la pàgina. Podríeu tallar-los completament del vostre lloc, però és possible que els necessiteu o vulgueu mantenir-los. La càrrega mandrosa és una manera d'accelerar el temps de càrrega de la pàgina sense haver de desfer-vos del vostre contingut amb molts recursos.

Exemple de càrrega mandrosa de Medium

Font de la imatge

Amb la càrrega mandrosa, només es carrega una part de la pàgina web alhora: la secció que l'espectador està mirant en aquest segon, de manera que ajornaràs la càrrega de la part següent fins que el visitant s'hi desplaça cap avall. Això redueix la quantitat de temps que es necessita per arribar a mètriques com First Meaningful Paint i First Content Paint, que són dues de les mètriques que Lighthouse utilitza per mesurar la velocitat i el rendiment del lloc.

La càrrega mandrosa és imprescindible si heu implementat el "desplaçament infinit", que és popular entre els llocs amb molt contingut, però pot ajudar a tot tipus de llocs web. De fet, la plataforma de disseny web de Duda ha descobert que, després de la implementació de la càrrega mandrosa als llocs impulsats per Duda, aquestes propietats van augmentar la puntuació de Lighthouse amb una mitjana de 10 punts;

2. Aprofiteu al màxim els formats d'imatge de nova generació

Un dels grans culpables dels temps lents de First Contentful Paint són les vostres imatges. El problema és que quan es tracta de màrqueting i vendes, una imatge realment val més que mil paraules, així que tindries raó en resistir-te a desfer-te d'aquells dissenys que afavoreixen les grans imatges d'herois. Juntament amb la càrrega mandrosa, els formats d'imatge de nova generació proporcionen la solució.

Els formats de nova generació inclouen JPEG 2000, JPEG XR i WebP. Aquests formats comprimeixen i converteixen les imatges per fer-les molt més petites que els PNG i JPG tradicionals, però no tenen un efecte negatiu en la qualitat de la imatge. Quan utilitzeu formats de nova generació, podeu accelerar dràsticament els temps de càrrega de la pàgina, fins i tot per a visuals amb dimensions de píxels més grans, sense sacrificar la qualitat de la imatge. Fes una ullada a aquestes dades d'Insane Lab que van mostrar quants fitxers WebP són més petits que els fitxers PNG:

Gràfic de fitxers WebP i PNG

Google anima especialment els administradors web a utilitzar el seu propi format WebP nou, que és compatible amb els navegadors Chrome i Opera. WebP produeix imatges que són un 26% més petites que PNG i un 25-35% més petites que els formats JPG.

3. Utilitzeu una xarxa de lliurament de contingut

Una xarxa de lliurament de contingut, o CDN, és una solució fantàstica per accelerar la càrrega de la vostra pàgina, que són la segona mètrica més important per a una bona puntuació de rendiment a Lighthouse 3.0.

Bàsicament, un CDN és una xarxa de servidors que es distribueixen arreu del món i treballen conjuntament per oferir el vostre contingut. Com que els servidors d'una CDN estan dispersos geogràficament, sempre n'hi ha un que està més a prop de gairebé tots els usuaris, reduint el temps que triga el vostre contingut a arribar al seu navegador.

Explicació CDN

Font de la imatge

Els CDN també utilitzen sovint tàctiques de compressió avançades, com ara la minificació i la compressió de fitxers, que ajuden els vostres actius de contingut a transferir-se més ràpidament, oferint una millor disponibilitat i redundància de contingut, de manera que el trànsit intens no interrompi el rendiment del vostre lloc web. És menys probable que els CDN caiguin davant d'una fallada de maquinari. Els principals llocs amb molt contingut que depenen de temps de càrrega molt ràpids, com Netflix, Facebook i Amazon, utilitzen CDN.

4. Desfer-se dels connectors innecessaris

Si teniu un lloc que s'executa amb WordPress o una plataforma similar que es basa en connectors per obtenir una funcionalitat addicional, aquests connectors podrien estar reduint la capacitat de resposta del vostre lloc, afectant les seves mètriques d'interactivitat i arrossegant les vostres puntuacions de rendiment de Lighthouse 3.0.

Alguns connectors poden ser vitals per al vostre lloc, com ara el vostre processador de pagaments, però d'altres potser ja no serveixen per gaire. Molts connectors consulten servidors de tercers per obtenir informació, cosa que podria alentir encara més les coses. En una enquesta recent de DigWP, més de 900 professionals de WordPress van indicar el nombre de connectors que solen veure com el llindar de "massa", i el 75% dels enquestats estan d'acord que 25 és el límit. Més d'un terç dels enquestats van recomanar 10 com a límit.

llista de connectors

Els complements addicionals poden provocar una inflació de la base de dades, ampliant gratuïtament el pes del vostre lloc, fent-lo molt més lent de càrrega, de manera que com menys en tingueu, millor.

5. Elimineu les regles CSS que no feu servir

Les regles CSS del vostre lloc es defineixen al fitxer main.css. També s'anomena full d'estil extern, perquè s'emmagatzema per separat de l'HTML del lloc. Perquè el vostre lloc carregui First Contentful Paint, que té un gran impacte en el rendiment segons la nova versió de Lighthouse, primer ha de recuperar, analitzar i processar cada full d'estil CSS per determinar com es mostrarà el contingut.

Com a resultat, és inevitable que cada fitxer CSS addicional alenti el temps de càrrega de la pàgina i afecti una mica més el rendiment. Per a cada fitxer, el navegador ha d'accedir-hi, descarregar-lo i només llavors pot representar la pàgina.

Regles CSS

Font de la imatge

Minimitzar els vostres fitxers CSS amb un connector com Fast Velocity Minify pot ajudar molt amb les vostres puntuacions Lighthouse, però podeu fer més per assegurar-vos que els temps de càrrega de CSS no us frenin. L'eliminació de totes les definicions de CSS no utilitzades accelera encara més les coses i optimitza el rendiment del vostre lloc web per obtenir millors puntuacions de Google.

Seguir els criteris de velocitat de Google millora el rendiment

La introducció i el desenvolupament continu de Lighthouse 3.0 s'han de veure com un recordatori més de la importància d'optimitzar el vostre lloc segons els criteris de velocitat més recents de Google. En desfer-se de les regles i els connectors CSS que no necessiteu, utilitzant CDN i formats d'imatge de nova generació i aprofitant al màxim la càrrega mandrosa, podeu racionalitzar el vostre lloc, reduir el temps de càrrega de la pàgina i millorar el rendiment per mantenir-vos a Google. bons llibres.

Sobre l'autor

Gabrielle Sadeh, consultora, especialista en xarxes socials i blogger amb seu a Tel Aviv, ajuda les marques a compartir la seva veu i a escalar els seus negocis mitjançant potents estratègies de màrqueting digital. La millor manera de posar-se en contacte amb ella és mitjançant el seu perfil de LinkedIn.

Articles Relacionats

답글 남기기

이메일 주소는 공개되지 않습니다.

Torna al botó superior