Situació orginal
1. Còpia de treball i actualitzacions bàsiques
Per treballar amb seguretat, vam crear una còpia de la web en un servidor de proves. Això ens permetia fer modificacions sense afectar l’activitat de la web real. Aquesta pràctica és essencial quan es fan canvis importants.
Vam començar actualitzant el nucli de WordPress (de la versió 6.7 a la 6.8), el tema DIVI i més de 15 plugins, entre ells WooCommerce. Aquest pas és clau perquè moltes millores de rendiment i seguretat s’apliquen a través d’actualitzacions. També vam habilitar Memcached al servidor, un sistema de memòria cau que ajuda a reduir les consultes repetides.
En el nou servidor
Detall de recursos
2. Optimització d’imatges amb ShortPixel
Les imatges són sovint el recurs que més pesa en una web. Per això vam instal·lar ShortPixel, un plugin que redueix la mida de les imatges mitjançant compressió intel·ligent. Sense perdre qualitat visual perceptible, vam aconseguir reduir-ne el pes un 50% de mitjana. Això fa que les pàgines es carreguin més ràpid i consumeixin menys dades, especialment en dispositius mòbils.
3. Gestió del vídeo de portada
El vídeo inicial tenia un pes de 6,1 MB, una xifra molt elevada per carregar de manera immediata a l’entrada d’una web. Tot i estar en streaming, GTMetrix n’analitzava el pes complet. Primer el vam optimitzar amb Clop, i vam reduir-lo a 5,4 MB.
Un cop optimitzats els arxius de tipus mèdia, van instal·lar WPRocket per millorar la càrrega de WordPress.
4. WP Rocket + DIVI: gestió de CSS i JS
Per optimitzar els recursos CSS i JavaScript, vam instal·lar WP Rocket, un dels plugins més potents de WPO (optimització del rendiment web).
El primer és configurar DIVI per que no trepitji les funcionalitats de WPRocket.
El següent és configurar les opcions de WPRocket sobre el JS:
- Minificació d’arxius JavaScript
- Carregar els arxius JavaScript de manera diferida
A continuació vam activar Retrasar la ejecución de Javascript a WPRocket i la vam configurar pels plugins que detectava (com RankMath o Gravity Forms).
En aquest punt, i tornant al tema del video, vam pujar-lo al servei d’Stream de bunny.net. Funciona d’una manera similiar a Youtube, però d’una manera segura, privada i amb cost (tot i que molt baix). Amb això descarreguem el nostre servidor d’haver de servir el video.
Bunny.net ens dona un enllaç de video de HLS, que no ens serveix per fer servir a DIVI (o a WordPress). Cal canviar la part final de la URL, que acaba amb .m3u8, per play_720p.mp4, per fer servir el video en format MP4 i mida 720.
5. WP Rocket: Media i fonts
El pas següent va ser activar el Lazy Load pels mitjans, imatges i videos, sense activar la imatge de video de Youtube, per que no hi ha videos de YouTube, i a més, és incompatible amb DIVI. Tampoc teniem cap imatge de banner que calgui carregar sense Lazy Load, així que no vam crear cap excepció. Sí que vam activar l’afegir dimensions a les imatges que no en tinguin.
Aquests van ser els resultats.
Aquests van ser els resultats.
Ens vam fixar en un detall que indicava GTMetrix, sobre una font carrega amb @import.
@import url('https://fonts.googleapis.com/css?family=Rubik:400,500');
6. Conclusions
Aquest cas demostra que una web lenta no sempre té una sola causa. Sovint, són molts petits detalls —una imatge massa gran, un vídeo mal gestionat, una font mal carregada— els que sumen segons i penalitzen el rendiment.
Amb una estratègia combinada (compressió, vídeos optimitzats, lazy loading, millora de CSS/JS i bones pràctiques tècniques), vam aconseguir una web molt més àgil, millor valorada per Google i més agradable per als usuaris.
Una web ràpida és una web que funciona. I aquest cas ho demostra.