Com millorar la velocitat del meu WordPress: Guia Completa WPO

Vols millorar la velocitat del teu lloc WordPress?

Tots hem patit en algun moment perquè una web no és el ràpid que voldríem.

Quan ens convertim en usuaris d’una web som mandrosos i impacients, cosa que significa que ens agrada gaudir de webs ràpids i intuïtius.

Una càrrega ràpida de la teva web millora lexperiència de lusuari, el que es tradueix en un augment de les visites i ajuda al SEO (Google també agrada de webs ràpides).

En el cas de WordPress segur que has sentit a parlar d’optimitzar els temps de càrrega de les imatges, reduir els connectors instal·lats… però hi ha molt més que pots fer.

Per això, en aquest article compartirem la guia definitiva de com accelerar la teva pàgina web a WordPress: t’ensenyarem tècniques, mètodes i consells de WPO ( Web Page Optimization ) pas a pas per millorar la velocitat de càrrega i augmentar el rendiment de la teva instal·lació de WordPress.

Què són les sigles WPO?

Si tens un lloc web, de segur coneixes la importància que aquest lloc estigui optimitzat per atraure trànsit i així generar vendes. No obstant això, en què consisteix aquesta optimització del lloc web?

La WPO o optimització de lloc web, ( Web Page Optimization per les sigles en anglès), engloba totes les tècniques utilitzades per augmentar el rendiment de la web a tots els nivells , millorar el SEO, captar trànsit, i convertir vendes. No obstant això, la definició més famosa i coneguda del WPO és la que fa referència al rendiment en termes de velocitat de càrrega .

Mesura els problemes de càrrega del teu WordPress

Hi ha diferents maneres de comprovar la velocitat de càrrega del teu WordPress. La més famosa és sens dubte l’oficial de Google, PageSpeedInsights , encara que per a usuaris poc avançats pot ser difícil d’interpretar les dades que dóna PSI.

En el nostre cas farem servir GTmetrix , una eina desenvolupada per Carbon60, similar a PageSpeedInsights però amb una interfície més agradable, perquè puguis provar fàcilment el rendiment de la teva pàgina web i saber quins components són els que l’estan alentint.

Pots utilitzar GTMetrix sense registre, però per canviar la localització des d’on es mesura la velocitat de càrrega t’has de registrar amb un compte gratuït.

El primer que veuràs en finalitzar el diagnòstic serà aquesta sèrie de paràmetres:

• Fully Loaded Time : Temps de càrrega complet de la pàgina. S’hauria de trobar màxim al voltant dels 2 o 3 segons de càrrega (mai superior a 6s).
• Total Page Size : Mida de la pàgina. És recomanable que no superi 1Mb de pes, encara que es pot revisar el cas d’acord amb les necessitats de la teva pàgina web.
• Requests : Missatges que s’envien des del client al servidor per sol·licitar un recurs. Ha de tenir menys de 100 peticions, encara que a webs grans aquests pot ser impossible.
• Time To First Byte o TTFB : És el temps d’espera perquè arribi el primer byte d’informació al client. Ha de ser inferior a 200ms. És la primera dada que apareix a la pestanya Waterfall.

Després del diagnòstic, GTmetrix puntura la teva pàgina segons el seu rendiment.

En cas de no donar bona puntuació (per sota de 60% a Pagespeed i Yslow), hi ha un munt de mesures que podem prendre per millorar la velocitat de càrrega. A continuació te n’indiquem algunes.

Soluciona aquests problemes de càrrega

Si la puntuació de GTmetrix per al teu WordPress no és com la nostra… ho arreglarem.

A continuació et passem a descriure les millores i canvis més importants que acceleraran la teva web de manera gairebé automàtica.

Actualitza la versió de PHP del teu servidor

PHP és llenguatge de programació que fa funcionar WordPress. Com qualsevol framework de programació, rep actualitzacions periòdiques de cara a millorar-ne el rendiment i la seguretat.

Quan hi ha una nova versió de PHP segurament vegis un avís a la teva consola de WordPress, i és molt recomanable actualitzar quan sigui necessari. A canvi d’aquesta actualització, la teva web serà més ràpida i segura, ja que cada nova versió de PHP és fins a 3 vegades més eficient i ràpida que les versions anteriors.

Actualitza a través de la interfície de servidor

Per veure la teva versió de PHP a CPanel entra a la consola de CPanel> Select PHP Version.

Sortirà una cosa així:

Canvieu la versió segons correspongui.

En cas que el vostre servidor treballi amb un altre gestor com Plesk, cerca l’opció “Php” a les opcions d’administració.

Comprova versió de PHP via FTP

Si no tenim accés a CPanel o Plesk, però si a una connexió FTP, podem saber la versió de PHP seguint els passos següents:

• Obre un bloc de notes, enganxa el codi que veus a continuació i guarda’l amb el nom “info.php”:

<!--?php phpinfo(); ?-->

• És important que quedi desat com a “.php”, compte que no sigui “.php.txt”.
• A la carpeta public_html del teu WordPress, puja el fitxer info.php creat.
• Introdueix al navegador tudominio.com/info.php i t’apareixerà la versió de php.
• Després de la comprovació, suprimiu el fitxer info.php

Per actualitzar la teva versió de PHP de forma segura, has de:

1. Crear una còpia de seguretat de la web abans de lactualització per si alguna cosa no funciona o es trenca amb lactualització. Si és així, podràs restaurar la web fàcilment.
2. Instal·lar la penúltima versió disponible, no la darrera.

Protocol HTTP vs HTTP/2

HTTP o Protocol de Transferència d’Hipertext , és el protocol de comunicació que permet la transferència d’informació a través de fitxers, usualment HTML, a internet.

HTTP/2 és la nova versió de HTTP, i és millor perquè:

• optimitza la rapidesa en la comunicació
• millora del posicionament web
• prioritza la càrrega
• consumeix menys ample de banda que el HTTP clàssic

Per comprovar si el protocol del teu WordPress ja és a HTTP/2, accedeix a: https://http2.pro/

En cas que no ho estigui, envia un tiquet al teu proveïdor de servei hosting, comentant és un factor important perquè la web sigui més ràpida. Si el teu hosting és de qualitat haurien de donar-te un cop de mà amb això.

Però les coses no es queden a HTTP/2, sinó que escalen a HTTP/3 (encara que en la majoria de casos és de pagament).

En cas de clients importants i WordPress grans, plantejar i valorar la seva aplicació a la web.

Habilita KeepAlive a WordPress

Keepalive és un missatge enviat per un dispositiu a un altre per verificar que lenllaç entre els dos està funcionant, o per evitar que lenllaç (connexió) es trenqui.

Per no marejar-te gaire, et direm que amb això s’acceleren les connexions a la teva web perquè s’aprofiten les que ja estan obertes.

Per habilitar-ho, accedeix al fitxer .htaccess i defineix la següent directiva:

 Header set Connection keep-alive 

Augmenta la memòria del teu WordPress

Tenir més memòria disponible per a WordPress permet l’execució de tots els recursos de la teva web de manera fluida. El normal és que el teu hosting et proveeixi de com a mínim 256 Megas, que és el mínim per a lús de WordPress.

Per augmentar-la has d’editar el fitxer wp-config.php que estarà a la carpeta public_html, i inserir dins el següent:

define('WP_MEMORY_LIMIT', '256M');

A les noves versions de WordPress la memòria límit es defineix al fitxer: default-constants.php que està al directori : /wp-includes

Desinstal·lar Plantilles i Plugins que no es facin servir

L’espai al vostre disc dur i l’ús de recursos ha d’estar optimitzat al màxim per evitar carregar dades que no es necessiten. Per això, un dels consells més fàcils d’aplicar és desinstal·lar les plantilles* i plugins que no s’utilitzin, ja que consumeixen recursos encara que no executin cap tasca específica.

*Nota: deixa sempre una plantilla de respatller, ja que WordPress usarà aquesta si detecta algun problema amb què tens en marxa.

Optimitza el teu fitxer .htaccess

El fitxer .htaccess , també conegut com accés d’hipertext o HyperText Access, és un fitxer de configuració que està al vostre servidor.

El fitxer .htaccess indica tot allò que l’usuari que visita la teva web pot o no pot fer. A més, configura la manera com es comporta el servidor i com optimitza la càrrega de les pàgines del teu lloc o bloc.

Per optimitzar el .htaccess només cal pujar totes les directrius especificades a continuació al fitxer:

FileETag None

SetOutputFilter DEFLAT

Header unset ETag

#minificarCSS

 AddOutputFilterByType DEFLAT text/html text/xml text/css text/plain

 AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml

 AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml

 AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json

 AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf

 AddOutputFilterByType DEFLATE font/truetype font/opentype

 Header set Cache-Control "public"

 Header set Cache-Control "public"

 Header set Cache-Control "private"

 Header set Cache-Control "private, must-revalidate"

# compress text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

AddType x-font/otf .otf

AddType x-font/ttf .ttf

AddType x-font/eot .eot

AddType x-font/woff .woff

AddType image/x-icon .ico

AddType image/png .png

 mod_gzip_on Yes

 mod_gzip_dechunk Yes

 mod_gzip_item_include file .(html?|txt|css|js|php|pl)$

 mod_gzip_item_include handler ^cgi-script$

 mod_gzip_item_include mime ^text/.*

 mod_gzip_item_include mime ^application/x-javascript.*

 mod_gzip_item_exclude mime ^image/.*

 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

 ExpiresActive On

 ExpiresDefault "access plus 1 week"

 ExpiresByType image/x-icon "access plus 1 month"

 ExpiresByType image/jpeg "access plus 1 month"

 ExpiresByType image/png "access plus 1 month"

 ExpiresByType image/gif "access plus 1 month"

 ExpiresByType application/x-shockwave-flash "access plus 1 month"

 ExpiresByType text/css "access plus 4 month"

 ExpiresByType text/javascript "access plus 1 month"

 ExpiresByType application/javascript "access plus 1 month"

 ExpiresByType application/x-javascript "access plus 1 month"

 ExpiresByType text/html "access plus 1 week"

 ExpiresByType application/xhtml+xml "access plus 1 week"

# Disable ETags

 Header unset ETag

 Header set Connection keep-alive

FileETag None

############## CACHING-GZIP ############

ExpiresActive On

ExpiresDefault A2592000

ExpiresDefault A2592000

ExpiresDefault A2592000

ExpiresDefault A2592000

ExpiresDefault A2592000

 Header set Cache-Control "max-age=2592000"

 Header set Cache-Control "max-age=2592000"

 Header set Cache-Control "max-age=2592000"

 Header set Cache-Control "max-age=2592000"

 SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15} |~{15} |-{15} )$ ^((gzip|deflat)\s*,?\s*)+|[X~-] {4,13}$ HAVE_Accept-Encoding

 RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding

 AddOutputFilterByType DEFLATE "application/atom+xml" \

 "application/javascript" \

 "application/json" \

 "application/ld+json" \

 "application/manifest+json" \

 "application/rdf+xml" \

 "application/rss+xml" \

 "application/schema+json" \

 "application/vnd.geo+json" \

 "application/vnd.ms-fontobject" \

 "application/x-font-ttf" \

 "application/x-javascript" \

 "application/x-web-app-manifest+json" \

 "application/xhtml+xml" \

 "application/xml" \

 "font/eot" \

 "font/opentype" \

 "image/bmp" \

 "image/svg+xml" \

 "image/vnd.microsoft.icon" \

 "image/x-icon" \

 "text/cache-manifest" \

 "text/css" \

 "text/html" \

 "text/javascript" \

 "text/plain" \

 "text/vcard" \

 "text/vnd.rim.location.xloc" \

 "text/vtt" \

 "text/x-component" \

 "text/x-cross-domain-policy" \

 "text/xml"

 AddEncoding gzip svgz

#finsaquíparaoptimitzacióhtaccess

I recordeu sempre mantenir una còpia de seguretat del .htaccess antiga, en cas d’errors amb el servidor.

Posa en marxa una CDN, com la de CloudFlare

Una CDN és una altra de les solucions definitives per millorar la velocitat (i seguretat) de la teva pàgina web de WordPress. I a CDN’s, Cloudflare s’emporta el premi gros: és una de les més utilitzades i és gratuïta.
Una CDN accelera el teu lloc web en distribuir els continguts per una xarxa de servidors distribuïts geogràficament. Les sigles CDN són l’acrònim de Content Distribution Network (Xarxa de Distribució de Continguts) i el que fa és crear una còpia de la teva web al núvol. Això redueix els costos dample de banda i ofereix un lliurament de contingut estàtic i dinàmic ultraràpida.
Per accedir a Cloudfare has de:

1. Registrar un compte a: https://www.cloudflare.com/es-es/
2. Donar d´alta el teu domini.
3. Canviar DNS del teu domini per les de CloudFlare.
4. Anar a Configuració> Configuració recomanada i seguir els passos següents:

Instal·lar WP Fastest Cache

WP Fastest Cache és un dels diversos plugins per a WordPress dissenyats per accelerar el rendiment de la teva pàgina web. Un sistema de memòria cau optimitza els temps de càrrega creant i emmagatzemant una còpia estàtica de les pàgines a la memòria del servidor, de manera que els visitants recurrents visitaran aquests fitxers durant la segona i següents visites. Això significa que la web es descarregarà més ràpid als vostres navegadors.
Dit d’una altra manera: una memòria cau web no és més que documents web emmagatzemats localment per reduir l’amplada de banda consumida, la càrrega dels servidors i el retard a la descàrrega.
Per gaudir tots els beneficis d’instal·lar WP Fastest Cache, cal instal·lar la versió PRO d’aquest plugin. Per configurar-lo, n’hi ha prou de substituir-lo pel connector de memòria cau que es tingui i configurar-lo perquè es complementi amb el CDN de Cloudflare (i que no hi hagi dos caixets solapant-se).

Configurar JS de Google Analytics localment

Google Analytics és una eina d’analítica web de Google que permet obtenir informació del trànsit, audiència i comportament dels usuaris a la teva pàgina web.
Per configurar Google Analytics i optimitzar-lo per a més velocitat i millores al SEO, el plugin de WordPress CAOS (Complete Analytics Optimization Suite) és l’eina perfecta:

CAOS | Host Google Analytics Locally

Allotja localment el JS de Google Analytics, configura com veus a la imatge següent i Llest!

Engega un sistema de lazy-loading

El lazy loading és un sistema de millora del rendiment web. Amb el lazy loading es carrega el contingut de la teva pàgina només quan sigui visible a la pantalla de l’usuari i es retarda la càrrega de l’objecte fins que l’usuari es desplaci per arribar-hi.
Hi ha plugins de WordPress que permeten configurar la càrrega diferida, un d’ells és Lazy Load for Videos:

https://es.wordpress.org/plugins/lazy-load-for-videos/

Per a webs que tinguin vídeos incrustats (YouTube, Vimeo, Twitter, etc.) selecciona l’opció que substitueix la vista prèvia del vídeo per una imatge estalviant càrrega de l’script de la URL externa.

Eliminar ginys de WordPress

WordPress ve per defecte amb una sèrie de ginys que aporten poc o res per al funcionament i comportament de la web. Així mateix succeeix amb els widgets que inclouen temes i plantilles que instal·lis al teu backend.

Si hi ha ginys de RRSS, com twitter o facebook, que no facin cap favor a la teva web, el més recomanable és treure’ls.

Instal·lar WP Optimize

WP Optimize és un plugin de WordPress tot-en-un que busca millorar el rendiment de la teva pàgina web.

Neteja la teva base de dades, comprimeix les teves imatges i emmagatzema a la memòria cau el teu lloc.

WP-Optimize – Cache, Clean, Compress.

És recomanable per a persones que usin molt WordPress, o siguin relativament grans.
Per utilitzar-lo només cal instal·lar, veure taules a netejar i optimitzar (mira abans els quadres per veure que no ens carreguem res que després ens interessarà).

Elimina els iframes (com els de Google Maps)

iFrame és l’abreviatura d’ Inline Frame . Bàsicament i per no complicar-nos amb tecnicismes, un iFrame és una web dins una web.

Permet incrustar documents, vídeos i mitjans interactius dins d’una pàgina, com ara mapes de Google Maps o vídeos de YouTube. Això vol dir que amb un iFrame pots mostrar una pàgina web secundària a la teva pàgina principal.

Si et planteges millorar la velocitat de la web, el més recomanable és treure l’iframe de Google Maps on apareix la fitxa de la teva empresa, és a dir, no facis un embed sinó simplement posa una imatge amb enllaç a la fitxa de Google My Business corresponent .

Optimitza les imatges de WordPress

L’optimització d’imatges és el procés de disminuir la mida del vostre fitxer mitjançant l’ús d’un plugin o script de WordPress. Millora un munt els temps de càrrega i són fàcils dusar.

Hi ha opcions com:

• Shortpixel
• Smush Image Compression and Optimization
• Imsanity
• TinyPNG

Només cal instal·lar-los a la teva consola de WordPress i configurar-los amb el pas a pas de cada plugin.

A més, alguns no només comprimeixen la imatge, sinó que fins i tot redueixen la seva mida automàticament abans de la compressió.

Configura la càrrega de scripts al footer de WordPress

Carregar els fitxers JS al footer en lloc de al header farà millorar la velocitat del temps de càrrega i el rendiment del nostre lloc web, millorant les puntuacions de WPO i oferint una millor experiència d’usuari.

Per fer-ho només cal copiar i enganxar les següents directrius a l’arxiu functions.php del teu WordPress:

function footer_enqueue_scripts() {

remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);

add_action('after_setup_theme', 'footer_enqueue_scripts');

}