Al detall: optimització en el disseny i desenvolupament del vostre web

«At its heart, web design should be about words. Words don't come after the design is done. Words are the beginning, the core, the focus.
Start with words.
Cheers,
Justin Jackson»
https://justinjackson.ca/words.html

Què passa exactament quan escrivim una direcció a la barra del nostre navegador (per exemple el Firefox) i premem la tecla [Entrar]? 

El nostre navegador pregunta al DNS per aconseguir una adreça IP i genera una petició HTTP que s'envia a la direcció del servidor on la web és allotjada. El servidor la rep i busca internament a quins recursos correspon. Si es demana una pàgina estàtica, serveix directament l’arxiu: l'envia de tornada cap a l'ordinador que l’ha demanat. Si, en canvi, es troba amb una web dinàmica, vol dir que, amb cada visita:

  1. el servidor primer necessita executar un codi (habitualment php, a vegades python o altres),
  2. el programa del servidor web demana ajuda a un intèrpret d'aquest llenguatge que llegeix les instruccions, 
  3. sovint necessita demanar continguts a una base de dades (o sigui demana materials a un altre programa),
  4. genera el fitxer representant la pàgina sol·licitada, 
  5. el torna al servidor web i aquest l'envia cap a l'ordinador que l’ha demanat.

Aquest fitxer pot indicar al navegador altres fitxers necessaris, per exemple la fulla d'estil, una imatge, un script. Cada cop es més habitual que les pàgines continguin (i cada cop més llarg) codi en llenguatge javascript, que és un conjunt d'instruccions que necessita executar el navegador. Pot passar, en aquests casos, que el navegador necessiti demanar més continguts al servidor. 

Res de tot això és dolent per se

D'altre costat, les pàgines dinàmiques necessiten tornar a acoblar la pàgina a cada visita, a diferència de les pàgines estàtiques, que en principi es generen únicament quan es fan canvis al contingut, per exemple quan s'afegeix una nova entrada al blog. 

Hi ha un malentès molt comú: les webs estàtiques sí que poden tenir menús que es despleguen, imatges que reaccionen al passar per sobre, i tots els altres elements "xulos" d'estil. De fet, quan visitem un web, no podem saber si es genera de forma dinàmica o si és una web estàtica! 

Les pàgines estàtiques també poden tenir fulls d'estil o codi javascript que solen aportar una aparença "interactiva" per a les persones visitants. 

El problema comença quan les coses perden la mesura òptima, molts cops a causa d’elaborar webs amb editors i plugins molt visuals i intuïtius però que ens compliquen la vida en la part servidora, principalment:

  • PHP amb errors o «brut»
  • bases de dades grans o massa complexes
  • moooltes peticions (cap al domini propi o cap a tercers)
  • molt volum de tràfic
  • ús excessiu d’espai d’emmagatzematge
  • javascript carregós
  • excés o falta de manteniment de connectors (plugins)
  • imatges / vídeos enormes
  • excés de fonts tipogràfiques

No us faci por consultar l'apartat "Sóc desenvolupador/a" on expliquem com millorar cadascun d'aquests factors.