Tutorial de WP Rocket per optimitzar la velocitat web

Què és WP Rocket?

WP Rocket és un plugin que va néixer com a solució per a les diferents optimitzacions de cache a WordPress. Avui és molt més, i podem no només optimitzar cache, sinó pràcticament tot el relacionat amb l'optimització del rendiment de càrrega del lloc web.

Per demostrar el seu impacte, fes un cop d'ull al rendiment del nostre propi lloc AMB i SENSE WP Rocket:

Per què utilitzar WP Rocket?

Encara que hem dit que hi ha altres alternatives per a l'optimització WPO, i tothom és lliure d'utilitzar la que cregui convenient, en el nostre cas tenim una preferència especial per WP Rocket. La seva interfície intuïtiva que funciona amb un clic d'una casella, les múltiples opcions que ofereix per a la configuració de cache i la càrrega de recursos, fan de WP Rocket el nostre favorit entre totes les opcions.

Menú principal de WP Rocket

Suposant que no hem tingut problemes per instal·lar WP Rocket, comencem a explicar la seva interfície i les diferents opcions disponibles per a l'optimització. Quan fas clic a la pestanya del dashboard, apareix la pantalla següent:

Un missatge de benvinguda i opcions que inicialment podem deixar de banda, però que explicarem aquí.

El meu compte

Si has comprat WP Rocket, la caixa "View my account" et portarà a la pàgina d'usuaris de WP Rocket perquè, un cop allà, puguis completar i comprovar tot el relacionat amb el teu perfil d'usuari: dades, facturació, etc.

RocketCDN

RocketCDN és un servei CDN que WP Rocket ha estat oferint relativament recentment. L'objectiu és proporcionar les eines necessàries per aconseguir el millor rendiment sense haver de buscar solucions fora del plugin. Hi ha altres serveis CDN molt populars i igualment efectius com Cloudflare o Amazon CloudFront.

El meu estat

Dins d'aquesta opció tenim dos interruptors per activar:

• ›

  Rocket Tester: aquest és el programa de millores de WP Rocket per provar les seves versions BETA. Has de contactar-los per correu electrònic.

• ›

  Rocket Analytics: Acceptes compartir les teves dades de rendiment de WordPress de manera anònima amb l'equip de desenvolupament per ajudar a millorar WP Rocket.

Hi ha poc a dir aquí, aquesta és una decisió personal que no hauria d'afectar el rendiment.

Configuració de cache a WP Rocket

És hora d'entrar a les opcions de configuració i començarem amb la cache:

A la segona pestanya del plugin, podem veure quines opcions de cache ens ofereix. Recordem que a WP Rocket estem optimitzant la cache de pàgina i, com veurem ara, també tenim una opció per a usuaris registrats, però hem d'anar amb compte amb aquesta opció.

Cache mòbil

Normalment, quan parlem de mòbil també incloem tablets, però aquesta vegada només parlem de dispositius mòbils. WP Rocket detecta mitjançant el user agent que estem navegant des de smartphones.

Sempre activarem aquesta opció, ja que com a regla general, els dissenys d'escriptori i mòbil són diferents, llevat que no tinguem una versió responsive, aquesta opció sempre estarà activada. Per deixar-ho clar, per què voldríem que se'ns lliuressin 2 versions cachejades si el disseny fos el mateix? És a dir, si no tinguéssim una versió mòbil, no voldríem que aquesta cache es tractés de manera diferent, oi?

Aquí s'afegeix una excepció. Quan tenim una versió mòbil amb recursos o elements que només es carreguen en aquella versió, desarem fitxers per separat.

Exemple:

• ›Tenim un anunci que al mòbil carrega un JS que la versió d'escriptori no té.

En aquest cas sí que desaríem fitxers separats per al mòbil.

Cache d'usuari

La cache d'usuari és una opció que WP Rocket proporciona per a aquells usuaris que naveguen mentre estan registrats.

Activant aquesta opció, podem oferir una versió de cache individualitzada per a cada usuari. El millor és activar-la si els usuaris inicien sessió, però has d'anar especialment amb compte amb quines pàgines es cachegen i quines no, perquè si l'usuari introdueix dades personals (per exemple, informació bancària), emmagatzemar-les a la cache podria causar-nos problemes legals.

Com excloure una pàgina perquè no es cachegi?

Si vols evitar problemes d'aquest tipus, el millor és anar directament a la pàgina que vols excloure i a les opcions de WP Rocket (barra lateral o inferior) seleccionar "never cache this page".

Vida útil de la cache

En aquesta secció només hem d'indicar la durada que volem per als fitxers de cache que es generen. És a dir, WP Rocket genera un fitxer desant la versió de la teva pàgina, i aquest fitxer serà el que es lliurarà a l'usuari quan accedeixi al lloc web.

Mitjançant un gestor de processos (CRON), els fitxers generats que excedeixin la durada indicada s'eliminaran i se'n crearan de nous.

Coses a tenir en compte

WP Rocket ja té en compte certs processos per eliminar i generar nous fitxers de cache, que són els següents:

• ›

  Generació de noves entrades, pàgines, categories, taxonomies o edicions

• ›

  Generació i edició de nous mòduls, widgets o qualsevol element del lloc web

• ›

  Quan es canvien configuracions de WP Rocket que afecten el frontend.

A part d'això, has de tenir en compte que emmagatzemar fitxers de cache ocupa espai al teu servidor i aquest espai és limitat. També és recomanable netejar la cache des de WP Rocket perquè s'actualitzi i no quedin fitxers que ja no són necessaris.

Pel que fa al temps, pots deixar el valor per defecte.

Optimització de fitxers a WP Rocket

Després de repassar breument la configuració de cache, és hora de treballar l'optimització de fitxers. L'optimització de fitxers es fa per alleugerir la càrrega i renderització d'HTML. Com podem treballar aquesta optimització?

De diverses maneres:

• ›

  Reduint el pes dels fitxers

• ›

  Eliminant fitxers innecessaris, i

• ›

  Executant fitxers progressivament a mesura que es necessiten.

Fitxers CSS

Els fitxers CSS són responsables de la part visual del lloc web. Les fulles d'estil que donen forma, color i estil al nostre WordPress. En aquest aspecte, un disseny atractiu pot no ser un disseny optimitzat, perquè el dissenyador, en construir el CSS, pot no haver seguit una sèrie de regles bàsiques d'optimització.

Entre els problemes més comuns que solem trobar amb les fulles d'estil hi ha:

• ›

  Fitxers CSS pesats

• ›

  Fitxers CSS que es carreguen en pàgines que no utilitzen aquests estils

• ›

  Fitxers CSS mal construïts

• ›

  Carregar massa CSS externs

• ›

  Utilitzar @import per portar fulles d'estil externes

En resum, hi ha un món de pràctiques que sovint s'utilitzen i que no són recomanables per a l'optimització d'un bon disseny, però anem al que ens ofereix WP Rocket.

Minificar fitxers CSS

Aquesta opció pretén reduir el pes dels fitxers CSS eliminant espais i salts de línia. WP Rocket l'implementa activant la casella.

Consell SEO Alive: Sempre que executem una acció, és bona idea provar de carregar el lloc web per veure si tot està correcte, fes-ho en mode incògnit del navegador.

El procés es representa a la imatge següent presa de l'eina minifier.org.

Combinar fitxers CSS

Aquesta característica fa una mena de "copia i enganxa" del codi d'un CSS a un altre per evitar carregar múltiples fitxers CSS i només tenir-ne un.

És recomanable continuar provant perquè depèn molt de com s'ha desenvolupat el tema, perquè si tinc un fitxer CSS que només es carrega en un tipus específic de pàgina, el que no vull és que aquest codi es carregui en un sol fitxer a totes les pàgines.

L'ideal és carregar el codi utilitzat per la URL. Marca la casella i prova amb alguna eina com GTMETRIX per veure si has millorat la velocitat de càrrega.

El benefici de combinar fitxers CSS és reduir peticions al servidor.

Optimitzar la càrrega de CSS

WP Rocket s'ha actualitzat tenint en compte les recomanacions proporcionades per diverses eines de Google per a l'optimització de la velocitat de càrrega. Si ja tenim experiència amb aquestes eines, segur que ens hem trobat amb l'avís "Eliminate render-blocking resources". Activant aquesta marca, evitem que els CSS bloquegin la càrrega fent que es carreguin asíncronament.

És a dir, la renderització d'HTML no s'atura quan ha de descarregar el fitxer CSS; aquest fitxer es carrega en segon pla, evitant que s'aturi el procés de càrrega. Així que val la pena activar-ho.

Fitxers JS (JavaScript)

JavaScript ha estat un dels grans problemes que Google ha trobat en processar HTML. Sense entrar massa en aquest tipus de llenguatge, WP Rocket ha dissenyat 5 accions bàsiques per optimitzar aquest tipus de fitxer. Fem-hi un cop d'ull!

Eliminar jQuery Migrate

jQuery Migrate és una llibreria JavaScript que permet la compatibilitat amb codi jQuery desenvolupat per a versions de jQuery anteriors a 1.9. Aquesta llibreria ve nativament a WordPress però pràcticament no té ús (alguns plugins poden necessitar-la).

Amb aquesta acció, volem evitar una petició innecessària i la càrrega d'un JS que no s'utilitzarà. Desactiva-la i navega pel teu lloc web per veure si tot funciona correctament!

Minificar fitxers JavaScript

Igual que el que s'ha explicat amb els fitxers CSS, aquesta acció s'aplicaria als fitxers JS, reduint lleugerament la mida dels fitxers JS.

Combinar fitxers JavaScript

Una altra acció similar al mòdul d'optimització de CSS. Recorda que quan activem aquestes caselles hem de verificar si tot funciona com abans.

Carregar fitxers JavaScript de manera diferida

La marca a aquesta acció fa dues millores en el rendiment:

• ›

  Afegeix l'atribut "defer" al JS per evitar que la renderització d'HTML s'aturi a causa d'una càrrega de JS. Amb aquesta acció, es descarrega en paral·lel i s'executa al final del processament d'HTML.

• ›

  Mou els JS que bloquegen la renderització inicial.

WP Rocket ens avisa que aquest tipus d'activació pot causar problemes, per això introdueix un mode segur per evitar problemes de càrrega d'elements essencials per a la visualització correcta de la pàgina.

Retardar l'execució de JavaScript

Una altra opció per retardar l'execució de JavaScript que no és essencial fins que l'usuari interactua amb la pàgina. Aquesta acció no sembla molt important, però sí que ens permet guanyar temps perquè la càrrega passi més ràpidament. La interacció pot ser un clic, scroll, moviment del ratolí...

Optimització de mèdia

A aquesta pestanya, cobrirem l'optimització d'elements clau als primers passos de l'optimització WPO. Estem parlant d'imatges, vídeos, iframes i elements integrats a WordPress la funcionalitat dels quals és, com a mínim, qüestionable.

Lazyload

Una acció essencial en qualsevol optimització de velocitat de càrrega. La funció Lazyload fa que elements com imatges, vídeos i iframes no es carreguin fins que són essencials per a la visualització.

Deixa'm donar-te un exemple. A mesura que fem scroll, les imatges es carreguen. Imagina com seria carregar aquesta pàgina si 30 imatges es carreguessin alhora, especialment si l'usuari ni tan sols les està veient al principi.

Emoji

Els navegadors ja inclouen els seus propis emojis, així que podem estalviar aquesta petició que es fa si no activem aquesta marca. La meva recomanació és que l'activis.

Contingut incrustat

Impedeix que altres persones incrustin contingut del teu lloc i també impedeix que tu incrustis contingut d'altres llocs no autoritzats. Es redueixen les peticions fetes amb aquest JS.

Compatibilitat amb WebP

WebP és un format relativament nou que Google va introduir cap al 2010, per a compressió amb pèrdua de gràfics de 24 bits a la web, millorant la provisió d'aquests recursos per accelerar la seva càrrega.

Actualment no tots els navegadors el suporten, així que hauràs d'anar amb compte i saber quin navegador utilitzen els teus usuaris en treballar amb aquest format. Activa aquesta opció si treballes amb imatges WebP.

Configuració de la precàrrega de cache

Necessitem entendre bé com es generen els fitxers de cache de WP Rocket per entendre la funció Preload.

Quan un usuari visita una pàgina del nostre lloc per primera vegada, és quan la pàgina es cacheja i es genera un fitxer cachejat que es lliurarà als usuaris posteriors. El mateix passa quan la cache caduca (el temps que hem determinat) i la versió cachejada s'elimina, o quan nosaltres mateixos netegem la cache de totes les nostres URL.

Preload Cache

Activant l'opció Preload, el que farem és carregar una versió cachejada prèviament perquè fins i tot el primer usuari tingui una versió més ràpida del nostre lloc. Aquesta acció es realitza mitjançant els enllaços del sitemap, així que necessitarem un sitemap.

El sitemap és un fitxer generat on es mostren les URL del nostre lloc. Amb plugins com "Rank Math" o "Yoast" el podem generar fàcilment. Si vols veure com crear un sitemap amb Rank Math, aquí t'ho mostrem.

Preload Links

Aquesta és una funció que WP Rocket ha incorporat en les seves últimes versions. L'objectiu és anticipar la càrrega de les "següents pàgines que l'usuari va a visitar". En passar el cursor per sobre, es realitza la precàrrega de la pàgina en cas que l'usuari faci clic a l'enllaç.

WP Rocket ha adoptat aquesta funció que plugins específics com "Flying Pages" ja estaven implementant per millorar la fluïdesa de navegació dins el lloc (experiència d'usuari). Dit això, no és un factor que millori el temps de càrrega, i no veuràs la millora a les mètriques de les eines d'auditoria WPO.

Precàrrega de peticions DNS

La precàrrega de peticions DNS ve molt bé quan utilitzem recursos de tercers com YouTube, Facebook, fonts o iframes que sol·licitem freqüentment.

Quan fem qualsevol connexió a Internet, es fa una petició DNS que s'ha de resoldre i enviar al servidor. Això té una durada que podem millorar si afegim les URL dels recursos necessaris en aquesta caixa que WP Rocket ens proporciona.

Com podem veure a l'exemple, només cal utilitzar el nom de domini //youtube.com //facebook.com

La resolució DNS triga aproximadament de 20 a 120 mil·lisegons, com indica GTMETRIX, el navegador no descarregarà res del host fins que aquest procés es completi.

Precàrrega de fonts

La precàrrega de fonts requereix un pas previ, que és descarregar les fonts i tenir-les al nostre servidor. Un cop allà, podem fer la mateixa acció que vam fer amb la precàrrega de cache, fent una versió molt més ràpida del fitxer de fonts i proporcionant-la a l'usuari quan es connecta a la nostra pàgina.

Un cop allotjades les fonts, indicarem a WP Rocket la ruta exacta de les fonts utilitzades. Es recomana no abusar de fonts diferents a les nostres pàgines perquè requereixen descàrregues diferents. També tingues en compte que les peticions al servidor es fan amb les diferents variacions de la font, t'ho explico:

• ›

  Font negreta --> 1 petició

• ›

  Font subratllada --> 1 petició

• ›

  Font en majúscules --> 1 petició

Configurant les regles avançades de WP Rocket

Mai cachegis aquestes URL

Hi ha certes URL que, per la seva singularitat, no volem que se'n desi una versió cachejada. Des d'aquesta pestanya, WP Rocket ens permet introduir una llista d'URL que mai volem que es cachegin.

Mai cachegis aquestes cookies

WP Rocket ens dóna una altra eina de control més enllà de fer-ho per URL. Molts plugins funcionen amb les seves pròpies cookies o fins i tot podem instal·lar-ne de pròpies per identificar certs usuaris; hi ha moltes maneres d'utilitzar aquests petits fitxers.

Amb WP Rocket podem deixar de cachejar URL identificades per l'ID de la cookie, un cop descarregada al navegador de l'usuari, personalitzant així encara més el tipus d'URL que volem que es cachegin.

Mai cachegis aquests user agents

El user agent és un camp descriptiu dins el protocol HTTP, utilitzat per proporcionar informació sobre el dispositiu que fa una petició. Coneixent aquesta informació, podem evitar que es lliurin pàgines cachejades a aquests user agents.

Per exemple, un dels user agents de Google és Googlebot, així que indicant-lo en aquesta part del web, cada vegada que accedeixi al nostre lloc web li oferirem les pàgines sense cachejar.

Sempre purga aquestes URL

Aquesta opció és molt interessant per a un tipus d'URL que, per exemple, t'interessa que sempre tingui el seu fitxer de cache eliminat quan s'actualitza.

Per exemple, tinc URL amb resultats esportius i el que no vull és lliurar una versió cachejada a l'usuari, ja que els resultats s'actualitzen molt freqüentment.

Cachegeu aquestes query strings

Les query strings són dades que s'envien en fer una petició a una pàgina web mitjançant la URL.

Normalment s'identifiquen pel símbol del signe d'interrogació "?" i com a regla general WP Rocket no cacheja aquest tipus d'URL. En aquesta opció podem forçar-ho a fer-ho.

Configuració de base de dades amb WP Rocket

Com hem dit repetidament al llarg de l'article, WP Rocket ha deixat de ser només un plugin de cache per convertir-se en un plugin per optimitzar la velocitat de càrrega del nostre lloc web. En aquesta secció de configuració, podem aprofundir en l'optimització de la base de dades.

A mesura que treballem amb el nostre contingut a WordPress, generem altres tipus d'informació que no són útils i perjudiquen el rendiment del nostre lloc web. Per a això, WP Rocket ens proporciona aquesta eina per fer una neteja més o menys profunda.

Neteja de posts

Com podem veure a la imatge, hi ha 3 elements que poden estar ocupant espai a la base de dades sense que ens interessin. Quan actualitzem contingut, es desa una versió anterior, també es genera un esborrany automàtic del que estem editant, i entrades descartades.

Si eliminem aquests elements, alliberarem espai a la nostra base de dades.

Neteja de comentaris

Aquesta part és important perquè a vegades la nostra base de dades s'omple de comentaris "spam", per això WP Rocket ha introduït aquesta opció per netejar aquest tipus d'element.

Neteja de transients

Quan treballem a WordPress, es generen certs elements transitoris que podem eliminar sense problema ja que es regeneraran.

Neteja de base de dades

Tant aquest punt com el següent, recomano fer una còpia de seguretat de la base de dades perquè, encara que no hauria de passar res, aprofundir en accions dins la base de dades sempre té els seus riscos, així que no és mala idea fer una còpia de seguretat.

Activant aquesta marca s'efectuarà una neteja de les taules de la base de dades. Aquest procés pot ser automatitzat.

Configurant CDN amb WP Rocket

Abans d'aprofundir més en com configurar CDN amb WP Rocket, vull explicar què és un CDN i per què s'utilitza.

Què és un CDN?

Un CDN (Content Delivery Network) és un servei l'objectiu del qual és millorar la velocitat de transferència de contingut a l'usuari. Per fer-ho, crea una xarxa de distribució de contingut en diferents servidors arreu del món per escurçar els temps a la petició de recursos de l'usuari. És a dir, si l'usuari està al Brasil, un CDN ofereix el contingut allotjat en un servidor més proper a ell que el servidor de hosting web real.

Imatges preses de la pàgina de WP Rocket

Com funciona un CDN?

Opera mitjançant aquests altres servidors que emmagatzemen una còpia cachejada del lloc web, i quan l'usuari sol·licita aquest contingut/recursos, un servidor més proper realitza la transferència.

Aquests tipus de serveis són molt útils quan tens contingut pesat com imatges, àudios, vídeo i/o moltes visites. Si inicialment tens un lloc web amb poques visites, no t'hauries de preocupar per aquest aspecte.

RocketCDN

WP Rocket ens ofereix la possibilitat de contractar el seu CDN a un preu de 7,99 dòlars al mes, menys de 7 euros.

CDN

Quan contractem un CDN se'ns proporciona informació per utilitzar-lo. Un d'aquests elements proporcionats és el CNAME, encara que si no es proporciona el podem obtenir.

El CNAME és un tipus de registre DNS que mapeja un nom de domini d'origen a un nom de domini objectiu

Per utilitzar aquesta funció només haurem d'indicar aquest CNAME i dir-li per a quins fitxers el volem.

Excloure fitxers de CDN

L'opció següent, com era d'esperar, és excloure aquells fitxers que no volem que passin pel CDN.

Optimització de la funció Heartbeat de WordPress

El heartbeat de WordPress és una transferència de dades de control per establir comunicació entre el backend i frontend de WordPress i el servidor. Aquest tipus de procés pot ser una de les raons per les quals pots experimentar lentitud al teu WordPress.

Entre les accions que es poden limitar hi ha:

• ›

  Auto-desament i revisions a l'editor de posts.

• ›

  Notificacions al panell d'administració de WordPress.

• ›

  Informació sobre qui està editant.

• ›

  Dades en temps real.

Si el nostre WordPress està funcionant correctament, no recomano fer res en aquest punt, però si notem lentitud, podem intentar limitar l'activitat a les diferents opcions.

Configurant Add-ons de WP Rocket

Hi ha certs elements com els scripts de Google Analytics i Facebook, que simplement activant-los en aquesta part de la configuració podem obtenir una versió cachejada i millorar el rendiment. Aquesta acció respon directament a una de les peticions normalment indicades a les auditories de velocitat de càrrega com Pagespeed "Leverage browser caching".

Optimització d'imatges

L'optimització d'imatges és un procés que per la seva complexitat podria tenir la seva pròpia guia. WP Rocket ofereix un plugin independent per treballar amb aquests recursos. Des de WP Rocket podem accedir a la descàrrega de la seva versió "Free".

Eines de WP Rocket

Les configuracions de WP Rocket es poden desar i importar per evitar haver de gastar temps en aquest procés de nou. També ens dóna l'opció de fer un "Rollback", és a dir, anar enrere pel que fa a la versió instal·lada.

Tutorials de WP Rocket

Per acabar aquesta guia de WP Rocket, el propi plugin proporciona una sèrie de vídeos donant informació sobre les diferents accions que es realitzen i com dur-les a terme.

Conclusions

Com has vist, WP Rocket és més que un plugin de cache; tenim a la nostra disposició una suite completa per optimitzar la velocitat i el rendiment del nostre lloc web, així que ara només queda provar les diferents opcions. Què esperes per fer volar el teu WordPress?

Coneixies WP Rocket? Has pogut millorar el teu rendiment amb aquesta guia? Tens alguna pregunta? T'esperem als comentaris!