Cómo optimizar el rendimiento de tu web: Paralelización de carga
Benditas vacaciones, que me han dado tiempo para sentarme y optimizar el rendimiento de esta página, e incluso me permiten recuperar la vieja costumbre de traer algún que otro tutorial que seguramente ayude a más de uno en su quehacer diario.
Durante estos días he disfrutado de tiempo suficiente para llevar a cabo varias estrategias de SEO, con el fin de optimizar un elemento que requiere por lo general de una disponibilidad relativamente alta (los cambios no se suelen ver hasta pasadas 24/48 horas, y después de ello te exige asegurarte de que todo siga en su sitio), y que por ello suele acabar siempre en la lista de tareas pendientes. Hablamos de la optimización del rendimiento de una web.
En mi caso, y utilizando la herramienta pingdom (EN), he conseguido un índice de 86/100 (87/100 si el test lo hago pasar desde Europa), un 73% más rápido que la mayoría de las webs testeadas en el servicio, y en todo caso, por encima de todas las webs que he probado de analistas tecnológicos españoles reputados y portales de actualidad tecnológica que forman parte de las redes de blogs de habla hispana que todos leemos a diario.
También es importante señalar que a diferencia de la mayoría de “competencia”, el servidor donde está alojada esta web tiene una capacidad básica (en torno a 1,2GB de RAM máximos y compartidos con otros proyectos), situación que sin duda está mermando la efectividad final de la optimización (y que si las cosas salen como espero, posiblemente de aquí a un par de meses acabe por solucionarlo).
Optimizar el rendimiento de tu web es un trabajo que nunca va a acabar, pero con este tutorial en tres entregas (previsiblemente publicadas una por semana), bajo el hashtag #OptimizarWeb, ofreceré una guía para aplicar tres principios que como mínimo deberían repercutir en un aumento visible del rendimiento de una página, lo que ayuda a reducir la tasa de rebote y a que los buscadores y los usuarios nos miren con mejores ojos.
En esta primera entrega, hablaremos de cómo implementar una paralelización de carga de contenido, el primer paso para desmarcarte del resto de webs poco o nada optimizadas, y que para colmo suele quedar olvidado como materia pendiente en la mayoría de proyectos.
Paralelización de carga de contenido ¿Por qué?
Todos los navegadores tienen implementado una limitación de peticiones por dominio (archivos CSS, JS, imágenes, vídeos,…), de tal manera que si por ejemplo el navegador usado puede paralelizar 6 peticiones de cada vez, descargará el contenido (cada archivo) de 6 en 6, manteniendo el resto en espera, lo que en la práctica aumenta considerablemente el tiempo de carga.
De todas las posibles peticiones, sin duda los vídeos y las imágenes son los elementos que más pesan de una web, por lo que interesa que éstos por encima del resto, se distribuyan en diferentes paquetes.
Paralelización de carga de contenido ¿Cómo aplicarlo?
Para implementar una estrategia de paralelización de carga de contenido, nos aprovecharemos de la facilidad con la que actualmente podemos crear diferentes subdominios. Por ello, lo primero es definir el número de subdominios que vamos a usar y su cometido.
Una idea equivocada es pensar que para realizar una estrategia de Domain Sharding, que es como se denomina esta técnica, lo mejor sería que definiéramos mientras más subdominios mejor, con el fin de que cada paquete estuviera formado por un solo archivo, y por tanto, todos cargaran a la vez en paralelo. Pero hay que considerar que el rendimiento que ganamos con esta medida podemos perderlo si el tiempo de carga de todos los DNS es superior, y puesto que cada subdominio obliga a que el cliente conecte con sus DNS, se calcula que para una web normal con una tecnología de backoffice habitual, un número de subdominios entre 3 y 5 está bien.
Como en la mayoría de páginas el uso del vídeo viene dado por enlaces embebidos (Youtube, Vimeo,…), podemos obviar este tipo de contenido y optimizar las imágenes, que sí son elementos que utilizamos habitualmente.
Para ello, iremos al CPanel del registrador de dominios que tengamos contratado, y seleccionando el dominio oportuno, crearemos varios subdominios, acordándose de que apunten a la página principal (no es estrictamente necesario, pero así evitamos posibles ataques a diferentes carpetas de nuestro servidor).
En mi caso, y como se puede observar, he definido 3 subdominios llamados img1, img2 e img3, pero el nombre puede ser cualquiera.
Hecho esto, nos tocará esperar a que se actualicen los DNS mundiales. Una acción que puede llevar desde unos minutos hasta 48 horas. Normalmente, con dejarlo para el día siguiente suele ser suficiente.
El segundo paso es aplicar estos dominios en todo aquel contenido que queramos que cargue de esta manera. Para ello, podemos optar por editar cada archivo por separado (cambiando la extensión www por img1, img2 o img3, según queramos), o utilizando un sistema que lo automatice.
En el caso de que estemos ante una página dinámica que carga el contenido a partir de una base de datos, se podría definir una acción que modificase las direcciones al contenido aleatoriamente entre los subdominios creados.
Como la mayoría de nosotros utilizamos CMS tales como Wordpress, podemos hacerlo fácilmente instalando el plugin de Domain Sharding (EN) (o el respectivo al gestor de contenido con el que trabajemos), cuya configuración será si no igual bastante parecida a la siguiente.
Como se ve en la imagen, definimos el patrón que utilizará el plugin para autoasignar, en tiempo de carga, un subdominio distinto entre los elegibles, así como el número de subdominios a utilizar. El checkbox de abajo lo que hace es redirigir las peticiones de contenido desde otro host a la página principal para evitar que algún listillo esté utilizando tu ancho de banda para cargar contenido multimedia (algo que lamentablemente es usado mucho por blogs que copian contenido de otros portales).
Una vez terminado el paso dos, nos quedará asegurarnos que en el cambio no nos hemos cargado ninguna parte de la página. Para ello, borraremos caché del navegador (para evitar que el navegador cargue automáticamente imágenes que quizás están ahora mal enlazadas) y visitaremos las diferentes tipologías de página de la web.
Sobre todo, echar un vistazo a posibles enlaces a imágenes que tengáis definidas de forma relativa (es decir, en vez de con el clásico http://www.dominio.tld/url-img/, con un sencillo /url-img/). Si tenéis alguna de esta manera, lo más seguro es que no se esté mostrando, por lo que te tocará modificarla para que apunte a la URL absoluta.
Con estos tres sencillos pasos, ya tendremos definida una estrategia de domain sharding, y quedará por implementar las próximas dos técnicas.
La siguiente, cacheado de páginas dinámicas.
Enlaces al resto de tutoriales #OptimizarWeb (actualizados conforme se vayan publicando):
- Paralelización de contenido.
- Cacheado de páginas.
- Implantación de un CDN.
Si os ha gustado el tutorial, agradecería que me dejarais un comentario y lo compartierais por redes sociales, con el fin de que pueda ayudar a más personas. Muchas gracias.
Edit a día 9 de Diciembre del 2015: Con la llegada de HTTP/2 esta optimización no es necesaria, puesto que HTTP/2 se encarga él solito de paralelizar la descarga de contenido. Pero para poder utilizar HTTP/2, nuestro servidor debe ser compatible, y tenemos que tener además una dominio con SSL configurado.
Imagen de LondonDeposit, Parallel pipes outside (EN) cedida por Depositphotos.com.
Pablo F. Iglesias
Consultor de Presencia Digital y Reputación Online
¿Te preocupa tu presencia digital?
He diseñado este curso online en 8 módulos en el que cubriremos todos los fundamentos de la presencia digital sana, ayudándote paso por paso a parametrizar la seguridad y privacidad de tus cuentas digitales y de tus dispositivos.
32 Comentarios
Norwill dijo el 12 enero, 2015 a las 0:02:
Hola, muy buena serie de post, me quedan algunas dudas que te las ecribire en cada post para que todo mantengan su orden.
Con respecto a la paralelizacion, como funciona con las imagenes que se sirven desde la carpeta multimedia de wordpress?? Es decir tengo instalado LayerSlider o algun otro Slider y este requiere para establecer las imagenes que la seleccione desde la carpeta multimedia de wordpress, esto para facilitar la administracion ya que asi lo requiere el cliente.
Como se configura y/o comporta una estrategia de domain sharding en este caso, en el cual la imagen la subes a la carpeta multimedia de wordpress?? Se copia automaticamente a los subdominios? Se debe realizar de forma manual?
Saludos.
NG
Pablo F. Iglesias dijo el 12 enero, 2015 a las 0:44:
Buena pregunta Norwill.
Si utilizas el plugin, solo redirige a los subdominios las imágenes publicadas desde Medios (es decir, subidas desde la interfaz). En el otro caso, podrías hacerlo tú a mano, a cambio de que no cambie (es decir, llamar a la imagen por img1.nombreimagen.jpg, por ejemplo).
Como alternativa, estaría implantar una regla en .htaccess, o si tienes acceso al servidor, directamente desde Apache (o el que estés usando, claro), aunque primero probaría, ya que es posible que el Slider que estés usando cuente con interfaz, y por ende, puedas subirlo desde allí. Si es así, posiblemente te funcione sin tener que meter los cambios a mano.
Espero que te haya servido, y un placer que te sea de interés. Un saludo Norwill.
Norwill dijo el 12 enero, 2015 a las 0:58:
Gracias por tu pronta respuesta Pablo, tengo una duda, he leido tus serie y con esto de la paralelizacion, no seria lo mismo que el CDN ?
Pareciera que en la teoria fuera lo mismo.
Es aconsejable usar las 2 estrategias?
En otros post he visto el uso de cacheado con cdn incluso el uso de la combinacion de cloudfare y cloudfront (el cual voy a aplicar)
Saludos,
NG
Pablo F. Iglesias dijo el 12 enero, 2015 a las 10:37:
De nuevo una buena pregunta Norwill, te explico.
En efecto, una cosa no quita la otra. Y como habrás visto, incluso no es raro utilizar dos tecnologías de CDN a la vez.
El principal obstáculo que hay que superar es la compatibilidad entre tecnologías. El cacheado puede tirarte por tierra algunas features de la página, y lo mismo pasa con la paralelización de contenido y el CDN.
Yo te recomendaría, que si pudieras, aplicaras estas tres técnicas, en el orden explicado, para minimizar los problemas.
Sobre porqué aplicar Cloudflare y cloudfront a la vez, la respuesta es muy sencilla. Cloudflare no es un CDN al uso, sino un proxy inverso que funciona (a fin de cuentas) como CDN. La función de CDN como tal la realiza CloudFront, pero este sí requiere instalar su tecnología en el propio servidor, a diferencia de CloudFlare, que se basa en redirigir los visitantes a un proxy externo, gestionando en remoto la llamada. De ahí, y según las particularidades del visitante, lo enviaría a su propio cacheado, al de CloudFront o al propio de la web. Por eso no son incompatibles entre sí, cosa que si ocurre con dos CDN tradicionales (ya que se solapan funciones).
Espero que te haya servido ¡Saludos!
Luis dijo el 16 abril, 2015 a las 19:30:
Buenas Pablo,
Enhorabuena por los post! Muy buenos tutoriales de verdad.
Tenia un duda, tengo varios blogs de la misma web ya metidos en subdominios (por ejemplo fr.midominio.com para frances, o de.midominio.com para aleman…) y me surge la duda si debo hacer subdominios de dos niveles para paralelizar contenido para cada uno de mis blogs (img1.fr.midominio.com, img2.fr.midominio.com….etc) o bien no es necesario hacerlo asi? Si esto es asi, como lo haria? Cambia mucho el planteamiento?
Mil gracias.
Luis
Pablo F. Iglesias dijo el 16 abril, 2015 a las 19:41:
Pues buena pregunta. En principio no le veo ventaja alguna. Si lo prefieres por estructura pues adelante, pero podrías crear subdominios del tipo fr1.midominio.com, fr2,… y sería el mismo efecto.
Espero haberte ayudado Luis. Muchas gracias por el apoyo!
Francisco dijo el 12 agosto, 2015 a las 9:04:
Gracias, por el tuto, soy nuevo en wordpresss, estoy apunto de subir mi web pero tengo un mar de dudas, mi sitio web tiene una carga muy importante de fotografías y queria saber si debo dividir y subir todas las fotos en cada subdominio o lo hace el plugin, tengo creado img1.miweb.es, img2.miweb.es, img3.miweb.es.
Pablo F. Iglesias dijo el 12 agosto, 2015 a las 10:25:
Se encarga el plugin de hacerlo automáticamente. Eso sí, lo hace con las imágenes que subas mediante el gestor de medios de WordPress, no las que enlaces a mano (por ejemplo, las de la propia plantilla o banners que metas tú en los widget).
Francisco dijo el 13 agosto, 2015 a las 11:52:
Otra duda Pablo, en principio voy a tener la web en el subdominio pruebas.miweb.es y los sudominios de imagenes en img1.miweb.es, …. es necesario q los sudominios tambien se llamen img1.pruebas.miweb.es, ….?, cuando todo funcione ok lo pasaré al dominio miweb.es.
Pablo F. Iglesias dijo el 13 agosto, 2015 a las 12:02:
En principio no. De hecho ten en cuenta que www. no deja de ser otro subdominio de miweb.es, que se ha estandarizado como por defecto.
La única diferencia es que las imágenes se cargan en img1.miweb.es, img2,…, no penden del subdominio, que por otro lado es lo que buscamos (paralelizar la carga).
Podrías incluso hacerlo desde distintos dominios, aunque sería absurdo pudiendo usar subdominios, que son gratuitos :D.
fran dijo el 23 agosto, 2015 a las 17:08:
Hola de nuevo ya he implementado la paralelización, pero como puedo verificar q estan funcionando correctamente.?
Pablo F. Iglesias dijo el 24 agosto, 2015 a las 20:24:
Dale al botón derecho encima de una imagen que hayas subido mediante el gestor de medios de WordPress (por ejemplo, una de un artículo del blog) y copia la URL. Si la url tiene uno de los dominios que has mapeado en el plugin, es que está funcionando.
También deberías notar una mejoría en el tiempo de carga de la página. Saludos Fran!
fran dijo el 4 septiembre, 2015 a las 5:37:
Efectivamente las fotos nuevas si las pilla de los dominios img1,2,3… pero las fotos q ya tenia cargadas q son casí todas, no, q puedo hacer?, y mil gracias por tu ayuda.
Pablo F. Iglesias dijo el 4 septiembre, 2015 a las 7:15:
Anda, esto si es extraño… En principio si funciona para uno, debería funcionar para el resto. ¿No será cosa de algún plugin de caché verdad? Ten en cuenta que solo verás los cambios si la página la cargas dinámicamente, no estática.
Y entiendo que las fotos de los artículos pasados las subiste con el gestor de medios, ¿verdad? Saludos, y a ver si te ayudan estas preguntas.
Gonzalo dijo el 4 abril, 2016 a las 22:32:
Muchas gracias por el aporte, se ve super interesante y parece fácil de hacer.
Una pregunta, y si configuras todo y luego por lo que sea no funciona bien… Se puede regresar a lo que se tenia anteriormente??
Como sería?
Lo digo por que mi página web es de fotografía y tengo una gran cantidad de imágenes y si luego no funciona por lo que sea, saber como puedo volver a lo anterior sin tener que estar subiendo a cada página las imágenes, ya que sería una labor muy muy engorrosa para mi.
Pregunto esto antes de hacer nada para saber todas las opciones de volver atrás antes de hacerlo.
Saludos cordiales y gracias!
Pablo F. Iglesias dijo el 4 abril, 2016 a las 22:55:
Y haces bien en preguntar Gonzalo.
Supongo que te habrás fijado que este artículo pertenece a una serie de tres sobre distintas técnicas para mejorar la velocidad de carga de una web (enfocada a wordpress, pero a fin de cuentas de prácticamente cualquier web dinámica).
Y precisamente de las tres, esta es la más sencilla de aplicar y la más sencilla de quitar.
Si por lo que sea no estás a gusto con el resultado, bastaría con que desinstalaras el plugin, y todo volvería a la normalidad. En realidad lo que hace el plugin es aplicar esos subdominios al contenido audiovisual. Por eso, en el momento en que éste no esté activo, todo vuelve a cargar por el dominio principal.
Si te acuerdas, ya de paso, elimina los subdominios, o como mucho, asegúrate que apuntan al dominio principal. Más por temas de seguridad y posicionamiento, que a nivel de funcionamiento no ibas a notar diferencia.
Saludos, y ánimo con el proyecto!
Gonzalo dijo el 5 abril, 2016 a las 8:50:
Una pregunta más, solo por aclararme…
Yo tengo el dominio con un certifica SSL (solo para el dominio) me pierdo un poco con todo esto…
1.- entonces ahora todo el contenido está en este dominio y todo redirecciona a https.
2.- Tengo un montón de fotografias alojadas aquí
3.- He creado varios subdominos y propagado ya las dnss pero…
claro estos subdominios por lo visto no tienen el certificado SSL aunque sean subdominios del domino principal que si tiene el certificado y me redirecciona a https cuando no tienen este certificado y me dá errores.
Si yo hago todo esto sin tener el certificado SSL me lo va a alojar en estos subdominios y la página va a leer todo el contenido como no seguro (en el caso de leerlas…) y va a considerar todo este contenido estático como contenido mixto en el dominio principal, dándome errores de seguridad (contenido mixto) verdad ???
http://data3.mallarme-photography.com/ redirect to https://data3.mallarme-photography.com/ (aviso de SSL)
Como podria hacerlo? tengo que comprar en mi caso certificados SSL para estos subdominios ???
o puedo usar estos aunque no tengan el certificado y me funcionara bien igualmente y no perderé ninguna función del contenido seguro en el dominio principal ??\
Saludos y gracias por tu ayuda y tiempo!
Pablo F. Iglesias dijo el 5 abril, 2016 a las 12:45:
Ese sí es un punto importante Gonzalo.
Y depende un poco de qué tipo de SSL tengas contratado. Si únicamente está disponible para el dominio principal, en efecto, tendrás ese problema. Si puede propagarse también para cualquier subdominio (o como mínimo, para los dos o tres que has creado), no deberías tener problema alguno.
Échale un ojo a ver qué tipo de SSL has contratado o instalado. Normalmente si es lo primero, y era el más económico, seguramente sea solo para el dominio principal. Casos como el de Lets Encrypt o CloudFlare lo propagan también a subdominios.
Gonzalo dijo el 5 abril, 2016 a las 18:15:
nada.. 🙁
Hice todo, pero cuando verifico los dominios, unas veces dice que uno o dos son validos y los otros no, y en otras verificaciones posteriores me dice que los que antes si ahora no y los que antes que no ahora si…
Veo que de vez en cuando la Ip del dominio principal va cambiando y cuando cambia esta, es cuando me da error en la verificación por que no coincide la ip del subdominio con la del dominio principal…
Y en GTmetrix me lanza errores 404/410 para una pila larga de imágenes… para estos subdominios, como 83 imágenes, y este número va variando en sucesivas mediciones y cambiando el número de links rotos, (debe estar ligado a lo de los subdominios que van cambiado cuando cambia la Ip del dominio principal) bajándome considerablemente la puntuación que tenia, y hay galerías que no cargan…
Será solo comprar una Ip dedicada o serán otros factores del SSL?
Saludos!
Pablo F. Iglesias dijo el 5 abril, 2016 a las 18:17:
¿Tienes instalado algún plugin de caché? O usas algún CDN? Elementos de estos que interfieren en la carga de archivos podrían ser parte del problema. Tienen que ser compatibles con el tema de paralelización de carga.
Gonzalo dijo el 5 abril, 2016 a las 19:59:
Hola, Si de hecho tengo, tengo dos cuentas de CDN, Cloudflare y MAXCDN.
Y el certificado es un certificado simple de namecheap (comodo / essential ssl) y de plugins tengo el W3 total cache junto a alguna función de “Autoptimize” y con “Fácil Page Speed Lite” solo para una función, para retirar las cadenas de consultas.
Mucho lio no?
Saludos!
Pablo F. Iglesias dijo el 5 abril, 2016 a las 20:36:
Que va, yo tenía hasta hace nada una arquitectura bastante parecida jajaj.
En su día, cuando realicé los cambios, W3 total caché me era incompatible. Desconozco sinceramente si esto ya lo han solucionado, pero fue el detonante que me hizo pasar a WP Super Caché.
Ya te digo, puede ser debido a que el SSL solo opera a nivel de dominio principal, y/o a la configuración que tienes montada. CloudFlare sé que funciona perfectamente con la paralelización, pero de los otros dos no puedo poner la mano en el fuego :).
Gonzalo dijo el 5 abril, 2016 a las 21:22:
ok, investigare con estas pistas que me has dado a ver si consigo algo, lo mismo probar el Wp super caché y desactivar los otros para ver si funciona, a ver si tirando del hilo lo logro sin perder lo que tengo y si no pues ya estará claro lo del certificado…
Para la paralelización, sabes si esta es solo una opción (hablando de hacerlo en el mismo alojamiento) o hay otros métodos? para investigar .
Muchas gracias por la ayuda!
Pablo F. Iglesias dijo el 5 abril, 2016 a las 23:01:
Entiendo que sí. Es decir, lo único que hace ese plugin es gestionar la carga dinámica de imágenes, pero vamos, que no haría falta el plugin para hacerlo, si por ejemplo entiendes un poco de sistemas y tienes acceso a nivel de administrador en el servidor.
Ánimo Gonzalo. Pregunta también a tu proveedor de SSL, que seguramente te puede decir si en efecto solo es compatible para el dominio principal o también subdominios.
abel dijo el 29 mayo, 2016 a las 13:54:
y como yo por ejemplo tengo las iamagenes aqui http://imgbox.com/ cres que pueda ? o se pueda
es que no me sale el clopud flare en las imagenes gracias espero ayuda
Pablo F. Iglesias dijo el 29 mayo, 2016 a las 14:15:
En tu caso Abel estás externalizando el visionado de imágenes. No las tienes en tu página, sino en una de terceros, que intentarán ya por su cuenta optimizarlas lo máximo posible, y lo que haces es enlazarlas desde fuera.
Ahí algo como esto no tiene sentido, ya que en tu servidor no están las imágenes.
Saludos!
abel dijo el 29 mayo, 2016 a las 14:22:
hola pablo , entonses como cres que lo hace el . el de la pagina fiuxy
por ejemplo este post es el mismo (EDITADO)
pero el post que tiene las iamagenes originales estan subidas ha terceros como (EDITADO)
pero ese o todos los usarios al subir las imagenes ha imgur, automaticamente se suben ha (EDITADO) osea ha su cloud o algo asi ,
como cres que lo aga el ? gracias
Pablo F. Iglesias dijo el 29 mayo, 2016 a las 19:21:
Si usas imgur por alguna razón específica, adelante. Lo único que entonces no tiene sentido que hagas lo que comento en este tutorial, ya que imgur se encarga de hacer algo parecido.
abel dijo el 29 mayo, 2016 a las 19:32:
no yo no uso imgur, de la pagina que te pase, yo queria aser algo asi pense que si asia eso mi pagina cargaria mas rapido ,
yo uso http://imgbox.com/ para las fotos
digamos que cuanto ago el text aqui
http://www.webpagetest.org/
siempre me sale esto
pero mmmmmmmmm creo que ati te sale lo mismo tambien
no podemos agregar las imagenes jejej
http://prntscr.com/b9w0gb
no me via fijado en tu pagina
mira esta persona no sale nada fiuxy, y pues en teoría siempre estamos buscando como ser mejor que la competencia
gracias espero que encontremos una solución ha ese problema o algo similar bro
o como podria arreglar o agregar eso ha cludflare ? gracias
Pablo F. Iglesias dijo el 29 mayo, 2016 a las 21:40:
Es normal. Lo que te recomiendan en esa página es que pases todo por un CDN, y yo no tengo ninguno a día de hoy activo.
Por poder se puede hacer muchas cosas, la cosa es hasta qué punto quieres dedicar recursos y tiempo a ello.
CloudFlare, por ejemplo, te ayudaría a acercar el contenido a aquellos que están lejos de tu servidor (se conectan de otras partes del mundo), pero no es un CDN al uso, y por tanto, seguramente este tipo de “errores” seguirían saliendo.
Lo más importante es que la página cargue rápido. Que luego se pueda mejorar, pues es cuestión de dedicarle más y más tiempo.
abel dijo el 29 mayo, 2016 a las 21:49:
bueno gracias, y esta muy buena tu pagina gracias!!
Pablo F. Iglesias dijo el 30 mayo, 2016 a las 8:06:
Muchas gracias Abel. Espero haberte ayudado :).