Optimització de la velocitat del lloc web: Com fer-ho el 2020 # Pas a pas

Fa aproximadament una dècada, Google va anunciar que la velocitat del lloc afectaria el rànquing de la cerca web. Tot i que la publicació no va aclarir l’impacte de la velocitat en els rànquings, els administradors web que van llegir l’anunci van comprendre que l’optimització de la velocitat del lloc web hauria d’estar al capdamunt dels seus plans de desenvolupament..


A més de Beneficis de SEO d’optimització de velocitat, els temps de càrrega de pàgines són importants per determinar quants usuaris queden al vostre lloc web. HubSpot ho informa un descens de la conversió està relacionat amb l’augment dels temps de càrrega de pàgines – un segon retard en el temps de càrrega podria comportar una reducció del ~ 20-30% en la conversió!

Guia d’optimització de la velocitat del lloc web

Durant els darrers anys, hi ha hagut un augment de la mida mitjana de la pàgina. De fet, el 2018, en mitjana, la mida de la pàgina era superior a 2 MB! Una part significativa d’aquesta càrrega de pàgines consisteix en imatges, fitxers estàtics i vídeos.

Per dir-ne el mínim, la mida del vostre lloc web i la velocitat general del vostre lloc són importants. Fins i tot amb una càrrega de pàgines cada cop més gran, hi ha coses que podeu fer per millorar la manera de gestionar el vostre lloc. Aquest post ho explica tot.

Optimització de la velocitat del lloc web: el que necessita abans de començar

Aquesta publicació suposa que ja teniu dues coses clau:

  • Feu servir un tema optimitzat que no introdueixi massa problemes a WordPress.
  • Sou a un amfitrió prou ràpid.

Si marqueu aquestes dues caselles, podeu procedir a les seccions següents per explorar una llista completa de les tasques que podeu dur a terme per assegurar-vos que els temps de càrrega del vostre lloc web són mínims..

Com començar amb l’optimització de la velocitat del lloc web

Anatomia d’una pàgina web

anatomia

El truc per optimitzar la velocitat de les vostres pàgines web és comprendre el que entra a una pàgina web. Anem a través dels components més populars:

  • El codi HTML que dóna estructura i contingut a una pàgina web, fins i tot amb WordPress que fa la festa al vostre lloc, només cal agafar el que hi ha a la base de dades, tot el contingut, i convertir-lo en sortida HTML estàtica.
  • Arxius estàtics que ajuden en el disseny, la funcionalitat i la interactivitat (CSS, JavaScript)
  • Imatges de fons, logotips i contingut

Per mostrar una pàgina, el navegador sol·licita cada element d’una pàgina web: la pàgina en si en forma de HTML, fitxers estàtics, imatges, contingut extern. Per tant, el nombre de Sol·licituds HTTP també té un paper crucial en l’optimització de la velocitat del lloc web.

Esbrinar on es troba: eines d’optimització de velocitat del lloc web

Abans d’avançar a tècniques específiques que us ajudin a optimitzar el vostre lloc web, prenem-nos un moment per revisar les eines que ajuden a analitzar la velocitat de les pàgines web..

Si sou un principiant que busqueu una eina de prova casual, podeu considerar-ne l’ús les eines Pingdom suite per a una ràpida valoració del vostre lloc web. Per obtenir una solució més completa, podeu dirigir-vos a Informació de velocitat de pàgina de Google.

Prova de velocitat de PingdomEines Pingdom per a Proves de Velocitat

A més d’això, si busqueu una opció ràpida en forma de complement del navegador, podeu provar-la YSlow, que prova els llocs web i proporciona suggeriments des del navegador. Més endavant, el Eina GTmetrix utilitza els resultats de les proves de YSlow per als informes.

�� Si voleu més opcions per provar la velocitat del vostre lloc, aquesta publicació es mostra 5 de les millors eines de control de velocitat que hi ha.

Abans d’examinar les tècniques enumerades en aquesta publicació, assegureu-vos d’executar el vostre lloc web amb una de les eines que s’enumeren aquí per servir de referència. Tan aviat com realitzeu qualsevol optimització de velocitat del lloc web, assegureu-vos de tornar a l’eina per comprovar si hi ha millores de velocitat.

Pas 1: optimitzeu fitxers estàtics

El primer pas d’aquesta guia se centra en l’optimització de fitxers estàtics, més popularment en forma de fulls d’estils (fitxers CSS) i scripts (fitxers JS).

(a) Desplaceu CSS cap a cap, JS cap a baix

La primera optimització que cal dur a terme és assegurar-se que els fulls d’estils entren a la secció de l’estructura de la vostra pàgina, mentre que tots els scripts es mouen a sobre per sobre de l’etiqueta de tancament de la pàgina. La lògica darrere d’això és senzilla:

  • Generalment, els fulls d’estils són de mida més petita que els scripts
  • Una vegada que els fulls d’estils es carreguen a l’etiqueta abans que el navegador mostri el cos de la pàgina, qualsevol element que es mostri a la pàgina tindrà un estil adequat
  • La funcionalitat dels scripts generalment entra en joc un cop carregat el contingut de la pàgina, de manera que els guions generalment es poden situar a la part inferior

Aquesta pràctica garanteix que els visitants del vostre lloc web no deixin una pàgina en frustració mentre esperen que es carreguen.

Per gestionar la part de scripts ràpidament, podeu instal·lar el complement Scripts to Footer per a WordPress. Funciona en pilot automàtic i fa la feina bé.


Guions al peu de pàgina Guions al peu de pàgina

Autor (a): Joshua David Nelson

Versió actual: 0.6.4.1

Darrera actualització: 15 d’abril de 2020

scripts-to-footerphp.0.6.4.1.zip


94% de valoració


20.000 + instal·lacions


3.1.0 Requisits

(b) Configura la minificació

La minificació és el procés d’eliminació d’aquelles parts d’un fitxer que no són necessàries per a la seva execució. Per exemple, als vostres fulls d’estil o scripts, no són necessaris per a l’execució:

  • espais en blanc per a sagnat
  • comentaris
  • llarga funció i noms variables
  • codi no utilitzat

La reducció ajuda molt reduint la mida dels fitxers estàtics. Podeu minimitzar els fitxers mitjançant un servei com Minimitzar, o instal·lant-ne un plugins de minificació a WordPress.

(c) Utilitzeu càrrega asíncrona

Un navegador web fa que les sol·licituds de recursos es mostrin de forma seqüencial tal i com apareixen en una pàgina web. Això es denomina càrrega síncrona. Tanmateix, podeu canviar aquesta funcionalitat per defecte del navegador mitjançant l’atribut async per carregar recursos tan aviat com estiguin disponibles. Per exemple, podeu carregar un script de manera asincrònica de la següent manera:

Aquí està una llista de complements que us ajuden a carregar-se asíncronament a WordPress.

(d) Utilitzeu compressió GZIP

La compressió GZip és una tècnica per comprimir recursos mitjançant peticions HTTP. Amb la compressió GZip, el servidor envia fitxers comprimits de recursos, que el navegador descomprimeix mentre es reprodueix una pàgina web.

El temps i els recursos necessaris per comprimir i descomprimir un recurs es superen pel temps i l’amplada de banda estalviats en transferir un fitxer més petit del servidor al client. Aquesta tècnica no només carrega pàgines més ràpidament, sinó que també estalvia en els costos del servidor.

La compressió GZip és una part d’uns quants plugins de memòria cau de WordPress com WP Fastest Cache.

(e) Utilitzeu Google CDN per a biblioteques populars

La tècnica d’optimització final en aquest pas és per utilitzar Google o Microsoft CDN quan es facin les biblioteques comunes que s’utilitzin al vostre lloc. El motiu que hi ha darrere és senzill, a causa de la popularitat d’aquests CDNs, és probable que un visitant ja tingui una versió memòria cau del recurs al seu navegador.

Pas 2: optimitza les imatges

Com hem comentat anteriorment, la principal font d’augment de mides de les pàgines web al llarg dels anys són les imatges.

Fes una ullada als números propis de CodeinWP:

càrrega d’imatge

Per tant, el tractament d’imatges hauria de comportar millores més significatives en la velocitat del vostre lloc web, i ho fa.

Les imatges són essencials per a un lloc web, però no es recomana l’ús d’imatges de qualitat completa per a la web. Hauríeu de comprimir les imatges fins a un grau que redueixi la mida dràsticament, alhora que proporcioneu una qualitat visual justa.

Podeu fer un parell de coses per aconseguir-ho i tenir en compte l’optimització de la velocitat del lloc web:

(a) Carregueu imatges de la mida adequada

És probable que el tema actual tingui la mida màxima de la imatge que pot mostrar – en funció de la dimensió. Esbrineu què és això i, a continuació, pengeu només imatges que siguin com a màxim dues vegades més grans.

Per què dues vegades? Això també permetrà que el tema mostri versions de qualitat de retina de les imatges.

(b) Utilitzeu el tipus d’imatge correcte

Els dos tipus d’imatges més utilitzats al web són els JPG i els PNG.

No són iguals.

  • Les imatges JPG estan destinades a fotografies i altres imatges complexes amb molta informació en color
  • Les imatges PNG són perfectes per a gràfics amb poca informació sobre colors, com ara captures de pantalla de la interfície.

Exemple d’una imatge PNGtemes

(c) Optimitzar les imatges localment abans de penjar-les

Hi ha diverses eines que podeu utilitzar abans de penjar imatges al vostre lloc.

minúscul
imageoptim

(d) Carrega les vostres imatges

Una altra tècnica per optimitzar les imatges és la càrrega mandrosa, una pràctica on la imatge no es descarrega fins que un visitant es desplaça cap avall per veure-la.

demostració lazyloadDemostració de càrrega pereçosa a CodeinWP

Aquí teniu una guia completa per carregar imatges peregrines al vostre lloc.

(e) Obteniu un complement d’optimització d’imatges

Per últim, però no menys important, haureu d’obtenir un complement d’optimització d’imatges de qualitat per al vostre lloc de WordPress. Segons quin sigui el que utilitzeu, podeu obtenir la major part de les vostres necessitats d’optimització d’imatges en pilotes automàtiques.

Aquí estan 6 dels millors complements d’optimització d’imatges comparats.

Si necessiteu una recomanació ràpida, consulteu la nostra Optimol. Proporciona compressió d’imatges altament eficient, a més d’un CDN en el pla gratuït. Optimole també proporciona uns resultats estel·lars quan es contraposa als seus principals competidors:

Resultats d’optimització PNG

PluginOriginal Mida PNGOptima OptimitzacióOptimització% Compressió
Optimol301 KB34 KB88,7%Sense pèrdues i sense pèrdues
Imaginar301 KB67 KB77,7%Perduda
TinyPNG301 KB79,7 KB73,5%Perduda
ShortPixel301 KB90,4 KB69,96%Perduda
Smush301 KB247 KB17,9%Sense pèrdues
EWWW301 KB257,4 KB14,6%Sense pèrdues

Resultats d’optimització de JPG

PluginOriginal Size JPGOptim OptimizationOptimization% Compressió
ShortPixel518 KB169 KB67,36%Perduda
TinyPNG518 KB248,6 KB52%Perduda
Optimol518 KB274 KB47%Sense pèrdues i sense pèrdues
Imaginar518 KB338,7 KB34,64%Perduda
EWWW518 KB488,9 KB5,7%Sense pèrdues
Smush518 KB493 KB4,9%Sense pèrdues


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

Pas 3: optimitzeu les sol·licituds HTTP

Anteriorment, vam comentar que quan un navegador d’usuari comença a carregar una pàgina web, les transferències reals es fan mitjançant sol·licituds HTTP individuals. Una sola sol·licitud obtingui cada recurs. Per tant, un augment en el nombre d’aquestes sol·licituds augmenta els temps de càrrega de la vostra pàgina web.

sol·licituds de llocsSol·licituds HTTP d’una pàgina web

(a) Combina fitxers

La primera tasca per minimitzar la càrrega de sol·licituds HTTP és combinar recursos similars. Quan reduïu recursos, podeu combinar fitxers similars. Per exemple, tots els fulls d’estils (fitxers CSS) i tots els fitxers JavaScript personalitzats es poden combinar en fitxers únics. D’aquesta manera es redueix el nombre de peticions que ha de fer un client per carregar tots els recursos.

De nou, aquestes plugins de minificació per a WordPress et pot ajudar a fer això.

(b) Minimitzar la cerca DNS

Quan es fa una sol·licitud HTTP a un domini com www.codeinwp.com, es realitza una cerca DNS (sistema de nom de domini) per trobar l’adreça IP del servidor. En conseqüència, el vostre objectiu també hauria de ser minimitzar el nombre de cerques de DNS a totes les sol·licituds, per tal d’agilitar la càrrega del lloc web..

Aquí hi ha un guia genial de Kinsta sobre com fer-ho.

(c) Habilita el manteniment en vida

Sense cap optimització, el navegador envia una sol·licitud HTTP per a cada recurs. Aquesta connexió es tanca un cop finalitzada la descàrrega. Aleshores, el navegador fa una nova sol·licitud al servidor per a un nou recurs. Mantenir viu és una tècnica que no finalitza una sol·licitud quan s’ha finalitzat la baixada de recursos.

Podeu habilitar el manteniment en viu de les maneres següents:

(d) Minimitzar les redireccions

Una redirecció és una instrucció per portar automàticament un client d’una ubicació a una altra ubicació d’un recurs. Cada redirecció augmenta els temps de càrrega de la pàgina web i, tret que sigui absolutament necessari, haureu d’evitar les redireccions al vostre codi.

(e) Utilitzeu un CDN

Un CDN (xarxa de lliurament de contingut) és una col·lecció de servidors web presents en vàries ubicacions geogràfiques que proporcionen contingut de forma ràpida i eficaç als clients.

A un client que sol·licita un recurs se li donarà servei des d’un servidor que es troba geogràficament més proper a la ubicació del client. D’aquesta manera es garanteix que el contingut sol·licitat arribi al client en el menor temps possible!

Tenim un recurs independent que compara les solucions CDN principals per a llocs de WordPress, juntament amb informació sobre com es pot mirar.

Pas 4: Memòria cau

No hi ha cap guia d’optimització de velocitat del lloc web sense una secció sobre caché. Algunes tècniques que hem comentat anteriorment, com ara la compressió de GZip i la minificació, formen part de moltes solucions en caché actual.

La memòria cau fa referència a un fenomen d’emmagatzemar un recurs en un emmagatzematge temporal per recuperar-lo ràpidament quan calgui. Hi ha diverses formes de caché:

  • Memòria cau de la pàgina: versió HTML estàtica d’una pàgina emmagatzemada al servidor
  • Memòria cau de la base de dades: els resultats de les consultes comunes de bases de dades (com ara les 10 publicacions principals del vostre lloc) emmagatzemades al servidor
  • Memòria cau del navegador: emmagatzematge de parts de la pàgina al navegador

Hem comparat els missatges de memòria cau de WordPress més populars en aquesta publicació. TL; DR: anar a la sortida Coet WP si estàs buscant una solució completa. Alternativament, si prefereixes alguna cosa gratuïta, aquí hi ha un guia sobre com configurar la memòria cau total W3.

Pas 5: optimitza per a mòbils

A les parts anteriors d’aquest article, vam parlar de tècniques d’optimització d’optimització rellevants tant per a ordinadors com per a mòbils. Tanmateix, el consum de contingut al mòbil augmenta, i hi ha nous reptes que comporta una pantalla més petita. Així, en aquest apartat es discuteixen els mètodes d’optimització de la velocitat del lloc web per a dispositius mòbils.

L’optimització de mòbil es refereix a la pràctica de garantir que els visitants mòbils de la vostra pàgina web tinguin la mateixa funcionalitat i eficiència que els seus homòlegs d’escriptori. La llista següent conté certs factors d’higiene per curar contingut web per a dispositius mòbils:

  • Utilitzeu un disseny web sensible per assegurar-vos que dispositius diferents tinguin versions diferents d’una pàgina web
  • Eviteu l’ús de flaixos i pop-ups, ja que és possible que els dispositius mòbils no ho admetin
  • No posicioneu interaccions com ara enllaços massa propers

A més d’aquests factors, AMP (Accelerated Mobile Pages) és un projecte que pretén crear contingut que sigui ràpid i coherent entre dispositius.

Aquí teniu una guia per començar amb AMP a WordPress.


AMP

Autor (a): Col·laboradors del projecte AMP


74% de valoració


500.000 + instal·lacions


WP 4.9 + Requereix

Més informació

amp.1.5.3.zip

Versió actual: 1.5.3

Darrera actualització: 15 d’abril de 2020


74% de valoració


500.000 + instal·lacions


WP 4.9 + Requereix

Pàgina de complements WordPress.org


AMP

Conclusió

Espero que aquesta guia us hagi donat alguns consells sobre què heu de fer per millorar el nivell global d’optimització de la velocitat del vostre lloc web.

Només per recaptar; primer vam mirar l’anatomia d’una pàgina web per abordar àrees específiques per millorar. Després, vam passar a passos específics per optimitzar:

  • El primer pas va tractar l’optimització de fitxers estàtics en forma de fulls d’estils i scripts
  • El pas 2 aborda imatges i la seva optimització
  • El pas 3 va tractar sobre tècniques per optimitzar les sol·licituds HTTP
  • Al pas 4 es van comentar algunes tècniques populars de caché
  • 5è pas d’optimització coberta per a dispositius mòbils

Hi ha alguna cosa amb què es tracta d’optimitzar la velocitat del lloc web? Feu-nos-ho saber als comentaris a continuació.

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ó, presentació i edició de Karol K.

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