Una gran web comporta una gran responsabilitat. Sí, no riguis. No s’hi val crear el teu propi lloc web i deixar-la a la intempèrie d’internet. L’has de cuidar, l’has de mimar. I, és clar, l’has d’optimitzar. Per això, en aquest article t’explicaré perquè optimitzar WordPress és fonamental i com pots fer-ho tu mateix de forma senzilla.

L’objectiu és que, al final d’aquest post, la teva web carregui ràpidament i necessiti consumir menys recursos del servidor.

De fet, el servei d’Optimització WordPress és un dels serveis que oferim a becicleta.com, l’Estudi Online de Disseny i Desenvolupament WordPress que tenim amb la Rosa. Sempre estem buscant noves formes d’aconseguir millorar la velocitat de càrrega dels webs dels nostres projectes, així com el seu rendiment general.

I per què optimitzar WordPress és tant important? Alguns arguments ràpids.

En primer lloc, una web optimitzada rendirà millor. És lògic, oi? Si l’has treballat bé, executarà totes les seves funcions de forma dinàmica i suportarà més totes les càrregues de treball que se li presentin, incloses puntes de trànsit no habituals.

A la vegada, en millorarà la velocitat. Una web més optimitzada equival, sí o sí, a una web més veloç. I aquesta velocitat és una de les teves millors aliades, ja que l’experiència dels teus usuaris serà superior: estaran més contents a l’hora de visitar-te.

I un usuari content és sinònim d’un lead o potencial client. Té tot el sentit del món. Si la teva web és lenta i pesada, qui voldrà entrar-hi? En canvi, si és ràpida i lleugera, navegar-hi serà un plaer, la qual cosa aplanarà el camí cap a la conversió.

Finalment, un lloc web opitimitzat cau millor a Google. O, dit d’una altra manera, els llocs webs lents posicionen pitjor als resultats de cerca del buscador. I és normal, ja que Google vol oferir als seus visitants els millors resultats possibles. I quines webs creus que servirà primer, les optimitzades que carreguen ràpid o els totxos on no hi ha qui hi entri? Està clar.

Si noi, Google és un sedàs pel què hem de passar si no volem ser invisibles. No hi ha alternativa (o sí, pagar, però és un altre tema). Per això, més ens val fer tot el possible perquè el metabuscador ens tingui en compte.

Així doncs, ja sabem per què és important disposar d’un WordPress ben optimitzat. Ara només falta saber com fer-ho.

I això és exactament el que t’explico a partir d’ara 🙂

Com optimitzar WordPress

Si busques a la xarxa com optimitzar WordPress, segurament t’hauràs topat amb el concepte WPO, o Web Performance Optimization. El WPO no és res més que el procés d’optimització de llocs web tant a nivell d’usuari com de servidor per tal de reduir el seu temps de càrrega.

Doncs això és el que farem avui amb la teva web amb WordPress. Un procés de WPO per convertir-la en una màquina a ple rendiment 🙂

Abans de començar

Espera. Deixa’m donar-te un parell de tips ràpids abans de començar a optimitzar WordPress.

Fes una còpia de seguretat completa del lloc web

És millor prevenir que curar. Per tant, com sempre et recomano, abans de trastejar amb el teu lloc web és millor assegurar-nos que no perdrem res. Per tant, és fonamental que facis una còpia de seguretat completa de tota la web.

Aquest backup el pots fer de diverses formes. Segurament, la més senzilla (bàsicament perquè tu no ho hauràs de fer) és deixar-la en mans del teu hosting. Si treballes amb un proveïdor d’allotjament com ara Siteground, no serà necessari que et preocupis per res, ja que el servei inclou còpies de seguretat diàries automàtiques.

Si no és el cas, pots utilitzar algun plugin com ara UpdraftPlus o BackWPup o un servei com VaultPress, propietat d’Automattic (WordPress.com)

Migra la web a un entorn de treball

A més, no és gaire  adequat remenar la teva web en producció. La pots liar pardíssima i els teus usuaris veure el desastre en directe i des d’arreu del món. Per això, et recomano migrar la teva web en un entorn de treball expressament creat per fer-li totes les modificacions que vulguis sense afectar la web online.

Per això, tens diferents opcions:

• Migrar el teu WordPress a un entorn local: en aquest article t’explico els beneficis de treballar en local i quina és la millor eina per fer-ho.
• Migrar-lo a un hosting gratuït de desenvolupament: aquí comparteixo amb tu què és i com funciona Pilvia, un hosting gratis pensat expressament per desenvolupar WordPress.

Fent un backup complert de la web i migrant-la a un entorn de treball diferent i específic, pots estar completament segur que res ni ningú (tu tampoc) podrà espatllar-la.

Sentit comú

Aquesta és, sens dubte, la millor tècnica d’optimització WordPress que et puc recomanar. A què em refereixo? M’entendràs ràpidament.

Veus un theme molón per internet i te l’instal·les. Veus tres o quatre plugins que sembla que fan no sé què, i te’ls instal·les. Veus imatges precioses per a la teva web i les puges sense tocar-les. Segueixo…?

Això és exactament el contrari a utilitzar el sentit comú. Pensa que el teu WordPress no és infinit. I cada element que hi puges o hi instal·les, ocupa un espai i requereix d’uns recursos per funcionar.

Té sentit abocar-hi tot el que veus a la xarxa sense mesura?

I, encara més: té sentit deixar-ho tot allà fins i tot quan ja has vist que tot el que hi has abocat no et serveix per res?

Rotundament, no. De fet, és una de les pitjors pràctiques que pots seguir si treballes amb WordPress.

Recorda el que t’he comentat al principi: una gran web comporta una gran responsabilitat. I tot això és una gran irresponsabilitat.

Així doncs, abans de fer qualsevol cosa al teu lloc web, pensa. Pensa si realment ho necessites. Pensa si et servirà per aconseguir els teus objectius (perquè saps perfectament quin objectiu persegueixes amb el teu WordPress, oi?) I pensa si hi pots arribar d’una altra manera.

En resum:

• No instal·lis tots els plugins que trobis a la xarxa o que et recomani el gurú de torn.
• No pugis un munt d’imatges per molt boniques que siguin sense treballar-les.
• No et centris tant en el disseny i pensa més en la usabilitat. Si no toques codi, per aconseguir el disseny que desitges segurament hauràs de sobrecarregar la web de forma innecesària.
• I, sobretot, preocupa’t de cuidar el teu lloc web. És una part fonamental del teu projecte i necessita que li dediquis el temps que és mereix.

Si fas servir el sentit comú i tot el que t’explico a continuació, tindràs un WordPress optimitzat i sense problemes durant més temps.

Tria un theme ràpid i lleuger

No hauria de ser així, però, a l’hora de crear el seu lloc web, moltes persones es fixen primer en el disseny. En la part estètica de la web. I no dic que no sigui important, al contrari. Un bon disseny et pot ajudar a aconseguir els objectius que t’hagis fixat, ja sigui captar leads, clients, subscriptors, contactes…

El problema és que l’obsessió per un disseny atractiu sovint fa que s’acabin triant opcions poc professionals, mal acabades o directament negatives pel propi projecte.

És el que passa amb els themes de Themeforest. Com t’explico àmpliament en aquest post, comprar un dels themes que es venen en aquest marketplace és, possiblement, la pitjor decisió que pots prendre per a la teva plataforma web. El theme locking, la sobrecàrrega i la nul·la usabilitat ho expliquen de forma clara.

Si vols saber-ne més, et convido a llegir l’article complert, perquè hi ha força teca.

És per això que l’elecció d’un theme ràpid, lleuger, optimitzat i accessible basat en Genesis eliminarà, de cop, un dels grans motius pels quals molts llocs web amb WordPress són lents, pesats i poc optimitzats.

Si vols aprendre més sobre Genesis, en aquest article t’explico exactament per què aquest Framework és, de carrer, la millor opció per al teu lloc web amb WordPress.

En aquest sentit, et recomano optar per un child theme d’StudioPress, AsiThemes o, per què no, crear el teu propi child theme 🙂

Instal·la els mínims plugins possibles: el codi és el rei

A més plugins, més càrrega. A més càrrega, més pes. A més pes, més lentitud. A més lentitud, menys optimització.

Es així. WordPress ha arribat a copar el 30% de llocs web de tot el món en bona part gràcies a aquestes extensions, que amplien dràsticament la seva funcionalitat.

Ara bé, com tot a la vida, no cal abusar-ne. Si volem disposar d’un lloc web eficaç, hem de fer servir els plugins que necessitem i necessitar els plugins que fem servir. Ni més ni menys.

Per això, no has d’instal·lar tots i cadascun dels plugins que vas trobant per la xarxa. Perquè de plugins n’hi ha molts. Moltíssims. I la majoria són una porqueria.I molt menys has d’instal·lar plugins pirata per molt premium que siguin.

Ja t’ho he explicat moltes vegades: qualsevol funcionalitat que puguis aplicar directament per codi resultarà molt més eficient per al sistema. Això és així perquè, en general, els plugins apliquen aquella funcionalitat que t’interessa i unes quantes més.

I què passa si només en necessites una petita part? Doncs que t’has de menjar tota la resta.

Per això és bo que aprenguis una mica de codi si treballes amb WordPress. Et farà més eficient i independent a l’hora de modificar el teu lloc web sense límits ni restriccions. En aquest lloc web intento ajudar-t’hi cada setmana amb els  39 articles i 19 videotutorials publicats fins ara i els que vindran 🙂

I si n’has de fer servir, que siguin bons

Una cosa no treu l’altra. És cert que quants menys plugins millor, però també ho és que n’hi ha de necessaris i de molt bons, que converteixen el teu WordPress en una plataforma web complerta a l’alçada del que necessites.

Això sí. Abans d’instal·lar qualsevol plugin t’has de fixar en una sèrie de qüestions fonamentals:

• Que estigui actualitzat: fixa’t que el desenvolupador actualitzi el plugin de torn sovint. Desconfía d’una extensió actualitzada per darrera vegada fa tres enys.
• Que tingui moltes instal·lacions actives: que ho faci servir molta gent no sempre es sinònim de qualitat (mira sinó Windows). Però, com a mínim, t’indica que hi ha moltes persones que hi confien, la qual cosa t’assegura que si tens qualsevol problema, trobaràs força informació a la xarxa.
• Que el desenvolupador tingui presència als fòrums de WordPress.org: aquest punt potser se t’escapa, però és senzill. Només has de fer clic sobre el nom del desenvolupador del plugin en qüestió del repositori, i veure’n el perfil. Ha desenvolupat d’altres plugins? Participa de forma regular als fòrums de WordPress? Dóna suport als usuaris del seu software? És important tenir-ho en compte.

I, sobretot, sobretot, si no fas servir un plugin… no n’hi ha prou amb desactivar-lo: has d’eliminar-lo. Per què el vols tenir instal·lat si no l’utilitzes? Per “si de cas”? Pensa que tot plugin instal·lat a WordPress consumeix recursos i, per tant, contribueix a la penalització del rendiment general del lloc web. Si no et fa falta, fora. Sense pietat.

Com veus, no es tracta d’instal·lar tot el que veus, sinó de fer servir única i exclusivament allò que necessites. D’aquesta manera, els plugins no seran una rèmora sinó que contribuiran a que tinguis un WordPress potent i, a la vegada, optimitzat.

Instal·la un plugin de catxé

Un dels grans problemes dels CMS és que per tal de mostrar els diferents continguts, han d’efectuar consultes a la base de dades. I això no és poca cosa, ja que aquestes consultes augmenten els temps d’espera i, en conseqüència, penalitzen la velocitat de càrrega dels llocs web.

És per això que, si treballes amb WordPress, la utilització d’algun plugin de catxé és pràcticament imprescindible. D’aquesta manera, podem oferir als nostres visitants una versió estàtica de la web fins que hi hagi algun canvi (com pot ser un nou post). Així, podran accedir al contingut de forma molt més ràpida, sense lags i temps d’espera excessius.

En aquest sentit, hi ha diversos plugins que et poden ajudar a millorar l’experiència d’usuari dels teus visitants fent-los accessible el contingut més ràpidament. Les opcions gratuïtes més recomanades són:

• WP Super Cache: és un plugin senzill de configurar. Gestiona catxé estàtica i dinàmica i és compatible amb sistemes de CDN.
• W3 Total Cache: en aquest cas, parlem d’un plugin més complex de configurar però, en canvi, és molt potent, ja que està pensat per llocs web amb més trànsit. També és compatible amb CDN.
• SuperCacher: és el plugin de Siteground per als usuaris que, com jo, tenen allotjat WordPress als seus servidors. Es tracta l’opció més senzilla de totes, ja que no s’ha de configurar: només activar.

Pel que fa als plugins de pagament, et recomano WP Rocket, ja que es tracta del plugin Premium de catxé de referència per a WordPress. És instal·lar-lo i veure com la teva web vola!

WP Rocket té moltes opcions de configuració, per adequar-lo a les teves necessitats. I el més important, és molt fàcil de gestionar (no com altres plugins, que compliquen més que cap altre cosa). A més, s’integra perfectament amb Cloudflare (ara en parlem) i ofereix un suport de molta qualitat.

Poca cosa més se li pot demanar al millor plugin de catxé per al teu WordPress.

Utilitza un CDN

Un CDN és una xarxa de distribució de continguts, un sistema que crea una memòria catxé del contingut de la teva web i la distribueix a través de diversos datacenters de tot el món.

D’aquesta manera, quan algú visita la teva web, el contingut s’entrega des del centre de dades mes proper al servidor del teu visitant. Això facilita que la web carregui molt més ràpid des de qualsevol punt del món.

Aquesta tècnica d’optimització aporta molts beneficis, ja que reparteix la càrrega i les peticions de la teva web en diversos servidors.

A més, el contingut servit des de la xarxa també està comprimit i fins i tot pot disposar d’un firewall per tal d’augmentar-ne la seguretat.

Un dels proveïdors de CDN més populars és Cloudflare. Aquesta eina no és limita a integrar la teva web a la xarxa, sinó que la protegeix tot analitzant quina part del trànsit es legítim i quin és maliciós, bloquejant aquest últim de forma automàtica. Pots registrar-te a la seva web tot i que si ets client de Siteground, pots activar Cloudflare directament des del teu cPanel 🙂

Neteja i optimitza la base de dades

Quan portes força temps treballant amb WordPress, acabes acumulant un munt d’arxius a la base de dades que ocupen espai i consumeixen recursos del servidor i del CMS. I si vols gaudir d’un WordPress optimitzat, és imperatiu eliminar-los.

Parlem d’arxius que es creen de forma automàtica, per exemple, quan modifiquem alguna pàgina o post, esborrem algun contingut o tenim comentaris no aprovats o directament d’spam.

Tota aquesta informació s’emmagatzema a la base de dades. I si no ens n’ocupem, podem acabar tenint un monstre que frena la velocitat de càrrega de la web sense que sapiguem ben bé per què.

És per això que és necessari netejar tots aquests elements de forma periòdica. Concretament, ens hem de fixar en:

• Elements a la paperera, esborranys i revisions
• Comentaris no aprovats, spam i metadades
• Opcions temporals de plugins i themes
• Taules de la base de dades que no utilizem

Per tal d’optimitzar la base de dades de WordPress, et recomano utilitzar WP-Optimize. Es tracta d’un plugin molt senzill que, en pocs segons, netejarà la teva base de dades deixant-la com una patena.

D’altra banda, WP Rocket compta amb una opció d’optimització de la base de dades automàtica i periòdica. D’aquesta manera, no t’has de preocupar de res, només configurar-ho la primera vegada i el plugin treballarà per tu.

Si ets molt valent (i has fet un backup abans) també pots accedir manualment a la base de dades i eliminar les taules que ja no necessitis. Però que consti que jo no em faig responsable de res 😉

Optimitza les imatges

Les imatges són, sens dubte, un dels principals motius pels quals un lloc web és lent i pesat i no carrega ni a la de tres. Moltes persones no ho saben, i pugen a WordPress imatges d’alta resolució (i alt pes) de forma indiscriminada, penalitzant l’optimització del seu lloc web sense ser-ne conscients.

Pensa-ho. Té sentit. El text és el que pesa menys a la teva web. El que realment marca la diferència pel que fà a la velocitat de càrrega és la mida i la optimització de les imatges que hi hagis pujat.

Així doncs, és necessari que treballis les imatges abans de pujar-les a WordPress. Com t’explico de forma més àmplia en aquest article, t’has de preocupar de d’aquests aspectes bàsics:

• La mida: adapta la imatge a la mida del seu contenidor. Si la imatge en qüestió ha d’anar en un espai de 700px, no té cap sentit que n’ocupi 1920.
• El pes: per regla general, totes les imatges que pugis al teu WordPress no haurien de superar els 100kb. I si pot ser menys, millor que millor.
• El format: si no necessites que la imatge sigui transparent, utilitza jpg. Si, per contra, ha de ser-ho (com en el cas d’un logotip, per exemple) que sigui png (pesa més).

Per tal d’optimitzar les imatges, jo utilitzo directament Photoshop. No, no en sóc cap expert, però per aquestes coses m’apanyo força. Ara bé, si no tens el software o vols una solució més senzilla, pots utilitzar Imagify. una eina que redueix dràsticament el pes de les teves imatges conservant-ne -bastant- la qualitat. La tens en versió web i en versió plugin.

Et recomano que sempre que puguis utilitzis elements i icones vectorials en comptes d’imatges, ja que carreguen molt ràpid. Bàsicament, això és així perquè per carregar-les no cal efectuar cap sol·licitud al servidor, com passa cada vegada que utilitzes imatges jpg o png al teu WordPress.

En aquest cas, només es carrega un script que crida la llibreria externa on s’allotgen. És a dir, que amb un únic script, la web té accés a totes les icones que conté la citada llibreria.

Un amic de les imatges és el Lazy Load. Aquesta técnica d’optimització és molt útil, ja que carrega el contingut de la web a mesura que apareix al navegador. D’aquesta manera, fins que no arribem a la zona de la web on hi ha aquelles imatges tan pesades, aquestes no es carregaran.

Com pots imaginar, és un sistema molt útil sobretot per a llocs web amb un alt contingut d’imatges on la seva qualitat és una prioritat, com podria ser un portfoli o un web de fotografia.

Per aplicar-lo al teu web pots utilitzar algun plugin com a3 Lazy Load o, si utilitzes WP Rocket, ja ho tens disponible perquè aquesta extensió ho porta integrat.

Ep! utilitzar Lazy Load no t’eximeix d’optimitzar prèviament les imatges, eh! 😉

Comprimeix tot el que puguis

El que més comprimirà, un WordPress optimitzat tindrà (rodolí!).

Compressió HTML, CSS i JS

T’ho comentava més amunt. Sovint, aquell disseny espectacular que un theme et promet per al teu lloc web no serà gratis. I no ho serà perquè necessitarà comptar amb un munt de codi HTML, CSS i JavaScript per poder aplicar-se. El problema és que tota aquesta quantitat de codi l’acabarà recarregant en excés.

Per ajudar-te a pal·liar aquest efecte, pots comprimir o minimitzar tots aquests arxius del teu theme. Aquesta tècnica en reduirà el pes i aconseguirà millorar el rendiment de la web.

Aconseguir-ho és senzill, sobretot amb el plugin Autoptimize. Es tracta d’una extensió gratuïta i molt senzilla de configurar que no només comprimeix els arxius, sinó que a més elimina codi sobrant i el col·loca al final de tot de la web per millorar la velocitat de càrrega.

Realment, és un plugin molt eficaç. Ara bé, de nou, si treballes amb WP Rocket, no et farà falta, perquè el plugin estrella per optimitzar WordPress també ho incorpora.

Compressió Gzip

La compressió Gzip aconsegueix que el nostre servidor comprimeixi els continguts que envia a l’usuari de la web i aquest es descomprimexi al seu navegador. D’aquesta manera, s’augmenta la velocitat de la transferència de dades. i, per tant, de càrrega.

Activar aquesta opció és molt senzill. Ho pots fer de dues maneres. La primera (i la meva preferida) és fer-ho per codi. Només necessites col·locar aquest snippet al teu arxiu .htaccess

També pots aconseguir-ho amb un plugin, per exemple Check and Enable Gzip Compression. Ara bé, no t’imagines quin plugin ho incorpora per defecte? Exacte, WP Rocket.

Com veus, t’he recomanatWP Rocket en diverses ocasiones durant aquest article. I és que aquest plugin premium per a WordPress integra la majoria de funcionalitats necessàries per optimitzar WordPress al màxim. Per això, tot i ser un plugin de pagament, crec que la seva inversió està plenament justificada.

Tria un hosting competent

És fonamental. Perquè de res et servirà aplicar totes les tècniques que hem vist en aquest article si no treballes amb un allotjament de primer nivell i, a més, que estigui especialitzat en WordPress.

Per això, jo sempre recomano Siteground, que és on allotjo tant els meus projectes com els dels meus clients als que ajudo  engegar o millorar el seu negoci dissenyant i desenvolupant un lloc web 100% a mida, ben programat i totalment orientat a la conversió.

En aquest sentit, Siteground és la canya. Com t’explico de forma molt concreta i detallada en aquest post, aquest proveïdor està especialitzat en WordPress i, és clar, ofereix eines específiques que en milloren (i molt) la seva optimització.

En concret, parlem de:

• Discs durs SSD
• Darreres versions de PHP i MySQL i HTTP/2
• SSL amb Let’s Encrypt
• CDN integrada amb Cloudflare
• Servidors web Nginx
• Varnish, un sistema de catxé de servidor

Una meravella, vaja. Si vols saber amb més detall per què Siteground és el millor proveïdor de hosting per al teu WordPress, de debò, llegeix l’article i descobreix-ho.

I ara sí! Un cop completats tots aquests passos, ja pots disposar d’un WordPress ràpid i optimitzat. Vaja, d’una màquina a ple rendiment al teu servei 🙂

Pots comprovar-ne el antes y el después utilitzant alguna de les eines online per mesurar el rendiment de llocs web, com ara Pingdom, GTMetrix o Google PageSpeed.

Prova-ho i flipa 😉

En resum

Experiència d’usuari, posicionament web, conversions… Són molts els motius que aconsellen (per no dir, obliguen a) disposar d’un WordPress optimitzat. Sigui quin sigui el teu, en aquest post t’he explicat com optimitzar WordPress tu mateix, de forma senzilla i pas a pas.

En concret, hem vist diversos elements a tenir molt en compte si volem que el nostre lloc web sigui ràpid, lleuger i eficient:

• El theme: ha de ser ràpid, lleuger, accessible i que t’aporti exactament el disseny que necessites. La resta, sobra.
• Els plugins: només necessites instal·lar els necessaris, ni un més. I tot el que puguis o sàpigues aplicar per codi, molt millor. Less is more.
• La catxé: un sistema de catxé que ofereixi una versió estàtica de la teva web que carregarà molt més ràpid. Els usuaris t’ho agrairan (i Google, també).
• El CDN: una xarxa CDN per repartir el teu contingut per diversos servidors arreu del món. El teu contingut, ben a prop de l’usuari final.
• La BBDD: una base de dades neta, polida i minimalista evitarà recàrregues i temps d’espera innecessaris.
• Les imatges: sovint, les grans causants del problema. Necessites imatges de mida correcta, pes adequat i format idoni. La resta, es creativitat.
• La compressió: codi comprimit és igual a codi eficient. Aquell que executa la seva funció sense penalitzar la velocitat de càrrega.
• El hosting: de res serveix aplicar tot l’anterior si tens un hosting de broma. Tria Siteground, l’allotjament especialitzat en WordPress, i estalvia’t problemes.
• I el sentit comú. El menys comú dels sentits que, com sempre, és el més necessari, també pel que fa a la correcta optimització del teu lloc web.

Com déiem al principi. un gran poder comporta una gran responsabilitat. I tu, com a usuari de WordPress -que és molt poderós- tens la responsabilitat de mantenir-lo sa. De cuidar-lo. De mimar-lo. I de treballar per aconseguir que rendeixi al màxim. Perquè, si ho fas, tindràs lloc potent web per molts anys.

Un lloc web al servei del teu projecte web. De les teves necessitats i de les teves exigències. Un WordPress, en definitiva, al servei del teu projecte.

Val la pena dedicar-li una estona, oi? Jo crec que s’ho mereix! 🙂

I recorda que si vols aprendre WordPress i Genesis com un Pro, tens a la teva disposició 39 articles, 19 videotutorials i 9 episodis del podcast on comparteixo amb tu tot allò que sé perquè aprenguis a dominar el teu lloc web amb WordPress i que no et domini ell a tu 🙂