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.
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!
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 :).
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!
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.
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
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!
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
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.
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
Es normal. Lo que te recomiendan en esa página es que pases todo por un CDN, y yo no tengo ninguno hoy en día 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.
bueno gracias, y esta muy buena tu pagina gracias!!
Muchas gracias Abel. Espero haberte ayudado :).