Carregar imatges amb paral·lel

Carregar imatges en paral·lel per millorar el web a ulls dels cercadors i dels usuaris

Una bona manera de millorar la velocitat de càrrega d’un lloc web amb més de 6 imatges és carregar-les en paral·lel des de diferents subdominis; en diuen paralització de càrrega però aquesta paraula a mi em sona a que es paralitzen i encara que és cert (d’alguna manera) el que fem per evitar-ho és carregar-les en paral·lel i aquest terme m’agrada més per ser més optimista.

El problema de tenir moltes imatges

El problema és que els navegadors amb els que es visualitzen les pàgines web tenen un nombre limitat d’arxius que poden obrir de forma simultània d’un mateix domini o subdominnio. Quan cal carregar més de 6 imatges per a una pàgina web al navegador càrrega de 4 en 4 o de 6 en 6 amb la qual cosa, si tenim 12 imatges haurà d’esperar a carregar primer unes poques i un cop carregades aquestes continuar amb altres poques, fins tenir-les totes carregades.

La solució és diversificar

Una paraula que m’agrada i no només els bancs tenen permís per usar-la és “diversificar”. Si diversifiquem les peticions i carreguem les imatges des 2 o 3 subdominis … Aquestes poden ser carregades 2 o 3 vegades més ràpid millorant la velocitat de càrrega que ajuda al posicionament en els cercadors i l’experiència de l’usuari.

¿Com diversificar o carregar imatges en paral·lel?

Si el nostre domini és “tudominio.com” crearem 3 subdominis per a imatges des del panell d’administració del nostre hosting amb els nom que vulguem. Jo per l’exemple utilitzaré “imatges”, “logos-fons” i “resta”.

Llavors quedarà una cosa així:

• Domini principal: tudominio.com

1. Subdomini per a imatges: imagenes.tudominio.com
2. Subdomini per a logos, fons, botons …: logos-fondos.tudominio.com
3. Subdomini per a la resta d’imatges estàtiques: resto.tudominio.com

Llavors el que farem és pujar les imatges que utilitzarem per al fons, logo i botons de xarxes socials a l’subdomini “logos-fons” i quan les vulguem carregar a la nostra web utilitzarem les noves rutes on hem copiat els arxius i d’on els volem carregar a partir d’ara

• http://logos-fondos.tudominio.com/logo.jpg
• http://logos-fondos.tudominio.com/fondo.jpg
• http://logos-fondos.tudominio.com/facebook.png
• http://logos-fondos.tudominio.com/twitter.png
• http://logos-fondos.tudominio.com/googleplus.png
• http://logos-fondos.tudominio.com/rss.png

Amb això ja tindríem un subdomini amb 6 imatges que es carregarien de forma simultània en paral·lel quan un usuari visita la pàgina.

Després pujarem les imatges estàtiques a subdomini resta. Les imatges estàtiques són aquelles que sempre estan a la web, comuns a totes les pàgines, les del footer (peu de pàgina), les que apareixen en el formulari de subscripció que apareix amb un popup, etc …

Finalment pujarem les imatges del contingut o cos al subdomini imatges i després tornarem a canviarem les rutes a la web amb la nova ubicació dels arxius (poden estar repetits). Si per exemple la nostra web té 6 pàgines … (inici, contacte, serveis, bloc, formulari d’inscripció i botiga) Copiaríamos les imatges del cos de les pàgines “inici” “contacte” “serveis” i “formulari d’inscripció” a aquest subdomini i canviaríem novament les rutes al web perquè apuntin a la nova ubicació d’aquestes imatges.

Amb això aconseguiríem que aquestes pàgines carreguessin 3 vegades més ràpid. Per posar un exemple i en conclusió … Si tenim un autobús que pot transportar 32 persones heu de fer 3 viatges per a poder transportar 90, però si tenim 3 autobusos que poden portar a 32 persones podem transportar-les en un sol viatge i portar-les a la seva destinació al mateix temps. Està clar que si hem de llevar 200 persones no podrem fer-ho en un viatge ni amb 3 autobusos però segur que serà molt més ràpid que amb un de sol.

¿Què passa amb el domini principal? ¿Des d’allí no carreguem fotos?

El domini principal té altres coses que carregar que ja ocupen el seu temps com per haver de encarregar-se també de les imatges, el domini principal és l’encarregat d’allotjar els javascript, els css i fer les peticions a la base de dades en cas de ser dinàmica creada amb un CMS. Així que només li deixarem aquests menesters i la càrrega de les imatges de les publicacions del blog o les dels productes de la botiga.

Càrrega d’imatges en paral·lel (il·lustratiu)