Google PageSpeed Insights: com millorar la nota i arribar a 100

Kiwop / Blog / Marketing Online / Google PageSpeed Insights: com millorar la nota i arribar a 100

Tots coneixem la prova de velocitat de Google PageSpeed Insights. Com haurà experimentat, aconseguint una nota de 100 en aquesta prova de velocitat de Google no és tasca fàcil. De fet, moltes empreses estan buscant desesperadament elevar la seva nota en aquesta prova sense gaire èxit. Això és perquè Google posa requisits força alts en la mesura que tenen una bona puntuació.

En aquest article us expliquem com és possible obtenir una nota de 100. I, a més, és possible fer-ho no en un lloc web senzill i bàsic sense massa funcionalitats, però podem aconseguir-ho en un lloc web bastant complet: aquest que estàs veient ara mateix:)

Índex de continguts

Què és i què és el test de Google PageSpeed Insights

PageSpeed Insights és una eina desenvolupada per Google que Mostra el rendiment d’una pàgina o lloc web. Els resultats es divideixen en dos: la versió mòbil (mòbil) i la versió d’escriptori (Desktop). A més de donar-nos una puntuació del nostre lloc web, Google ens Mostra els motius pels quals ens puntua d’aquesta manera i ens dóna una sèrie de consells per millorar aquesta nota.

Google divideix les optimitzacions en tres grans categories a l’hora de classificar un lloc web:

  • Quick web-la puntuació en la prova Mostra que la web està en el terç superior de les pàgines més ràpides.
  • Web normal: la web es troba en el terç mitjà de les pàgines més ràpides d’Internet.
  • Web lenta: la web es troba en el terç més lent de les pàgines d’Internet.

La puntuació que ens mostra Google és un valor que va del 0 al 100. Una nota propera a 100 significa que la pàgina és extremadament ràpida i que no hi ha coses que optimitzar. I una nota propera a 0 significa que hi ha molta feina per fer a la pàgina web.

Pel que feia a la nota, Google divideix la partitura:

  • Bona nota: puntuació de 80 o superior.
  • Nota mitjana: puntuació entre 60 i 79.
  • Nota baixa: puntuació entre 0 i 59.

Per què és important tenir un lloc web ràpid

Segons Google,els usuaris de 53 deixen una pàgina web si triga més de 3 segons a carregar-se. És a dir, si el vostre lloc web no es carrega en menys de 3 segons, més de la meitat dels usuaris aniran a un altre lloc web (i podran fer-ho a una de les competicions).

I, si això no fos suficient, l’estudi també demostra que per cada segon de càrrega d’un lloc web, les conversions també disminueixen. Concretament, un 20 menys conversions per cada segon que passi.

Amb això, tenir un lloc web ràpid i optimitzat, farà que els teus usuaris tinguin una gran experiència d’usuari. I això significarà moltes més conversions.

Si un lloc web triga més de 3 segons a carregar-se, es perdran més de 53 visitants, i amb cada segon de retard en el temps de càrrega, el percentatge de conversions de pàgina es reduirà en més de 20.

Font: Google

La velocitat d’un lloc web no només és necessària per a una botiga en línia. Ja que sembla clar que tenir un eCommerce ràpid ens permetrà incrementar les vendes. També és necessari per a llocs web corporatius. Atès que cada lloc web està buscant per convertir, ja sigui per ser comprat, en contacte o anomenat. O simplement per mostrar de manera eficient qui som o què fem. En tots aquests casos necessitem tenir un lloc web ràpid i eficaç.

Consells per obtenir una nota 100 a Google PageSpeed Insights

Els factors que influeixen en posar notes a la prova de Google són diverses i diverses. Aquí tens alguns exemples per ajudar-te a millorar la teva qualificació.

Totes les tècniques detallades aquí són part de la WPO: optimització de rendiment web, és a dir, optimització de la velocitat del lloc web .

Quan parlem de WPO estem parlant bàsicament d’optimització web en termes de temps de càrrega i velocitat. Són una sèrie d’estratègies que són imprescindibles avui dia, ja que no serà de cap ús tenir un disseny molt atractiu si el lloc web no està optimitzat en termes de velocitat.

Optimitzar imatges

L’optimització de la imatge és un requisit indispensable per obtenir una bona nota de prova. És una de les principals causes de les notes baixes que s’utilitzen per veure. Una de les millors tècniques per optimitzar imatges és comprimir-les. Podeu reduir, de mitjana, 50 el pes de les imatges comprimint-les.

Si utilitzeu WordPress,un dels millors plugins per fer-ho sense invertir molt de temps en comprimir-los manualment és imatge de WP Smush. És un plugin que té molts functionalities en la seva versió lliure.

L’ús d’un connector d’optimització d’ imatges automàtica és indispensable especialment per als llocs web on hi ha diversos editors que publiquen de manera periòdica. D’aquesta manera, no importa quin editor carregui contingut amb imatges, ja que el connector optimitzarà automàticament totes les imatges que es carreguin al web.

A més, podeu configurar el connector de manera que només permeti les dimensions màximes de la imatge. És a dir, si la imatge té una dimensió més gran que els píxels que hem introduït, el connector redimensionarà automàticament la imatge.

Si no vol utilitzar un plugin nou o només el seu lloc web no es desenvolupa en WordPress o un altre CMS com Drupal que té un plugin similar, pot utilitzar eines en línia per comprimir i optimitzar imatges com optimizilla o qualsevol altra eina. És una eina gratuïta que et permet pujar fins a 20 imatges a la vegada.

Minimitzar i optimitzar el codi HTML

Un altre consell quan arriba a millorar velocitat de càrrega seria optimitzar codi de HTML. Encara que ho has de fer bé, perquè si no es fa correctament, aquesta acció podria Desconfigurar completament el frontend del teu projecte web.

El minificador de codi HTML és el procés d’eliminació de dades innecessàries o duplicades en el codi font d’un lloc web. Un codi mal programat pot ser la causa d’aquest problema, i es pot resoldre mitjançant l’auditoria del codi.

Una vegada més, hi ha molts plugins per a WordPress que li permeten minimitzar el codi HTML del seu lloc web.

Optimitzar el codi CSS

Un altre factor important és l’optimització del codi CSS. Típicament els arxius CSS són arxius externs que necessiten ser carregats.

Moltes vegades aquests arxius CSS contenen codi que no s’utilitza realment en les pàgines. Si una pàgina només està utilitzant un codi de 10 des d’un arxiu CSS, en realitat és la càrrega innecessàriament el 90 restant d’aquest arxiu.

El primer que hem de fer és:

  • Analitzi quin codi de CSS i/o arxiva són realment necessitats
  • Depurar el codi per intentar perdre el seu pes
  • En molts casos, inserir codi CSS directament a HTML podria ser una opció vàlida

Optimitza el codi JavaScript (JS)

Entre moltes coses, JavaScript li permet permetre que els blocs de pàgina interactiva i funcions de gran abast. El problema és que aquests guions alentir el lloc web molt i vostè ha de tenir cura de no abusar de massa d’ells.

El primer que cal fer és auditar el lloc web i eliminar qualsevol codi JavaScript que no sigui necessari per als requeriments que tenim des del nostre lloc web. Una vegada que només tenim els guions essencials, podem aplicar aquests 3 Consells:

  1. Els scripts que no són crucials haurien de carregar-se més tard,en lloc de carregar-se primer.
  2. Carregui tots els arxius de JavaScript externs asíncronament,més que sincrònicament. Els scripts carregats de forma sincrònica en pausa el procés de renderització de la pàgina, mentre que els scripts amb càrrega asíncrona permeten que el navegador carregui diversos elements al mateix temps.
  3. Consideri posar algunes funcions de JS dins(inline) la pàgina mateixa. Això ens permetrà reduir el nombre de sol·licituds que el seu navegador ha de fer.

Optimitzeu el servidor (Hosting)

Aquest és potser un dels punts més importants a tenir en compte en termes de velocitat. El servidor on està allotjat el nostre projecte web és de vital importància.

El temps de resposta del servidor és directament un factor de la nota de Google PageSpeed Insights. Aquest temps de resposta, segons Google, pot alentir en funció de diversos factors:

  • Nombre de consultes de base de dades
  • Enrutament lent
  • Utilització de determinats marcs
  • Ús de certes llibreries
  • Pocs recursos de la CPU
  • Pocs recursos de RAM

A més d’aquests factors, tenir un bon administrador del sistema que gestioni el nostre Hosting és molt important. D’aquesta manera, podeu configurar i instal·lar programari que permeti que el web es carregui molt més ràpidament. Com, per exemple, fer ús de sistemes de caché estàtics i dinàmics.

A Kiwop Optimitzem els servidors utilitzant nginx, vernís, redis Server, Memcache,etc…

Ja diuen que barat surt car. I és cert, tenir un Hosting barat pot ser molt car quan es tracta d’optimització i velocitat web.

Supervisar l’ús de connectors externs

Especialment si utilitzem WordPress, hem de mantenir un ull en l’ús de plugins externs. A Kiwop, cada nova característica que requereix desenvolupament web s’analitza molt abans de la seva implementació. En lloc d’utilitzar un connector extern nou per a cada requisit nou, el programem per ordenar sempre que sigui possible. Ja que quan el adaptem, només incloem les funcions que realment necessitem. En lloc d’això, els connectors externs inclouen moltes funcions que no es requereixen i el que fan és retardar el temps de càrrega de la pàgina.

Prioritza el contingut a la part superior d’una pàgina

Estrany, ja que pot semblar, la velocitat d’una pàgina no només es basa en el ràpid que es carrega. També té a veure amb el rendiment percebut. El rendiment percebut es podria definir com “com de de pressa apareix una web per carregar-se”. I això pot ser diferent del temps de càrrega real. El rendiment percebut té a veure amb la Perspectiva de l’usuari.

Per prioritzar aquest acompliment percebut és molt important prioritzar el contingut que és important per part de l’usuari. Per exemple, el text que hi ha a la part superior d’una pàgina s’ha de carregar abans del peu de pàgina. Un lloc web mal programat podria començar a carregar els trets de peu de pàgina i els blocs que l’usuari no veu a primera vista.

Desplega AMP

Amp és una tecnologia creada per Google que ofereix una experiència de càrrega de pàgines molt més ràpida en dispositius mòbils. AMP restringeix l’ús d’HTML i JS, augmentant considerablement la velocitat de les pàgines i, per cert, millorant el seu posicionament.

L’aplicació d’AMP ens permetrà incrementar la nota d’informació detallada de Google Page, especialment en dispositius mòbils. Encara que es tracta d’una tecnologia que s’ha de desenvolupar amb gran cura, ja que podria Desconfigurar completament qualsevol pàgina web.

Som experts en tecnologia AMP. De fet, tot el nostre lloc web és vàlid amp:

Resultat d’AMP vàlid per a Kiwop

Quina nota hem rebut de Kiwop a la prova de Google

Després de tots els consells teòrics que us hem donat, suposem que el que realment us importa és si aquests consells funcionen. Treballen. A Kiwop obtinem 89 notes a la versió mòbil i a la nota màxima, 100, a la versió d’escriptori de Google PageSpeed Insights. No ho creus? Aquí és el judici en la versió de taula de treball:

Nota a la prova de velocitat de la versió de l’escriptori Google PageSpeed Insights

I aquí també mostrem la prova de la nota obtinguda en la versió mòbil,ja que la majoria de la gent sempre oblida mostrar aquesta nota ja que és molt inferior a la nota de la versió de l’escriptori:

Nota a la prova de velocitat mòbil de Google PageSpeed Insights

Prengui la prova vostè mateix: aneu a la pàgina de Google PageSpeed Insights,al camp URL poned https://www.kiwop.com i ho veurà amb els seus propis ulls:)

Voleu que el Kiwop Optimitzi el vostre lloc web per millorar la nota de prova de Google? Hem d’avisar-vos que si voleu tenir les mateixes notes que nosaltres, haureu de dissenyar una nova pàgina web.

Conclusions

Segurament has posat molt d’esforç (en temps i recursos) per desenvolupar el teu web. Per tant, voleu que sigui el més perfecte possible. I tenir una alta velocitat és un factor important.

A més de la prova de Google, hi ha altres pàgines que ens permeten avaluar la velocitat de la nostra pàgina, com ara Gtmetrix (la nota és una combinació de PageSpeed i YSlow)o WebPageTest. En ambdues proves, la nostra pàgina també obté excel·lents resultats:

Resultats de la prova de velocitat GTmetrix per al lloc web de kiwop
Resultats de la prova de velocitat WebPageTest per al lloc web de kiwop

Com hem vist, cada imatge, element, etc… s’ha de tenir en compte a l’aconseguir una bona qualificació. Per això és important tenir desenvolupadors experts a l’hora de desenvolupar el vostre lloc web.

Arribar a una nota de 100 en la prova de velocitat de Google PageSpeed Insights pot donar-vos l’empenta que el vostre lloc web necessita per tenir èxit. A Kiwop estarem encantats d’ajudar-te!

Volem ajudar-te a obtenir resultats.

Deixa un comentari

Volem ajudar-te a obtenir resultats.
COMENCEM?