Com utilitzar l’eina de prova de velocitat de GTmetrix + millorar el vostre punt de pàgina GTmetrix PageSpeed ​​a WordPress

Com utilitzar l’eina de prova de velocitat de GTmetrix + millorar el vostre punt de pàgina GTmetrix PageSpeed ​​a WordPress

Com utilitzar l’eina de prova de velocitat de GTmetrix + millorar el vostre punt de pàgina GTmetrix PageSpeed ​​a WordPress
СОДЕРЖАНИЕ
02 июня 2020

Si voleu millorar el rendiment del vostre lloc de WordPress, heu de saber on esteu ara mateix. Això és el que us ajuda l’eina de prova de velocitat de GTmetrix.


Amb GTmetrix, connecteu l’URL del vostre lloc i GTmetrix retorna les mètriques de rendiment actuals, juntament amb puntuacions, recomanacions i eines d’anàlisi per ajudar-vos a optimitzar el rendiment del vostre lloc..

Però hi ha molta informació continguda en aquests informes, de manera que podeu aprofitar-la al màxim per agilitzar el vostre lloc?

Això és el que tractarem al tutorial de proves de velocitat de GTmetrix. En aquesta publicació:

  • ✅ Porteu-vos a través de tot allò que ofereix l’eina de rendiment de GTmetrix
  • ✅ Indiqueu com millorar les puntuacions de GTmetrix (i quina importància heu de posar en aquestes puntuacions al primer lloc)
  • ✅ Es mostren algunes de les eines d’anàlisi avançades, com l’anàlisi de les cascades

Com utilitzar l'eina de prova de velocitat de GTmetrix

Informació bàsica i preguntes freqüents sobre GTmetrix

Abans d’introduir-nos en la mica de pes, fem una informació i preguntes bàsiques sobre què ofereix GTmetrix i com funciona.

Què ofereix la prova de velocitat de GTmetrix?

El test de velocitat de GTmetrix us ajuda a valorar el rendiment del vostre lloc web de diverses maneres diferents.

A un nivell alt, us permet veure el temps que triga el vostre lloc a carregar-se.

Però llavors també us ajuda a analitzar per què el vostre lloc es carrega d’aquesta manera i com podeu millorar-lo. A aquest efecte,

  • Qualifica el lloc amb dues mètriques diferents – Google PageSpeed ​​i YSlow.
  • Proporciona un quadre de cascada i anàlisi de calendaris per permetre-vos veure com es carrega cada sol·licitud individual i on es troben els colls d’ampolla potencials.
  • Fa gravacions de vídeo de manera que pugueu veure com el vostre lloc es carrega als visitants.
  • Registra els resultats de les proves històriques durant els darrers 30 dies perquè pugueu analitzar com canvia el rendiment del vostre lloc amb el pas del temps.

D’on provenen les puntuacions de GTmetrix?

GTmetrix no té el seu propi mecanisme de puntuació. En canvi, genera les seves puntuacions mitjançant dos mètodes de tercers:

  • Google PageSpeed – es tracta d’un conjunt de 26 regles diferents. Cada regla obté la seva pròpia puntuació i es pesa de manera diferent. La puntuació global és d’on prové la puntuació general de PageSpeed.
  • YSlow – YSlow és un projecte de codi obert de Yahoo (recordeu Yahoo?) Que qualifica el vostre lloc web amb 19 regles diferents. Igual que PageSpeed, la vostra puntuació general prové del resultat ponderat de totes aquestes regles individuals.

Les puntuacions de GTmetrix són importants?

sí i no.

Aquí està el "Sí" part:

Heu de prestar atenció a les puntuacions de GTmetrix, perquè tenir puntuacions baixes significa que probablement no heu implementat bones pràctiques importants de rendiment frontal..

Però aquí hi ha "No" part:

Als vostres visitants no els interessa les puntuacions de GTmetrix, però els preocupa el temps que es triga a carregar-se i convertir-se en interactiu.

Tenir un lloc web de WordPress que es carrega en menys de dos segons i que té puntuacions de GTmetrix als 70, és molt millor que tenir un lloc web de WordPress que triga quatre segons a carregar-se, però obté 100 punts perfectes..

Bàsicament, presteu atenció a les puntuacions perquè us donaran una ràpida estimació de com s’optimitza el vostre lloc, però no us obsessioneu perquè, al final del dia, l’únic que importa és la rapidesa amb què es carrega el vostre lloc web..

Un lloc web amb puntuacions GTmetrix baixes pot carregar-se ràpidament?

Sí, absolutament.

Aquí hi ha una de les principals raons per les quals:

Ambdues puntuacions de GTmetrix (PageSpeed ​​i YSlow) es preocupen principalment per les optimitzacions de rendiment frontal, com ara l’optimització de les imatges i el que sembla el codi..

Tot i això, l’optimització del rendiment final és tan important, si no és més. Això inclou aspectes com és de bo el proveïdor d’allotjament i l’arquitectura del servidor (per exemple, utilitzant Nginx vs Apache).

Si el vostre rendiment final és horrible, el vostre lloc encara es pot carregar lentament, fins i tot si teniu puntuacions GTmetrix perfectes. De la mateixa manera, si trieu excel·lent allotjament de WordPress, el vostre lloc pot carregar-se bastant ràpid, encara que tingueu puntuacions baixes de GTmetrix.

Per obtenir els millors resultats, cal optimitzar el rendiment de front-end i el de back-end.

Puc fer una prova de velocitat mòbil GTmetrix?

Sí! I és molt recomanable provar el rendiment d’escriptori i el mòbil, ja que la majoria de la gent navega pel web en dispositius mòbils en aquests dies.

Bàsicament, entendre com es carrega el vostre lloc per als visitants d’escriptori és només la meitat de la batalla; també voleu provar com és per als dispositius mòbils.

Els dispositius mòbils poden tenir diferents patrons. Per exemple, es necessitarà un telèfon mòbil de baix consum per obtenir més temps del JavaScript que no pas fins i tot a un escriptori barat. De manera que si el vostre lloc té JavaScript intensament, pot tenir un efecte més gran en les vegades de càrrega de la pàgina mòbil que les vegades de càrrega de l’escriptori.

Vostè no sabrà que, a menys que provi específicament el rendiment del mòbil.

Per poder fer proves de velocitat mòbils de GTmetrix, us heu de registrar en un compte gratuït, més informació en un segon.

Com executar una prova de velocitat de GTmetrix

La manera més senzilla d’executar una prova a GTmetrix és simplement aneu a la pàgina principal de GTmetrix, connecteu l’URL del vostre lloc i feu clic a Posa a prova el teu lloc:

Prova anònima de GTmetrix

Tanmateix, us recomanaria que, en lloc de fer-ho, us inscriviu a un gratuït Compte de GTmetrix abans d’executar una prova.

Amb la versió pública de la prova, la prova de velocitat utilitzarà sempre la configuració següent:

  • Prova de Vancouver, Canadà
  • Navegador Chrome a l’escriptori
  • Connexió sense detecció

Però si us registreu a un gratuït compte, podeu canviar totes aquestes condicions per adaptar-vos a les vostres necessitats.

Per exemple, si la majoria dels vostres visitants són del sud-oest dels Estats Units, podríeu canviar la ubicació de la prova a Dallas, Texas per tenir una millor idea del rendiment del vostre públic objectiu..

Més enllà de canviar les ubicacions de prova, és aquí on teniu l’opció d’utilitzar un dispositiu de prova mòbil o canviar la velocitat de connexió (per exemple, simular una connexió 3G més lenta contra una connexió per cable ràpida).

Un cop us registreu al vostre compte gratuït, podreu ampliar-lo Opcions d’anàlisi per configurar més sobre com funciona la prova:

Opcions avançades de configuració de proves

Un cop GTmetrix faci la prova segons les vostres condicions, tornarà a escopir una pàgina de resultats amb:

  • Un resum breu a la part superior que conté les puntuacions de rendiment i els detalls bàsics de la pàgina
  • Resultats detallats, dividits en sis pestanyes

Resum dels resultats

Anem a passar les sis pestanyes …

1. Pestanya PageSpeed

El Pàgina de velocitat la pestanya és la pestanya activa per defecte quan executeu una prova GTmetrix. Qualifica el lloc web segons les normes PageSpeed ​​de Google.

Per a cadascuna de les 26 regles, el vostre lloc web obtindrà una puntuació de 0 a 100. A continuació, GTmetrix afegeix aquestes puntuacions per generar la puntuació general de PageSpeed.

Les 26 regles no tenen una ponderació uniforme, de manera que algunes tindran un efecte més gran en la puntuació general que d’altres.

Si feu clic a la fletxa per ampliar una de les regles, veureu més detalls sobre els elements específics del vostre lloc que provoquen problemes:

Pestanya Prova de velocitat GTmetrix PageSpeed

A continuació es mostren alguns dels problemes més habituals de PageSpeed ​​i com solucionar-los per millorar la vostra puntuació …

Optimitzar les imatges

Comprimir les imatges us permet reduir la mida del fitxer amb una pèrdua de qualitat nul·la o mínima, segons l’algorisme de compressió.

Per optimitzar i comprimir automàticament totes les imatges del lloc de WordPress, podeu fer servir el connector Optimole:


Optimització d’imatges & Lazy Load d’Optimole Optimització d’imatges & Càrrega pereç d’Optimole

Autor (a): Optimol

Versió actual: 2.3.1

Darrera actualització: 21 d’abril de 2020

optimole-wp.zip


96% de valoracions


50.000 + instal·lacions


WP 4.7 + Requereix

Aprofita la memòria cau del navegador

La memòria cau del navegador accelera els temps de càrrega emmagatzemant certs actius estàtics als navegadors locals dels visitants. Això significa que, a les visites posteriors, els navegadors dels visitants poden servir aquests actius dels ordinadors locals dels visitants en lloc de descarregar-los en cada visita..

Molts complements de memòria cau de WordPress ja ofereixen memòria cau del navegador, inclosos WP Super Cache, WP Rocket i WP Fastest Cache.

Serviu imatges a escala

Una imatge a escala és una imatge perfectament dimensionada per a les dimensions per a les que l’utilitzeu una publicació completa sobre el concepte d’imatges a escala a ThemeIsle.

Una forma fàcil de servir imatges escalades a WordPress és, una vegada més, el connector Optimole – automàticament pot fer el treball per a que les imatges sempre estiguin perfectament escalades, independentment de quin dispositiu estigui utilitzant un visitant.

Especifiqueu les dimensions de la imatge

Es tracta d’HTML: voleu especificar l’amplada i l’alçada real d’una imatge quan l’incrusteu.

Per exemple…

No és òptim:

Imalptim:

WordPress ho farà de manera predeterminada quan inseriu imatges a l’editor, però voldreu assegurar-vos que especifiqueu les imatges que feu servir en un altre lloc (com en un complement).

Minimitzar HTML, CSS i JavaScript

Tècnicament es tracta de tres regles diferents, però les confecciono perquè el concepte bàsic és el mateix.

La minificació implica eliminar els caràcters innecessaris del codi del vostre lloc sense canviar-ne la funcionalitat. Per exemple, suprimir espais blancs i salts de línia.

Alguns complements de rendiment de WordPress, com Coet WP, incloure la minificació. També podeu utilitzar el format Plugin automàtic gratuït per minimitzar el codi del vostre lloc.


Autoptimitza Autoptimitza

Autor (a): Frank Goossens (futtta)

Versió actual: 2.7.2

Darrera actualització: 21 de maig de 2020

autoptimize.2.7.2.zip


94% de valoració


1.000.000 + instal·lacions


WP 4.9 + Requereix

Eviteu les redireccions de pàgines de destinació

Les redireccions d’URL són útils per dirigir el trànsit. Tanmateix, voleu evitar-ne l’ús, si és possible, perquè alenteu el vostre lloc web.

Per solucionar-ho, assegureu-vos que tots els vostres enllaços interns es dirigeixin directament a l’URL actual; no us confieu en redireccions per solucionar les coses. Per exemple, si redirigiu automàticament http://yoursite.com a https://yoursite.com per forçar l’ús SSL, assegureu-vos que sempre enllaçeu amb la versió HTTPS del vostre lloc per evitar redireccions innecessàries..

Diferir l’analisi de JavaScript

Quan parleu de temps de càrrega de pàgines, la rapidesa amb què es fa visible el vostre lloc web és tan important com si no és més important que el temps que triga tot el vostre lloc a carregar-se..

JavaScript pot disminuir això obligant els navegadors dels visitants a fer una pausa en la reproducció de la pàgina per descarregar i analitzar JavaScript. És per això que sovint el veieu anomenat JavaScript de bloqueig de renders.

Per solucionar-ho, haureu d’intentar diferir l’anàlisi de JavaScript de manera que el vostre lloc només comenci a carregar o analitzar aquest JavaScript un cop ja s’ha carregat la part visible del vostre lloc web..

WP Rocket inclou una eina integrada per ajudar-vos a fer-ho. També podeu utilitzar el format Plugin de JavaScript gratuït Async, que prové del mateix desenvolupador del connector Autoptimize.


Async JavaScript

Autor (a): Frank Goossens (futtta)

Versió actual: 2.20.03.01

Darrera actualització: 1 de març del 2020

async-javascript.2.20.03.01.zip


92% de valoració


100.000 + instal·lacions


WP 4.6 + Requereix

Combina imatges mitjançant sprites CSS

Aquesta és una tècnica avançada que us permet combinar diversos fitxers d’imatges en un sol fitxer mitjançant CSS. Això us permet reduir el nombre de peticions HTTP necessàries per carregar la vostra pàgina.

No heu d’utilitzar sprites CSS per a totes les vostres imatges perquè hi ha implicacions negatives de SEO i d’accessibilitat (ja que ja no podeu afegir text alt d’imatge). En lloc d’això, només heu d’utilitzar sprites CSS per a imatges decoratives, com ara logotips dels vostres clients o icones de compartició social.

Malauradament, no hi ha cap plugin per configurar automàticament sprites CSS; heu de fer-ho manualment. Aquí teniu com.

Habilita la compressió

Ja hem parlat de compressió d’imatges abans, però això "compressió" es refereix a comprimir tots els fitxers del vostre lloc web a nivell de servidor amb una cosa que es diu compressió Gzip.

De mitjana, la compressió Gzip pot reduir la mida dels fitxers del vostre lloc en un 70% aproximadament..

Molts complements de rendiment de WordPress us poden ajudar a activar la compressió Gzip, inclosos WP Rocket, WP Super Cache i WP Fastest Cache. O bé, podeu utilitzar el senzill i gratuït Activa el complement de compressió Gzip per obtenir una solució dedicada.


Activa la compressió Gzip

Autor (a): Moki-Moki Ios

Versió actual: 1.0.3

Darrera actualització: 8 de maig de 2020

enable-gzip-compression.1.0.3.zip


86% de valoració


20.000 + instal·lacions


3.0.1 Requereix

2. Pestanya YSlow

La puntuació YSlow segueix un enfocament similar al de la vostra puntuació PageSpeed, només utilitza un conjunt de regles diferents per contrastar. La llista és una mica més petita: la pestanya YSlow de GTmetrix conté només 19 regles.

Igual que la puntuació de PageSpeed, cada regla obté la seva pròpia puntuació i la puntuació general es basa en la mitjana ponderada d’aquestes puntuacions.

Pestanya YSlow de prova de velocitat GTmetrix

A continuació es mostren algunes de les recomanacions més habituals que trobareu …

Utilitzeu una xarxa de lliurament de contingut (CDN)

Un CDN accelera els temps de càrrega de les pàgines del vostre lloc proporcionant el contingut estàtic del vostre lloc des d’una xarxa de servidors de tot el món. Més informació en aquesta publicació.

Per publicar les vostres imatges mitjançant un CDN, podeu fer servir el connector gratuït Optimole. Per utilitzar un CDN per a tots els fitxers estàtics del vostre lloc, Flama de núvols també és una bona opció.

Comparació dels millors serveis CDN ��

Minimitzar JavaScript i CSS

Ja ho vaig tractar a la secció PageSpeed. Podeu minimitzar el vostre CSS i JavaScript amb un complement dedicat com Autoptimize. O, molts complements de rendiment de WordPress també inclouen les seves pròpies funcions de minificació.

Comprimir components

Això és el mateix que la "Habilita la compressió" recomanació a la pestanya PageSpeed. Podeu arreglar-lo habilitant la compressió Gzip.

Molts complements de memòria cau de WordPress inclouen una funció de compressió Gzip. També podeu utilitzar el dedicat Activa el complement de compressió Gzip.

Eviteu les redireccions d’URL

Això és el mateix que la "Eviteu les redireccions de pàgines de destinació" a PageSpeed.

Proveu d’enllaçar sempre amb l’URL actual d’una pàgina en lloc de confiar en redireccions per traslladar les persones al destí correcte.

Reduir les cerques DNS

Els navegadors dels visitants han de realitzar una cerca DNS per a cada domini del qual el contingut del vostre lloc.

Sempre tindreu almenys una cerca DNS per al vostre lloc. Però si utilitzeu serveis externs al vostre lloc (com ara Google Fonts o el script de seguiment de Google Analytics), aquests tindran com a resultat cerques addicionals de DNS..

Dues solucions són:

  • Elimineu el servei extern si no cal
  • Proveu d’allotjar-vos de forma autònoma el contingut si és possible, com ara allotjar Google Fonts al vostre servidor en lloc de confiar en el CDN de Google Fonts.. Aquest complement us pot ajudar.

Feu menys sol·licituds HTTP

Veureu les sol·licituds HTTP amb més detall a la secció Cascada secció de pestanyes (que és la següent).

3. Pestanya cascades

El Cascada la pestanya està una mica avançada, però és una eina molt útil per comprendre com es carreguen les diferents parts del vostre lloc i on poden haver-hi petits colls d’ampolla que alenteixen tot el vostre lloc..

Quan obriu el document Cascada , veureu una llista de totes les sol·licituds HTTP per a aquesta pàgina "Sol·licituds" del resum de resultats de GTmetrix).

Cada objecte de la pàgina és una sol·licitud HTTP independent. Per exemple:

  • Cada imatge és una sol·licitud HTTP (tret que s’utilitzin sprites CSS!)
  • Cada fitxer CSS o JavaScript és una sol·licitud HTTP
  • Els scripts externs que carregueu (com Google Analytics) també seran almenys una sol·licitud HTTP
  • Etc.

Totes les coses iguals, menys sol·licituds HTTP generalment significa un lloc web de càrrega més ràpida.

A més, com veureu quan mireu la llista, cada sol·licitud HTTP requereix un temps diferent per carregar i carregar en un ordre diferent (alguns fins i tot bloquejaran d’altres), de manera que si podeu trobar i eliminar la càrrega lenta Sol·licituds HTTP, podeu fer una gran diferència en els temps de càrrega de la pàgina del vostre lloc.

Podeu veure els detalls de cada sol·licitud HTTP quan el passeu per sobre. Per exemple, aquesta imatge de cigrons marroquins trigava 102,4 ms a carregar-se:

Anàlisi de la cascada de la prova de velocitat GTmetrix

També podeu utilitzar les opcions de filtre i de cerca a la part superior per cercar sol·licituds HTTP específiques. Per exemple, si cerqueu contingut wp-content / plugins, podeu trobar les sol·licituds HTTP que s’afegeixen als plugins del vostre lloc de WordPress..

Fins i tot, podeu excavar més dades per cercar sol·licituds de plugins específics. Per exemple, cercar wp-content / plugins / elementor us mostrarà totes les sol·licituds el complement del creador de pàgines d’Elementor:

Buscant l’anàlisi de la cascada

Si trobeu que un complement afegir moltes sol·licituds HTTP de càrrega lenta i no us proporciona gaire benefici, potser voldreu plantejar-vos suprimir-lo i trobar una alternativa millor.

4. Pestanyes Temps, vídeo i Historial

Agruparé les tres darreres pestanyes de la prova de velocitat de GTmetrix junts perquè probablement no les faràs servir sovint i no crec que necessitin un desglossament profund.

Cronometrats

El Cronometrats la pestanya us proporciona més detalls sobre el temps que es triga a assolir diverses mètriques de temps de càrrega. També podeu trobar aquesta informació al gràfic Waterfall – the Cronometrats només fa que sigui més fàcil visualitzar-la.

Si passeu una de les mètriques, GTmetrix mostrarà a continuació una descripció que us indica què significa:

Pestanya Cronologia

Vídeo

Si heu activat els vídeos de càrrega de pàgina quan vau iniciar la prova, podreu veure els vídeos a la secció Vídeo fitxa.

També podreu retardar-los fins a un quart o quart de la velocitat original per veure les coses amb més detall.

Els vídeos són útils perquè us permeten veure no només quan es carrega el vostre lloc, sinó també com es carrega el vostre lloc. Per exemple, quines parts del vostre lloc primer són visibles? Hi ha algun problema estrany durant la càrrega com a "flash de contingut no estilat"? Són coses útils a saber, ja que optimitzes el rendiment del teu lloc.

Història

Finalment, si proveu una pàgina diverses vegades, el Història la pestanya us permet veure els resultats de les proves anteriors per analitzar com han canviat les coses amb el pas del temps.

Emmagatzemarà totes les proves d’aquesta pàgina durant els darrers 30 dies. Després d’això, se suprimeixen els resultats de les proves històriques.

Per exemple, si feu alguns retocs per millorar els resultats de les proves de velocitat de GTmetrix, podríeu veure com aquests canvis es tradueixen en millores en el temps de càrrega de la pàgina real:

Resultats històrics de la prova de velocitat de GTmetrix

Obteniu més coses amb la prova de velocitat de GTmetrix

Si voleu aprofitar al màxim l’eina de prova de velocitat de GTmetrix, haureu d’anar més enllà del quadre de resum i aprofundir en els detalls següents.

No voldreu estar massa pendent de les puntuacions de rendiment de GTmetrix, però els suggeriments que inclouen les puntuacions proporcionen una guia útil sobre les àrees en què pot faltar l’optimització del rendiment del vostre lloc web..

A més, la secció Cascada la pestanya és una bona eina per aprofundir en aspectes específics del rendiment del vostre lloc, com ara trobar imatges, scripts o plugins que tinguin un efecte inadequat en els temps de càrrega de la pàgina del vostre lloc..

Si voleu aprofundir en el rendiment de WordPress amb més detall, consulteu la nostra col·lecció d’11 maneres d’accelerar WordPress.

Tens alguna pregunta persistent sobre com provar el teu lloc web amb GTmetrix? Deixa un comentari i intentarem ajudar-te.

No oblideu unir-se al nostre curs d’accidents per agilitzar el vostre lloc de WordPress. Amb algunes solucions senzilles, podeu reduir fins i tot un 50-80% del temps de càrrega:

Maquetació i presentació de Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector