Per a aquells familiaritzats amb la fotografia, quan ajustem la velocitat de tret, entren en joc dos dials: la sensibilitat (la ISO speed) i l’anell d’obertura. Les combinacions són moltes però l’escenari de resultats és bastant predictible (encara que cal dir-ho, un bon resultat tècnic no és suficient per a una bona fotografia).
Però quan intentem millorar la velocitat d’un web site WordPress, no passa el mateix. La llista d’ajustos que afecten la velocitat és bastant més llarga i la combinació ideal no és en absolut una formula exacta.
Table of Contents
- El camí eficaç per millorar la velocitat de WordPress
- Per on començar.
- Com optimitzar WordPress i el servidor que l’allotja?
El camí eficaç per millorar la velocitat de WordPress
En aquest primer post, aprendrem “Qui és Qui” en termes de velocitat, amb quines eines mesurar i després analitzarem els paràmetres que afecten la velocitat del costat “servidor”: El costat que implica al nostre proveïdor d’allotjament i al motor WordPress encarregat de construir les nostres pàgines web.
En la Part 2/2 –Millorant la descàrrega de contingut i pintat de pàgina del nostre WordPress –, ens mourem al costat “client” per enfrontar-nos al món de el –com es reben els continguts– i del –com els gestiona un navegador–.
L’objectiu d’ambdues publicacions és evitar caure en el “assaig tècnic” o en la superficialitat d’un llistat de plugins i aprendre a identificar i controlar els punts clau causants del 95% dels problemes de rendiment del nostre WordPress.
La velocitat i les seves fases
Abans de començar a jugar amb els ajustos de WordPress, necessitem entendre les bases de la velocitat d’una pàgina web i com poder mesurar-la.
L’autèntic camí per saber si una pàgina WordPress és ràpida consisteix en mesurar-ho tot d’extrem a extrem: des del costat server a l’usuari, que en diem –Temps de càrrega–.
Aquest –Temps de càrrega– que percebem com a usuaris és la suma de quatre fases diferenciades. En cadascuna d’aquestes fases intervenen factors diferents, per això solen mesurar-se i tractar-se per separat.
En aquest gràfic de Newrelic és fàcil veure’n la separació:
Temps de Càrrega graficat amb Newrelic
És important com a mínim saber que existeix aquesta divisió (en negreta està destacada la tasca principal). Aquests són termes que esmentarem més endavant.
- Web application (Aplicació web): El temps que empra el servidor per construir la pàgina web que volem veure.
- Network (Xarxa): The Network layer includes time spent in redirects as well as in requesting and receiving the requested web page.
- DOM processing (procés del DOM): El temps invertit pel navegador a interpretar el codi convertint-lo en una estructura DOM.Afegit al temps destinat a interpretar i executar els scripts síncrons.
- Page rendering (Pintat de la pàgina): En aquesta fase el navegador ja sap el que ha de mostrar i comença a pintar continguts. En aquesta fase s’inclouen els temps de descàrrega de scripts i recursos estàtics. A partir d’aquí poden succeir-se càrregues de continguts asíncrones, que l’usuari percebrà però que no totes les eines de mesurament capturen.
Però qui arruïna la velocitat del WordPress?
Si vols un website WordPress realment ràpid, hauràs de revisar totes les fases de velocitat del Temps de Càrrega.
WordPress és una eina de doble tall. La seva facilitat per construir i expandir-se pot convertir-se en un problema de velocitat si no hi posem cura. Podem tenir el millor i més car dels serveis de hosting i arruïnar el nostre “Page load” per culpa de tenir mal resolt el temps de càrrega al costat Navegador. Aquest és precisament l’exemple mostrat a l’anterior gràfica: s’inverteix 1 segon en les fases “Web application” i Xarxa, però en canvi es necessiten 4 segons al costat del navegador!!!
Un detall a tenir present! Com a administradors o editors WordPress tenim dues velocitats!
No hem d’oblidar que a WordPress hi ha dos entorns i per això tenim dues velocitats. La velocitat que com a usuaris percebem en navegar pel nostre web i la velocitat que com a administradors patim al gestionar el nostre WordPress al treballar al panell d’administració.
Cadascuna d’aquestes “velocitats” podrà tenir un tractament diferenciat. Farem servir les dues referències “velocitat d’usuari” i “velocitat admin” per referir-nos a cadascuna d’elles.
Per on començar.
En aquest post treballarem amb les velocitats “Web application” i “Network” (xarxa)
Haurem d’identificar els colls d’ampolla d’ambdues velocitats centrant l’atenció en aquests tres actors involucrats:
- El set de Plugins i el Tema WordPress: principals responsables de la càrrega de treball que lliurem al nostre servidor perquè aquest dugui a terme la fase de construcció.
- El nostre servidor de hosting: responsable de la construcció de les pàgines “Web application”.
- La xarxa: involucrada en la recepció de la petició i distribució de la pàgina i els seus continguts “Network speed”.
Una única mètrica per mesurar-ho tot
!Tenim sort! Disposem d’una simple mètrica, molt bona, per mesurar la suma de les fases de velocitat “Web application” i xarxa, és el TTFB – Time to first byte.. (Transcurs de Temps del Primer Byte).
TTFB ens mesura el temps que emprem en arribar al nostre servidor (latència de la xarxa), més l’empleat en la construcció de la pàgina “Web application” i el temps emprat en fer-nos arribar per xarxa el primer “bloc” o byte.
RECOMANAT: és oportú tenir per mà el calcular aquesta mètrica. El TTFB ens ajudarà a comparar de forma correcta diferents servidors i xarxes. És un aliat per poder avaluar un proveïdor d’allotjament.
El nostre objectiu: TTFB < 500ms per la “velocitat d’usuari” (per exemple, carregar la pàgina d’inici), <1000ms per la “velocitat admin” (per exemple quan actualitzem un post des del nostre panell administració de WordPress).
Utilitzant el navegador per mesurar el TTFB
No és necessari instal·lar cap eina, gairebé tots els navegadors permeten mesurar el TTFB des de la seva secció “developers”. En el nostre cas treballarem amb el panell Developers Tools de Chrome i en concret amb la pestanya Network.(Aquí hi trobreu la documentació oficial de google).
Com accedir al panell: (seleccionem “Menu→View→Developer→Developer Tools. La combianció de teclat és ⌥+⌘+I per OSX Mac i F12+Ctrl+Shift+I a Windows. Després d’obrir-se el panell, seleccionem la pestanya Network.
En la captura el TTFB és de 162 ms. Aquest és un excel·lent resultat. Més endavant detallem el checklist a seguir per aconseguir un resultat com aquest.
En la següent captura mesurem la “admin speed“. Aquest TTFB és bastant més elevat. És l’espera que sofrim constantment quan premem el botó “Guardar” mentre escrivim articles des del nostre WordPress.
Des del panell d’Administració de WordPress, no podem aprofitar-nos de les tècniques de cache (prefabricación de pàgines i consultes). Aquí necessitem que el nostre servidor sigui realment ràpid i sobretot disposar d’un WordPress no sobrecarregat de plugins.
Com optimitzar WordPress i el servidor que l’allotja?
La llista de comprovació – El Checklist
1 Validar la latència de la connexió del nostre proveïdor.
La latència és la part del TTFB relacionada amb la xarxa; és el temps en mil·lisegons que triga una unitat mínima de dades a desplaçar-se entre un origen i una destinació.
IMPRESCINDIBLE: una latència inferior als 100ms dins del continent origen, i menys de 200ms en continents remots.
Pots construir el teu mapa de latències aquí: : http://www.maplatency.com/
RECOMANABLE: La latència està estretament lligada a la infraestructura del proveïdor. Si tenim problemes de latència, a) comunica-li-ho al teu proveïdor, b) busca proveïdors de hosting que treballin en el continent on la teva audiència resideix i traça un mapa de latències de cadascun d’ells.
2 Alleugereix el teu WordPress
El més comú dels problemes quan estem enfront d’un TTFB alt és un WordPress carregat de plugins.
RECOMANABLE: Instal·la solament els necessaris. Donar una xifra per “molts plugins” no és fer ciència, però sí que podem dir que podem tenir problemes de rendiment si ens enfrontem a més de 20 plugins. Donen Norris, co-fundador de l’empresa de serveis de suport WordPress “WP Curve” (adquirida per GoDaddy), té un bon article en el qual recomana no anar més enllà dels 20 plugins. A wetopi estem usant 16 plugins!
RECOMANABLE: per mesurar l’impacte dels plugins que tens instal·lats, utilitza de forma temporal el plugin P3 Plugin Profiler o Query Monitor.
IMPRESCINDIBLE: Valida el tema. Molts temes de “propòsit general” solen venir amb infinitat d’opcions. El que a priori sembla un avantatge, sol tenir en la majoria dels casos una contrapartida: un pobre rendiment. Una ràpida prova per veure si el teu tema és el causant de baix rendiment és comparar el TTFB d’una de les pàgines de la web usant un dels temes per defecte de WordPress.
COMPTE: Abans de realitzar experiments amb el teu web producció, fes una còpia de seguretat, o millor encara: experimenta sempre sobre clon o entorn “sandboxing”.
Recorda que cada plugin o tema que afegim implica canvis en la base de dades i en l’estructura d’arxius. Per aquest motiu cal tenir present que el procés invers “desinstal·lar”, no sempre tornarà a deixar el nostre WordPress tal i com estava inicialment.
!El sandboxing o treballar sobre clons no és perdre el temps!
Avui dia experimentar sobre clons del web producció està a l’abast de qualsevol. Aquest és un d’aquests serveis afegits que haurem d’exigir a qualsevol hosting especialitzat en WordPress.
3 Optimitzar la base de dades
Si el nostre WordPress porta temps en marxa, és imprescindible optimitzar i “netejar” la base de dades.
RECOMANABLE: Optimitza la base de dades. Si no ens sentim còmodes administrant la base de dades directament, podem ajudar-nos de plugins com WP-Optimize. Aquest plugin ens assistirà en el procés d’optimitzar taules de dades i en la neteja de registres “prescindibles”. En aquest tutorial trobarem un “pas a pas” detallat. Ah! no oblidem desactivar o eliminar aquest plugin després de realitzar les tasques de neteja.
4 Servir les pàgines ràpid
Aquest és un altre dels punts a mesurar amb el TTFB: veurem si el server i els serveis encarregats de construir i servir les pàgines del nostre WordPress son prou ràpids.
IMPRESCINDIBLE: un hosting amb recursos reservats: Per exemple a wetopi.com utilitzem contenidors. L’ús de contenidors permet oferir aïllament i reserva de recursos tal com faríem amb màquines virtuals, reduint els costos de manteniment i administració. És aquí en l’administració on recau el veritable cost dels servidors dedicats.
IMPRESCINDIBLE: un allotjament amb emmagatzematge SSD (Solid State Disks).
EVITAR: un hosting amb SSD però sense RAID o sense solució equivalent per disposar de redundància. Els discos SSD són més fiables però també fallen.
RECOMANABLE: Servidor de pàgines Nginx configurat per servir pàgines WordPress. Un Nginx ben sintonitzat treballant amb un PHP-fpm pot sense problemes anar el doble de ràpid del que aniria una configuració estàndard Apache + mod_php.
IMPRESCINDIBLE: revisa la configuració de PHP. És imprescindible tenir activat el sistema de cache OpCache (o equivalent). És la primera de les eines de cache per la que hem de començar. La seva gestió resulta gairebé transparent i amb una aplicació com WordPress, amb gran intensitat de process d’scripts php, en treurem força profit.
RECOMANAT: php7. Busca un proveïdor de hosting que et permeti crear un entorn sandboxing o simplement clonar el teu lloc web perquè així puguis validar que el teu web WordPress funciona perfectament amb el nou motor php7. WordPress core porta temps sent compatible amb php7. En realitat caldrà nomès validar que el teu tema i plugins també ho són.
En el nostre cas, aquesta mateixa pàgina està allotjada en un servidor wetopi de tipus “Medium”. Aquests servers els pots desplegar amb un sol clic de ratolí i venen per defecte amb nginx i php-fpm optimitzats pensant en WordPress.
5 Cache
Després d’introduir les millores dels punts 2, 3 i 4, el següent pas, en l’etapa final de construcció de la pàgina, és ajudar-nos d’un sistema de “Cache”. Aquest tipus de cache consisteix en deixar les pàgines del nostre website “prefabricades”, alleugerint la càrrega de feina del nostre servidor. Aquí podrem millorar molt la velocitat d’usuari però poc podrem fer per ajudar la “velocitat admin”, la de l’entorn d’administració de WordPress.
RECOMANAT: Fer servir un plugin de cache: WP Super Cache (senzill i eficaç), W3 Total Cache (potent però molt complex).
Més informació: https://premium.wpmudev.org/blog/top-wordpress-caching-plugins/
6 HTTP/2
Aquest és un nou protocol de xarxa. És el nostre servidor de pàgines web qui l’implementa. HTTP/2 ofereix importants millores de rendiment i el seu únic punt a considerar que és que requereix d’una connexió segura.
IMPRESCINDIBLE: Si ja tens HTTPS però no estàs treballant amb aquest nou protocol, aquí tens molt per millorar. Les connexions HTTPS ja de per si mateix afegeixen temps extra necessaris per a la negociació i l’intercanvi de claus i aixó vol dir que estem afegint com a minim 100 ms de més. HTTP/2 compensa sobradamente aquest temps mitjançant tècniques de multiplexació. Absolutament recomanable treballar amb un proveïdor de hosting que et proporcioni aquest protocol.
RECOMANAT: un allotjament amb servidors preparats per treballar amb HTTP/2. Els nous avantatges que aporta: el “Multiplexing” i la compressió de capçaleres “HTTP”, ens ajudaran a millorar el –Temps de càrrega– o “Browser page load”.
És important que el proveïdor de serveis proporcioni un sistema per simplificar la gestió dels Certificats Segurs. A Wetopi per exemple tots els webs WordPress poden generar i instalar els certificats amb un simple “clic”.
I aquí acaba el checklist!
Son 6 punts, però els més efectius per optimitzar la velocitat de WordPress en les etapes inicials de construcció de la pàgina i la seva distribució xarxa.
NOTA: En aquesta primera part, no entrarem a analitzar la qualitat, quantitat o estructura del contingut d’un website ni les tècniques per minimitzar l’impacte de distribució utilitzant CDNs o Multiplexación HTTP/2.
Si estàs llegint aquestes línies, realment t’estàs prenent seriosament el millorar la velocitat de WordPress. No ens malinterpretis si hem deixat pel camí algun aspecte que consideres important. Millorar la velocitat de WordPress és un tema dens i aquest article intenta mostrar el camí més efectiu!
Comença a gaudir d’aquesta eina!
Resumidament, som uns techies apassionats per WordPress que hem creat Wetopi, un Hosting WordPress Gestionat, per minimitzar la fricció a la que tot professional s’enfronta en treballar i allotjar projectes WordPress.
Inclou servidors de desenvolupament Gratis.
No cal tarjeta de crèdit.