Com accelerar una pàgina web al 70% en 7 passos

No hi ha dubte que la velocitat del lloc web importa ara més que mai. A mesura que augmenten les velocitats de connexió a Internet a tot el món, els usuaris de la web s’estan tornant cada vegada menys tolerants amb els temps de càrrega lenta. Alhora, Google ha declarat inequívocament que prefereix recompensar llocs ràpids amb posicions més altes en els resultats de cerca naturals.

Per aprofitar aquests beneficis cal que la velocitat de la teua web siga ràpida. I hui, volem ajudar-te a com accelerar una pàgina web al 70% en 7 passos.

Llista de passos sobre com accelerar una pàgina web

1. Comprovar la mida de les imatges existents a la web

   Si utilitzes un sistema de gestió de continguts (CMS) com WordPress o Joomla, probablement has notat que pots carregar imatges a mida completa i després ajustar la mida de la pantalla en el backend del teu lloc web.

   No obstant, això obliga els navegadors web a executar diversos ordres, traient les imatges inicials i tornant-les a dimensionar immediatament, el que pot alentir el seu lloc.

   Per evitar que això passi, utilitzeu un programa d’edició d’imatges per ajustar les imatges a la mida correcte abans agregar-les a seu lloc.

   La majoria de nosaltres té accés a una eina senzilla com Preview (en Mac), o fins i tot Microsoft Paint (en Windows). Amb aquests programes tot el que has de fer és obrir la imatge i tornar a pujar-la a la teua llibreria d’imatges.

   Un cop fet això, pot portar la seua edició d’imatges al següent nivell amb una eina de compressió. Fins i tot després de tornar a redimensionar cada imatge, la mida total de l’arxiu podria ser bastant gran i això alentirà la velocitat de càrrega del seu lloc.

   Una de les millors eines disponibles és una eina en línia anomenada TinyPNG. Només has de pujar la teva imatge redimensionada i aquesta eina reduirà la mida del fitxer sense reduir la resolució.

   Llavors, el que has de fer és descarregar la imatge i pujar-la al teu lloc. Amb aquesta eina les teues imatges es veuran exactament iguals i es carregaran molt més ràpid.

2. Elimina plugins innecessaris

   Hui en dia, el tenir un enorme nombre de plugins i scripts disponibles gratis, fa que sigui temptador afegir més connectors dels que realment necessites. Tingues en compte que cada plugin que afegeixes requereix recursos per executar-se, i més recursos signifiquen un lloc web més lent.

   Abans d’afegir nous connectors al teu web, pregunta’t a tu mateix si la funcionalitat que guanyes val la pena o si el contingut del connector podria codificar.

   Si observes que la teua web s’està executant lentament, o si creus que podria estar funcionant molt més eficaçment, investiga què està passant deshabilitant cada connector de la teva web, un per un. Després de desactivar cada connector, executa la teva web a través d’una eina com GT Metrix. Això et mostrarà la velocitat del teu lloc web.

   Si trobes que la velocitat de la teua web augmenta molt després de desactivar un connector, llavors és que has trobat el culpable. Si és absolutament necessari que la funcionalitat del connector específic funcioni, investiga fins a trobar un altre connector que no afecti la velocitat de la teva web.

   A més, desfer-se dels connectors pot evitar conflictes de connectors que sorgeixen quan tens massa connectors actius alhora. Com més connectors tingues actius, és més probable que el teu codi entre en conflicte i faci que no funcionin correctament.

3. Assegura’t que els scripts de la teva web estan actualitzats

   Depenent del CMS o de la plataforma de comerç electrònic que utilitzes, és possible que hagis de revisar regularment si hi ha noves versions dels scripts que estàs utilitzant.

   Si n’hi ha, actualitza’ls el més prompte possible (assegurant-te primer que tens una còpia de seguretat recent). Els desenvolupadors de scripts sempre estan treballant en millorar el seu codi per a futures versions, particularment quan es tracta de la velocitat del lloc. Actualitzar els scripts a les versions més recents podria ajudar-te molt a eliminar els bloquejos de codi que impedeixen que la teva web es carregui ràpidament.

   Per sort, això no és una cosa que has de fer diàriament. Amb un cop al mes és suficient per a instal·lar qualsevol actualització que podria estar disponible.

   Si el teu lloc s’executa en WordPress, trobaràs aquestes actualitzacions a la pestanya Actualitzacions del teu tauler de WordPress. En tan sols un clic, la teua web instal·larà les últimes actualitzacions del programari.

   Estableix un esdeveniment recurrent en el teu calendari i reserva una hora cada mes per a això. En general, ocuparà molt menys temps, però és important construir l’hàbit d’assegurar sempre que la teua web i els connectors estan executant-se amb l’última versió.

4. Fes ús de les CDNs (Content Delivery Network)

   Les CDNs són xarxes de servidors que es troben en tot el món. Normalment, si no servir una CDN, els teus usuaris hauran d’accedir al servidor en la seva ubicació central.

   Això pot conduir a velocitats lentes del web, especialment si els teus visitants es troben lluny de la ubicació central del teu servidor. A més, si només estàs utilitzant un únic servidor, hi ha la possibilitat que es sobrecarregui i faça que la teva web es bloquege.

   Les CDNs resolen dos problemes permetent als teus usuaris accedir a una versió en memòria cau de la teua web des del host que està més a prop seu. Millor encara, si una de les ubicacions del teu servidor està sobrecarregat, llavors es poden canviar a una nova ubicació de servidor.

   El resultat? Temps de càrrega més ràpids que faran feliços als teus clients i als motors de cerca.

5. Habilita l’emmagatzematge en memòria cau del navegador

   El cau del navegador permet que el navegador d’un visitant del lloc web emmagatzeme còpies de les pàgines individuals de la teva web perquè, quan el visitant torne en el futur, el contingut es puga cridar des de la memòria cau en lloc de recarregar tota la pàgina de nou. Això estalvia el nombre de recursos utilitzats per mostrar les teves pàgines, el que resulta en temps de càrrega més ràpids per a la teva visitant.

   La forma més fàcil d’habilitar l’emmagatzematge en memòria cau del navegador és amb un plugin com WordPress W3 Total Cache.

6. Activa la compressió Gzip

   La compressió Gzip és una tecnologia que minimitza la mida de les respostes HTTP basades en navegador, de vegades fins a un 70%. Si no us ha quedat clar aquest concepte, no et preocupis, pots contactar amb els nostres experts amb qualsevol dubte.

   Utilitzar la compressió Gzip pot accelerar significativament els temps de càrrega de la teva web.

   Existeixen tres formes d’activar la compressió Gzip a la teua web. pots:

   1. Afegir el següent codi a l’arxiu .htaccess de la teva web:
      # compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
   2. Afegir el següent codi a la part superior de la teva pàgina HTML o PHP:
      <?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?>
   3. Instal·lar un plugin de compressió Gzip com l’eina W3 Total Cache per WordPress.

7. Mantingues els arxius CSS a la part superior de la pàgina i el codi Javascript a la part inferior

   Finalment, mantingues el codi de la teva web net i ordenat mitjançant l’addició d’arxius CSS a la part superior del codi de la pàgina i fragments de Javascript a la part inferior quan es treballa amb pàgines HTML sense format.

   L’addició dels seus arxius CSS a la part superior de la pàgina prohibeix la renderització progressiva, estalviant recursos que els navegadors web utilitzarien per carregar i tornar a dibuixar elements de les teues pàgines. Afegir JavaScript a la part inferior evita que les teves pàgines esperen l’execució completa del codi abans de carregar-lo, el que condueix a una experiència de navegació més ràpida per als teus visitants.

Tot i que aquestes són només algunes de les diferents tècniques que es poden utilitzar per accelerar el teu lloc web, són alguns dels més fàcils d’implementar. Aquesta llista és un gran començament si notes que el teu lloc s’està desaccelerant. Si vols anar més enllà o necessites ajuda per saber com accelerar una pàgina web, no dubtes a ficar-te en contacte amb nosaltes. T’ajudarem en tots els sentits per a l’optimització web.