Elliot Fernandez
*Avís de cookies: utilitzem cookies de tercers per millorar la gestió d'aquest web.

Eines per la optimització i millora del rendiment Web

Una de les accions més importants que tot propietari i/o desenvolupador d’un lloc web ha de realitzar per millorar el posicionament als cercadors (SEO) i la càrrega de la seva pàgina és la optimització i millora del rendiment del web, el que vol dir, ocupar-se dels temps de càrrega del web fent ús d’una sèrie de tècniques i eines que explicarem a continuació. El primer que ha de tenir present qualsevol propietari d’un web (ja sigui aquest un blog, un e-commerce o un web institucional) és que el mòbil és ja el rei de la xarxa, que cada cop més persones ens visiten des dels seus dispositius mòbils i que per tant hem de construir entorns webs adaptats a aquest ecosistema, el que vol dir, webs amb temps de càrrega ràpids i accessibles.

google-page-test-speed

Exemple de verificació de la velocitat de càrrega d’una pàgina web, en aquest cas www.google.com, amb l’eina PageSpeed Insights

La optimització per millorar el temps de càrrega, la clau

La clau de tot plegat és millorar el temps de càrrega del nostre web. Diuen els experts que el nostre “possible” visitant abandonarà la nostra pàgina web si aquesta no s’ha mostrat al seu navegador abans de 3 segons. Repetim: 3 segons. Pot semblar massa poc temps però el món va molt ràpid i a moltes persones no els agrada esperar massa. Vivim en l’era de la immediatesa. Per tant la nostra missió serà no arribar mai als fatídics 3 segons de càrrega per al nostra web. La notícia positiva és que nosaltres, com a desenvolupadors d’un lloc web, podem realitzar una sèrie d’accions per millorar i optimitzar la nostra web.

Abans de tot podem fer un primer anàlisi per determinar quin és el temps de càrrega del nostre web per després saber quines accions podem emprendre, en cas de resultats no satisfactoris. Hi ha diverses eines al nostre abast, les més conegudes són:

Un cop realitzat un anàlisi del nostre web en algun dels tres webs esmentats, cal posar-se mans a la feina. Si estàs utilitzant un CMS (gestor de continguts) com WordPress disposes d’una llarga llista de plugins per instal·lar que et facilitaran la feina. Però jo recomano tocar codi i analitzar cas per cas els problemes que estan causant una càrrega lenta del nostre web.

Primer pas: la lluita contra els objectes JavaScript

Com a recomanació inicial, abans de posar-nos a optimitzar, és treballar per construir pàgines webs lleugeres, senzilles i amb codi ben estructurat. Si seguim aquesta premissa tindrem una pàgina web ràpida, optimitzada i ben posicionada als cercadors, que al final és allò que estem buscant.

Un dels pitjors enemics en el camp de la optimització i el rendiment web són els objectes JavaScript de tercers (el codi que ens serveix per carregar les estadístiques de Google Analytics, la publicitat….). Malauradament el web està ple de fragments de codi JS que entorpeixen la feina als navegadors i servidors fent més lenta la càrrega del web. La meva recomanació és prescindir tan com puguem d’aquests objectes JS.

Detecta tots els objectes JS que s’estan carregant al teu web utilitzant les eines per a desenvolupadors que faciliten la majoria dels grans navegadors (Chrome, Safari i Firefox). Mira l’origen d’aquests JS i determina si realment els necessitem o en podem prescindir. Més tard explicaré la solució més radical per guanyar en temps de càrrega que passa per adoptar l’AMP de Google i on no es pot utilitzar res en JS.

Resumint, alguns dels elements JS que es troben en la majoria de pàgines webs i que poden ser “eliminats” són:

Amb el problema dels scripts de tercers, com el codi de Google Analytics, hauràs de ser especialment crític i determinar si realment volem seguir utilitzant-los, perquè són la principal font del nostre maldecap i que provoquen el bloqueig en la càrrega del nostre web.

El recurs més radical: adoptar l’AMP (Accelerated Mobile Pages)

1) Què son les Accelerated Mobile Pages (AMP)?

El projecte AMP, o Pàgines accelerades per als mòbils en la seva traducció al català, és una idea promoguda i impulsada des de Google per millorar la velocitat de càrrega de les pàgines web als mòbils. És un projecte de codi obert amb un munt de socis tecnològics i d’empreses del sector editorial que treballen conjuntament en aquest projecte. La seva primera versió va ser publicada a l’octubre del 2015 i qualsevol desenvolupador de pàgines web el pot utilitzar seguint les indicacions tècniques que es troben al web oficial.

La pròpia pàgina web del projecte explica les motivacions per crear aquest nou “accelerador de pàgines webs”:

Per a molts, la lectura al web mòbil és una experiència lenta, maldestre i frustrant – però no té per què ser així. El projecte de l’Accelerated Mobile Pages (AMP) és una iniciativa de codi obert que ofereix la possibilitat als editors per poder crear contingut mòbil optimitzat a la vegada que es carrega a l’instant a qualsevol lloc .

En un món on cada vegada més gent es connecta a Internet majoritàriament des dels seus dispositius mòbils, el que comporta moltes vegades velocitats d’accés a la xarxa reduïdes i aparells amb un hardware molt bàsic, es feia necessari un sistema pel qual es pogués distribuir els continguts d’una forma més ràpida i optimitzada. L’AMP fa tot això, però encara amb moltes limitacions.

No és fàcil adaptar una pàgina web al sistema AMP. Si bé qui utilitza un CMS com WordPress pot estar d’enhorabona perquè té a la seva disposició alguns plugins que faciliten molt la feina, cal dir que l’AMP és molt estricte a l’hora de validar una pàgina web perquè pugui ser considerada pel sistema com a optimitzada. Algunes característiques importants:

En definitiva, s’han de construir pàgines webs lleugeres, poc pesades i que no continguin elements que bloquegin la seva càrrega, com són els objectes JS o els CSS sense optimitzar.

El projecte AMP està en permanent revisió i actualització i cal estar atents a les novetats que es van introduint. La darrera actualització ja permet introduir formularis dins les pàgines AMP .

2) Com afecta el format AMP a les pàgines de resultats de Google (SERPs)?

Des del 4 de novembre d’aquest any Google ha introduït un important canvi al seu algoritme (encara en fase de proves): el principal cercador d’Internet considera com a més importants els resultats de les cerques pels mòbils, o el que és el mateix, té més pes al seu algoritme el “mobile-first” . No obstant les fonts asseguren que aquest canvi està encara en fase de proves i només afecta a un limitat número d’usuaris.

Si res no canvia, fins al moment Google no penalitza a les pàgines webs que no tenen una versió optimitzada per AMP, però si puntua millor les pàgines amb contingut “responsive”, adaptat als mòbils.

El que si que es pot afirmar és que les pàgines amb l’AMP activat tenen un espai preferent dins el cercador de Google i per tant la seva SERP millora. Especialment pels webs de notícies, es mostraran en la part superior del cercador, amb un format especial, tal i com es pot veure en la següent imatge:

amp-platform-in-all-its-mobile-services

Per la resta de pàgines webs, aquelles que tinguin una versió AMP seran destacades a les recercades de Google amb una icona:

amp-google-search-results

Entrada publicada originalment el 20 de setembre del 2007 i actualitzada el 28 d’octubre de 2016.

L'autor: Elliot Fernandez

Enllaç permanent: https://elliot.cat/optimitzacio-rendiment-web/