Per què el vostre lloc web es carrega lent (i com solucionar-lo): 22 passos que vaig obtenir per obtenir resultats 100% GTmetrix PageSpeed ​​i temps de càrrega instantània

Lloc web lent de càrrega


Tenir un lloc web de càrrega lenta?

Què passaria si us digués les càrregues del meu lloc <1s amb puntuacions 100% GTmetrix? I ja he escrit una de les guies de velocitat de WordPress més populars en línia amb més de 400 comentaris?

Algunes optimitzacions són específiques de WordPress, altres són universals. Però totes són bones pràctiques, fins i tot si feu servir plataformes Squarespace, Shopify, Wix i altres.

Si teniu preguntes o necessiteu ajuda, deixeu l’informe GTmetrix als comentaris i us donaré alguns indicadors. Tu pots també contracta el meu optimitzador de velocitat del lloc web si feu servir WordPress.

1. Posa a prova el teu lloc web a GTmetrix

GTmetrix et mostra:

  • Temps de càrrega (mètrica primària)
  • Quin imatges ha de ser optimitzat
  • Quin plugins carreguen lentament (consulteu la pestanya Cascada)
  • La seva temps per a desviar-se primer byte (indica la velocitat del vostre allotjament)
  • Ja sigui tu complement de memòria cau està fent feina (us recomano WP Rocket)
  • Tant si utilitzeu un xarxa d’entrega de contingut (Recomano Cloudflare)
  • Càrrega lenta recursos externs (Incrustacions d’AdSense, Maps, YouTube / Facebook)

Correccions ràpides?
L’allotjament és el factor número 1 a Guia oficial d’optimització de WordPress (de lluny). És possible que no millori les puntuacions de GTmetrix, però pot millorar els temps de càrrega en diversos segons, especialment si es passa d’un host lent (Bluehost, HostGator, GoDaddy) a un host ràpid (SiteGround, Núvols). Aquests dos amfitrions van obtenir la classificació més alta de més de 40 enquestes de Facebook que vaig recollir dels grups de Facebook.

Els plugins de caché tenen un impacte més gran en les puntuacions i també milloren els temps de càrrega. Coet WP és millor que la memòria cau W3 total o la memòria cau més ràpida del WP, ja que té més funcions (com ara la càrrega mandrosa, la neteja de bases de dades i l’optimització de Google Font + Analytics), mentre que altres plugins de memòria cau no.

Tutorial de vídeo de velocitat de WordPress
Si feu servir WordPress, he passat moltes hores creant aquest vídeo de 42 minuts en accelerar els llocs de WordPress. Podeu utilitzar els segments de temps a la descripció del vídeo per saltar a seccions específiques.

La prova està en el budell:

Informe 2019-GTmetrix

2. Canviar de mida d’imatges grans

Això és el que serveix imatges a escala significa GTmetrix.

Vol dir que pengeu imatges grans amb dimensions incorrectes. Cada secció del vostre lloc web té dimensions específiques (lliscants, miniatures, carrusel, amplada completa i imatges de barra lateral).

Per exemple, sé que el cos del contingut del meu bloc té una amplada de 680 píxels. Qualsevol imatge d’amplada completa que utilitzo per al meu bloc s’ha de redimensionar sempre a aquestes dimensions.

GTmetrix us mostra totes les imatges no optimitzades (i les dimensions correctes a les quals s’han de redimensionar), però només per a la pàgina única que feu la prova. Tot el que heu de fer és canviar la mida d’aquestes imatges i substituir l’antiga versió per la nova.

Servir imatges a escala

Bonificació: crear un full de trampes – anoteu les diferents mides d’imatges al vostre lloc web.

  • Logotip: 200 x 58px
  • Favicon: 16 x 16px
  • Lliscadors: 1903 x 400px
  • Imatges del carrusel: 115px
  • Imatges de widget: 420 x 250px
  • Imatges destacades: 250 x 250px
  • Imatges de la publicació del bloc complet: 680px
  • Imatge de Twitter de Yoast Twitter: 1024 x 512px
  • Imatge de Yoast Facebook OG: 1200 x 630px

Espai d’espai, Wix, i els temes de WordPress han d’incloure instruccions per canviar de mida d’imatges.

3. Comprimir les imatges

Això és el que optimitzar les imatges significa GTmetrix.

Hi ha moltes eines per fer-ho (faig servir el complement WordPress de ShortPixel). Assegura’t de traieu Dades EXIF perquè les imatges es carreguin encara més ràpidament, cosa que també es pot fer en algunes de les eines següents.

optimització d’imatges

Eines de compressió d’imatges

Perdré qualitat?
Fins i tot si escolliu compressió sense pèrdues, podreu notar una petita pèrdua de qualitat. És per això que el millor és provar prèviament un parell d’imatges i fer una còpia de seguretat si optimitzeu de forma massiva totes les imatges.

4. Afegiu la memòria cau

Si ho ets no utilitzeu WordPress, la vostra plataforma hauria de tenir cura caching, minificació, combinació d’arxius i altres optimitzacions a GTmetrix que normalment requeririen un complement.

Si utilitzeu WordPress, pregunteu-vos:

  • Feu servir un complement de memòria cau?
  • Quin complement de memòria cau utilitzeu?
  • L’heu configurat a la configuració òptima?

Aquests 3 factors tindran el major impacte en les vostres puntuacions a GTmetrix, Google PageSpeed ​​Insights i gairebé totes les eines de prova de velocitat. La memòria cau i el hosting són molt importants!

Quin complement de memòria cau és millor?
Recomano Coet WP que és un complement de memòria cau premium. Inclou moltes funcions que no inclouen altres plugins de memòria cau (neteja de bases de dades, control de batecs cardíacs, càrrega mandrosa, optimització de Google Fonts + Analytics, integració CDN). Si voleu utilitzar aquestes funcions amb altres plugins de memòria cau, haureu d’instal·lar uns 6 complements addicionals per tenir cura d’aquestes optimitzacions, mentre que WP Rocket té tot integrat. El complement de memòria cau gratuïta més proper que ho fa és Swift.

WP Rocket també es va classificar com a número 1 en diverses enquestes de Facebook:

Enquesta de plugins de memòria cau 2016 millor

Enquesta de complements de memòria cau 2019

Rocket Swift vs WP

Enquesta de complement de memòria cau 2016

Millor enllaç de memòria cau 2018

coet wp vs cache totla w3

5. Actualització a PHP 7.3

Això només s’aplica si heu comprat allotjament (per exemple, SiteGround, Bluehost, GoDaddy).

Actualització a PHP 7+ és molt simple i hauria de tenir un impacte significatiu en els temps de càrrega.

Punts de referència de PHP de WordPress

Pas 1: Inicieu la sessió al vostre compte d’allotjament i cerqueu el gestor de versions PHP (o similar).

Pas 2: Actualitzeu a la versió PHP més alta disponible al vostre compte d’allotjament (per exemple, PHP 7.3).

Pas 3: Proveu errors al vostre lloc web. Si en trobeu, probablement es deu a plugins de WordPress incompatibles, cas en què podeu fer servir Verificador compatible de PHP. Aquesta eina us mostrarà plugins incompatibles; els heu de suprimir o tornar a una versió PHP anterior.

Pas 4: Manteniu la versió PHP actualitzada. Si el vostre amfitrió llança una nova versió de PHP estable, utilitzeu-la.

6. Comproveu els temps de resposta del servidor

Google PageSpeed ​​Insights et diu si tens un ritme lent temps de resposta del servidor (Google recomana que sigui inferior a 200 metres). Els servidors estan, evidentment, controlats pel vostre hosting.

Reduir el temps de resposta del servidor

Com millorar el temps de resposta del servidor

  • Obtén un millor allotjament (per exemple, Cloudways o SiteGround)
  • Mantenir-se allunyat de Amfitrions EIG que són infamament lents
  • Assegureu-vos que teniu activada la memòria cau al vostre lloc web
  • Utilitzeu una xarxa de publicació de contingut com el CDN de Cloudflare
  • Elimineu tots els complements pesats i no utilitzats del vostre lloc web
  • Feu servir un proveïdor de DNS premium (obteniu-lo a través del vostre host)

7. Trieu l’allotjament adequat

L’allotjament és el factor número 1 de la velocitat del lloc web:

Molts tutorials tractaran de derivar-vos a Bluehost, HostGator, GoDaddy i Marques EIG.

Es tracta d’amfitrions de baixa qualitat, que probablement us generaran molts problemes: temps de resposta lents del servidor, temps d’aturada, versions obsoletes de PHP, vulnerabilitats de seguretat i mala assistència..

Feu la vostra investigació a grups de Facebook i mireu algunes enquestes que es van fer. També podeu veure persones que van emigrar cap a i des de determinades empreses d’allotjament i van publicar els seus resultats.

SiteGround i Núvols solen ser els números 1 i 2 en més de 40 enquestes de Facebook. SiteGround és adequat per a hosting compartit i Cloudways per a allotjament en núvol. Tots dos amfitrions ofereixen migracions de pàgines web gratuïtes.

Juliol de 2019 Recomanació d'allotjament

Recomanacions d'allotjament a Elementor

2017-WordPress-Hosting-FB-Poll

Enquesta de recomanació d'allotjament

WordPress-Host-Poll-Aug-2018

Shared-Hosting-Poll-2017

2019-Hosting-Poll

Empresa de hosting

WordPress-Hosting-Poll-2017

Recomanacions d'allotjament 2018

Allotjament favorit per a Elementor

2016-WordPress-Hosting-FB-Poll

Enquesta d’allotjament de WordPress

Enllaç de WordPress WordPress, setembre de 2018.png

Managed-WordPress-Hosting-Poll-2017

2019-Hosts-Poll-1

Hosting-Poll-For-Speed

WordPress-Hosting-Poll-1 de juny

Migrar a un allotjament més ràpid fa una gran diferència:

Canvi a SiteGround

Migració del temps de càrrega del lloc web

Bluehost a SiteGround GTmetrix

HostGator a SiteGround

SiteGround Google PageSpeed ​​Insights

Temps de càrrega del SiteGround GoGeek

Temps de càrrega reduïts amb SiteGround

Nous temps de resposta de SiteGround

Temps de resposta de Cloudways

HostGator cap a SiteGround Migració

Temps de resposta del lloc a Joomla

Canvia a Hosting SiteGround

SiteGround Rocket Imagify Combo

SiteGround PageSpeed ​​Insights

Migració de blocs de SiteGround

Nou temps de resposta de SiteGround

Millora del temps de resposta de SiteGround

Sense títol

8. Afegiu el CDN de Cloudflare

A CDN (xarxa de lliurament de contingut) significa que el vostre lloc web està allotjat en diversos centres de dades de tot el món. Això redueix el distància geogràfica entre el servidor i el visitant, mentre descarregueu recursos a aquests centres de dades (alleugeriu la càrrega al vostre propi servidor). Fins i tot podeu utilitzar diversos CDN com StackPath o KeyCDN que afegeix encara més centres de dades.

Recomanació CDN-WordPress

Flama de núvols és gratuït i té 200 + centres de dades que està molt per sobre de la majoria de CDN premium.

Pas 1: Comproveu si el vostre host us permet activar Cloudflare al vostre compte. Si ho fan, activeu Cloudflare, ja havíeu acabat. Si no ho són, haureu de canviar els servidors de noms a partir del pas 2.

Pas 2: Registra’t a Cloudflare, tria el pla gratuït, afegeix el teu lloc web i deixa que Cloudflare realitzi la seva exploració. Cloudflare us dirigirà per un conjunt de pàgines fins que us assignin 2 servidors de nom.

Pas 3: Inicieu la sessió al registre del vostre domini i trobeu l’opció de configurar servidors de noms personalitzats (Google “namesevers personalitzats a l’empresa d’allotjament XYZ)”. Substituïu aquests servidors de noms per Cloudflare.

9. Desactiva l’aplicació en línia

Si teniu imatges d’alta qualitat al vostre lloc web, pot ser que els tinguin “en préstec” per utilitzar-les al seu propi lloc. Però en lloc de desar i carregar les imatges, les persones les copiaran i enganxaran del vostre lloc a les seves. Això vol dir que allotgeu aquestes imatges al vostre servidor (no és bo).

Podeu activar la protecció de connexió en línia Flama de núvols o sovint, a la vostra compte d’allotjament. D’aquesta manera, s’evita que les persones utilitzin els seus recursos de servidor preciosos copiant / enganxant les imatges.

Protecció d’enllaç directe de núvols incloents

10. Minimitzar fitxers

GTmetrix us indica que minifiqueu els fitxers HTML, CSS i JavaScript.

El vostre connector de memòria cau ha de tenir cura d’aquest (si no, assegureu-vos que la seva configuració estigui habilitada).

11. Combina fitxers

Si teniu diversos fitxers CSS o JavaScript, proveu de combinar-los en un sol fitxer.

Com menys fitxers CSS i JavaScript tinguis, menys sol·licituds es carregaran al vostre lloc web.

Pas 1: Cerqueu els fitxers CSS (o JavaScript).

Pas 2: Copieu i enganxeu el contingut perquè estiguin tots en un sol fitxer.

O bé, la majoria de plugins de memòria cau tenen l’opció de combinar CSS + JavaScript:

Minimiteu Combinar fitxers JavaScript

12. Eviteu els complements pesats

Si utilitzeu plugins de WordPress, extensions de Joomla o qualsevol “complement” que afegeixi funcionalitat al vostre lloc web, assegureu-vos que no s’afegiran als vostres temps de càrrega (utilitzeu GTmetrix com a punts de referència).

Els complements lents més comuns es relacionen amb carteres, control lliscant, compartició social, creadors de pàgines, xat en directe, calendaris, estadístiques (analítiques), formulari de contacte o connectors de publicacions relacionats..

Com trobar complements lents al vostre lloc web
Si veieu el mateix complement que apareix diverses vegades al informe GTmetrix i té temps de càrrega elevats a la pestanya Cascada, considereu suprimir-lo i substituir-lo per un complement més lleuger. Per a WordPress, també podeu utilitzar Monitor de consultes per veure els vostres complements de càrrega més lenta.

Bonus: Inhabiliteu de manera selectiva els complements
Utilitzeu un complement com Gestor d’actius per desactivar selectivament els plugins que s’executen en determinades pàgines. Per exemple, si només utilitzeu el formulari de contacte a la pàgina de contacte, desactiveu-lo a qualsevol altre lloc.

13. Netegeu la base de dades

A mesura que actualitzeu publicacions, instal·leu i suprimiu els complements o realitzeu altres tasques al vostre lloc web, començareu a acumular-se en la vostra base de dades. El millor és netejar-lo una cada dues setmanes més o menys.

Podeu netejar la vostra base de dades utilitzant de forma gratuïta Complement d’optimització de WP, o utilitzeu WP Rocket:

Base de dades neta amb optimització del WP

14. Optimitzar els recursos externs

Recursos externs hi ha qualsevol cosa, des de vídeos de YouTube incrustats a fonts de Google, Google Analytics, Gravatars i qualsevol cosa que requereixi obtenir informació des d’un lloc web extern. Això pot destruir el vostre informe GTmetrix, especialment Google AdSense, ja que es publica a cada pàgina.

Consells per optimitzar els recursos externs

15. Combina fonts de Google

Feu servir tipus de lletra de Google, tipus de lletra fantàstics o altres tipus de lletra externs?

Probablement provocaran peticions addicionals a GTmetrix ja que són un recurs extern.

Google-Fonts-GTmetrix

Consells per optimitzar els tipus de lletra de Google

  • Amfitrió Google Fonts localment
  • Seleccioneu només tipus de lletra i pesos que necessiteu
  • Combina diversos fitxers de lletra en un fitxer (manualment o mitjançant WP Rocket o Autoptimize)

16. Còrrega peregrima imatges i vídeos

La càrrega tardana significa que imatges, vídeos i iframes només es carreguen una vegada que els usuaris es desplacin cap avall per la pàgina i realment els veuen. Això pot millorar significativament els temps de càrrega inicial de les vostres pàgines.

Els vídeos incrustats poden ser un dels elements més pesats d’una pàgina: carregar mandrosos 2 vídeos (i substituir l’iframe per una imatge de vista prèvia) va afaitar una magnífica 4 segons d’una de les meves publicacions..

Per a WordPress, podeu utilitzar WP Rocket, WP YouTube Lyte o el complement Lazy Load.

Per a Squarespace, proveu-ho Funció de càrrega desperta.

WP-Coet-Lazy-Load

17. Eviteu les publicitats

Google AdSense és notori per fer que la càrrega dels llocs web sigui lenta, i ni tan sols és rendible. Vostè pot intentar Balancer d’anuncis i Carregador de coets, però tindreu molts errors al vostre informe GTmetrix independentment i guanyareu diners amb el màrqueting d’afiliació. Oblideu d’AdSense: les persones amb més èxit que guanyen 50 milions de dòlars + utilitzin enllaços d’afiliació que no alenteixen el vostre lloc.

GTmetrix-Publicitats

18. Considereu AMP

AMP (pàgines mòbils accelerades) fan que les pàgines mòbils es carreguin més ràpidament mentre us ofereixen un segell AMP als resultats de la cerca per a mòbils. El problema és que això canvia el disseny de les vostres pàgines mòbils. Podeu utilitzar el botó Plugin AMP per a WP per personalitzar-los, però no és el mateix. Les conversions de Kinsta van baixar un 58% en afegir AMP, de manera que vaig decidir desactivar-les al meu propi lloc. Però convé tenir en compte. Aquí hi ha un Tutorial AMP per a Squarespace si utilitzeu això.

19. Cerqueu pàgines lentes a Google Analytics

Podeu trobar les vostres pàgines de càrrega més lenta a anàlisis de Google sota Comportament → Velocitat del lloc → Suggeriments de velocitat.

Molt sovint aquestes pàgines es carreguen lentament perquè tenen moltes imatges, vídeos o recursos externs. El fet és que la majoria de factors de velocitat s’apliquen a tot el vostre lloc web, no només a una pàgina.

Suggeriments de velocitat-Google-Analytics

20. Optimitzacions específiques de WordPress

Ja he cobert força optimitzacions específiques per a WordPress, però en teniu algunes altres.

  • Utilitzeu un complement de memòria cau com ara WP Rocket
  • Utilitzeu un bon complement d’optimització d’imatges com ShortPixel
  • Utilitzeu el complement Heartbeat Control per desactivar l’API de Heartbeat
  • Elimineu tots els complements que no utilitzeu i utilitzeu plugins lleugers
  • Netegeu la base de dades amb freqüència utilitzant WP-Optimize o WP Rocket
  • Gravatars de memòria cau utilitzant un complement com ara Harrys Gravatar Cache, FV o Optimum
  • Utilitzeu Asset Manager per desactivar selectivament els complements de la càrrega en determinades pàgines
  • Amfitrió Google Analytics localment mitjançant un complement com WP Rocket o CAOS Analytics
  • Allotgeu Google Fonts localment mitjançant un complement com ara OMGF o Tipus de Google que s’allotgen de manera autònoma

21. Optimitzacions de WooCommerce

De manera predeterminada, WooCommerce afegeix scripts, estils i fragments de carretons addicionals al vostre lloc web. Normalment també requereixen més complements. És per això que, quan trieu un pla d’allotjament, probablement vulgueu anar a l’allotjament VPS, núvol o semi-dedicat per assegurar-vos que pugui gestionar el consum addicional de recursos. En cas contrari, en allotjament compartit, podeu acabar superant els límits de CPU del vostre host.

Fragments de Cistell de WooCommerce

Desactiva els fragments del carretó – els fragments del carretó actualitzen els articles i el total del carretó, però es poden trigar des d’1 segons fins a 10 segons a carregar-se. La vostra millor aposta és desactivar fragments de carretó a la pàgina principal + publicacions, ja que és el lloc on no s’utilitza. Seguiu aquest tutorial.

Desactiva els scripts de WooCommerce – WooCommerce també pot carregar al voltant de 8 scripts diferents al vostre lloc web. Per desactivar-les, agafeu-ho codi de Github i afegeix-lo al fitxer functions.php.

Desactiva els estils de WooCommerce – WooCommerce també té estils que es carreguen a cada pàgina. Aquí hi ha un guia per desactivar-les.

Perfmatters – aquest extens complement de Kinsta facilita la desactivació de fragments, scripts i estils del carretó. Si voleu una forma fàcil de desactivar-les sense editar codi, proveu aquest complement premium.

Netegeu les sessions de clients – si el lloc de WooCommerce és lent, proveu d’esborrar les sessions de clients.

Incrementeu el límit de memòria a 256 MB – WooCommerce requereix que augmenteu el límit de memòria a 256 MB, però realment ho heu de fer per a la majoria de llocs web. Aquí hi ha un tutorial per fer això.

22. Contracta algú que sap el que fan

Necessiteu ajuda per arreglar el vostre lloc web de càrrega lenta?

Treballo amb uns quants desenvolupadors especialitzats en l’optimització de velocitat de WordPress. Podeu consultar el seu portafoli en aquesta pàgina i els acredito per obtenir les meves puntuacions de GTmetrix al 100%. Cole gestiona tots els projectes d’optimització de velocitat, podeu arribar a ell a [email protected]

23. Preguntes freqüents

&# x1f680; Quins factors tenen més impacte en els temps de càrrega?

L’elecció del complement d’allotjament, els plugins i la memòria cau adequada pot tenir un impacte més alt en els temps de càrrega. També són molt importants l’optimització d’imatges i evitar recursos externs com Google AdSense. L’ús d’una xarxa de lliurament de contingut gratuïta com Cloudflare també us ajudarà.

&# x1f680; Quina eina és millor per provar la velocitat?

GTmetrix ofereix les recomanacions més robustes de totes les eines de prova de velocitat. Google PageSpeed ​​Insights serveix principalment per 1 cosa: mesura els temps de resposta del servidor.

&# x1f680; Com puc dir el que es frena el meu lloc web?

GTmetrix us indica quines imatges han de ser optimitzades, tant si utilitzeu un CDN, com de plugins que poden aparèixer diverses vegades al vostre informe o a la cascada de GTmetrix. També mesura el temps per fer un primer byte, que és un bon indicador de si el vostre allotjament és lent.

&# x1f680; Quins són alguns consells de velocitat menys coneguts?

Moltes persones no actualitzen la seva versió PHP ni optimitzen recursos externs com els tipus de lletra Google i els vídeos de YouTube. Permet carregar imatges i vídeos i allotjar Google Fonts i Google Analytics localment poden solucionar molts elements a GTmetrix. També haureu d’afegir-vos a Grups de Facebook per obtenir opinions imparcials sobre els millors proveïdors d’allotjament, per evitar trampes d’afiliació.

&# x1f680; Quin hosting és millor?

SiteGround i Cloudways són dos proveïdors sòlids d’allotjament que han estat molt valorats a les enquestes de Facebook. SiteGround és un dels amfitrions compartits més populars i Cloudways per a allotjament en núvol. Aquests solen ser els primers 2 de la seva classe.

&# x1f680; Quin complement de memòria cau és millor?

WP Rocket es va classificar amb el complement de memòria cau número 1 en diverses enquestes de Facebook, ja que inclou moltes funcions d’optimització de velocitat que la majoria de plugins de memòria cau no fan (càrrega pereç, neteja de bases de dades, allotjament de Google Fonts i Google Analytics localment). Amb WP Rocket hauríeu d’obtenir resultats òptims, en cas contrari, Swift Performance és una bona alternativa de plugins gratuïta.

Espero que aquest tutorial us sigui d’utilitat. Si necessiteu ajuda, deixeu el vostre informe de GTmetrix als comentaris i us enviarem alguns suggeriments. O considereu la possibilitat de contractar el meu optimitzador de velocitat.

Salutacions,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map