Caso: ¿Cómo hicimos portent.com realmente rápido?
Nota: No soy un experto. Lo que leerán a continuación son cosas que adiviné sobre la marcha. Tengan cuidado, a menos que quieran que su equipo de informáticos les haga una visita echando humo por las orejas.
- Algún día seré tan rápido como portent.com
No quiero impresionar a nadie, pero soy un poco obsesivo y competitivo. De verdad, aunque sé que lo escondo muy bien.
Siempre he estado obsesionado con el desempeño del sitio. Las páginas más rápidas son las que tienen más conversiones , pueden rankear mejor y disminuyen el bounce rate, lo que puede ayudar al desempeño del PPC. Una buena experiencia de usuario es lo que separa a los buenos sitios de los dios-mio-este-sitio-es-genial.
Así que me propuse como objetivo hacer que la página principal de portent descargase en un segundo o menos. Y aunque no estamos justamente ahí, casi lo logramos. Este es un reporte de pingdom, usando todas las locaciones (incluyendo Europa):
Biiiieeeen. Incluso en el más lento, estamos debajo de los 2 segundos. Eso me hace sonreír.
Esto es lo que mi equipo hizo (conmigo haciendo una mini administración y volviéndolos prácticamente locos):
Lo básico: Imágenes, compresión y optimización del código.
El desempeño de un sitio es como el ciclismo, si tienes los mejores aparatos y afeitaste tus piernas, pero estas en una mala condición física, sigues pedaleando como, bueno, yo. Si pones tu sitio en un servidor potente y rápido pero tus imágenes están perdidas en el código seguirás siendo malo. Así que, aquí está lo que hicimos primero.
- Pusimos los scripst y hojas de estilo en el orden ideal (tanto como se puede). El código externo CSS va primero. Después se incluye el javascript externo. Así muchos servidores descargarán en paralelo, lo que permite ahorrar un poco de tiempo.
- Comprimimos las imágenes. Casi suelto un juramento cuando vi que teníamos 3 imágenes a todo color en formato JPG. Pero me calmé y reducimos el porcentaje de bytes de transferencia en 20%.
- Actualizamos el análisis del javascript. Esto nos causó bastantes dolores de cabeza, así que lo dejamos de lado.
- Minimizamos el CSS, HTML y javascript. Minimizar es una bonita y sin sentido palabra que significa remover todos los espacios y enter. Lo que nos ahorró 2-3 kb por archivo, un total de 6-8 kb. Muy poco, pero ayuda.
- Especificamos las dimensiones para todas las imágenes. Esto hace que el tiempo de descarga percibido sea menor pues el explorador no intenta adivinar de qué tamaño son las imágenes.
- Prendimos la compresión del servidor. Los servidores web más populares (Apache y ISS, por ejemplo) pueden comprimir automáticamente HTML, CSS, Jvascript y otros archivos usando un algoritmo de compresión GZIP. Que es una manera elegante de decir, agregando una línea al archivo de configuración de nuestro servidor, cortamos el tamaño de transferencia para nuestra página en la mitad. No está mal.
Un secreto: Usé Google Page Speed para todos los consejos arriba descritos. Deberían usarlo también.
Con lo anterior disminuimos el tiempo de descarga de la página de 3 a 4 segundos. ¿Satisfecho?, claro que NO.
Dándonos más lujos: Cabeceras que expiran
Obtener de 6 a 4 segundos fue lo máximo que pudimos exprimir de lo básico. Es tiempo de ponernos lujosos:
Activamos las cabeceras que expiran para archivos de un año a la fecha. Cuando visitas un sitio web, tu explorador almacena el cache en tu disco duro: hojas de estilo, imágenes, scripts, etc. Esto influye en la velocidad en la que carga una página la próxima vez que la visitas. El servidor envía esos archivos a tu explorador con cabecera de expiración, que le dice al explorador cuando debe re-cargarlos. Nuestro servidor marcó como default 24 horas para la mayoría de los archivos.
No es bueno. Ingenuo, de hecho. ¿Qué tanto cambiamos el logo del sitio? O ¿Nuestro fondo de pantalla?… una vez cada 3 años.
Configuramos nuestro servidor para que marcara con un año de expiración las páginas que se mantienen más estáticas.
Así, disminuimos otros .5 segundos del tiempo que tarda en cargar nuestra página. Pensamos: “Estamos haciendo muchos cambios de una sola vez”, así que es difícil de decir, pero, definitivamente ayudó.
Habilitar Keep-alives
No, esto no es sobre matar a la gente que visita nuestro sitio. Es sobre cómo nuestro servidor se conecta a tu explorador.
En no-geek, las características “Keep-Alive” comienzan diciéndole al servidor que mantengan la conexión mientras exploras el sitio. Eso reduce el número de veces que el servidor debe abrir nuevas conexiones, lo que salva procesador, memoria y sobre carga en la red.
¿Tiempo salvado? .2 segundos. Tus resultados pueden variar.
Cuando prendí esto por primera vez escribí en el archivo de configuración “Conneption: Keep Alive”. Apache comenzó a reírse como histérico de mis habilidades tecleo y se bloqueo. Lección: Las computadoras son literales, pero tienen sentido del humor. Revisa los archivos de configuración cuidadosamente.
Deshazte de scripts molestos
Usamos WordPress. Que es genial el 90% del tiempo. Pero hay scripts molestos como cron.php, que se disparan cada vez que se carga una página.
Lanzar wp-cron cada vez que descargas una página es cómo darle a cada pasajero las instrucciones de qué hacer en caso de una emergencia en su camino a subir al avión en vez de dárselos a todos al mismo tiempo. Ineficiente y tonto así que lo cambiamos.
Aún mejor, de alguna manera Googlebot encontró admin-ajax.php y lo rastreaba cada 30 segundos. Lo que le dio un gran dolor de cabeza a nuestro servidor. Así que agregamos a nuestro robots.txt la indicación para que dejara de arañarlo y la vida volvió a ser buena.
Crear un CDN
Aún vemos lentitud debido a que las imágenes y otros archivos se transfieren lentamente para nosotros, o más lento para la gente alrededor del mundo. La respuesta: Hacer que nuestro sitio utilice una red de distribución de contenido o CDN.
Un CDN riega tus archivos en el internet en servidores especiales. Cuando la gente visita tu sitio acceden a estos archivos de servidores, locaciones y redes optimizadas para entregarlas de la mejor manera. El resultado es:
- Los archivos se transfieren rápido, porque están (Algunas veces) cercanos a ellos.
- El tamaño de la transferencia se reduce, porque el contenido entregado vía CDN captura cookies. Así que no hay información extra adjunta. Sólo los bits.
Tratamos algunas redes. Y, después de que casi lanzo mi escritorio a Nueva Jersey en un ataque de ira gracias al “servicio” a clientes, nos cambiamos a MaxCDN. Han sido fantásticos con nosotros desde ese momento.
Ahora nuestro sitio se estaba volviendo más veloz. El tiempo promedio ha disminuido a 2 segundos. El equipo, probablemente, pensó que había terminado y que podrían volver al trabajo real pero noooo, tenía más.
Latencia y APC
Nuestro sitio usa PHP y constante vemos alta latencia. La conversación ideal entre servidor y explorador debe ser esta:
Explorador: Hola Servidor
Servidor: ¡Hola!, ¿Qué hay?
Explorador: ¿Puedo obtener el sitio para portent.com?
Servidor: Claro, sin problemas.
La alta latencia hacen que sea más como esto:
Explorador: Hola Servidor
Servidor: ZZzzz
Explorador: ¡¿Servidor?!
Servidor: ZZZzzz (Ronquido) hey, disculpa. ¿Qué puedo hacer por ti?
Explorador: ¿Puedo obtener el sitio para portent.com?
Servidor: Claro, sólo un segundo, creo que lo tengo por aquí…
Explorador: …
Servidor: Ok, aquí esta.
Muchas cosas causan latencia. En nuestro caso, el gran cuello de botella era el PHP. Cada explorador requeria que el servidor ejecutara una gran cantidad de scripts php. Lo que era tonto, ya que la mayoría de esos scripts hacían la misma cosa 9 de cada 10 veces.
Así que activamos algo llamado PHP Cache Alternativo, o APC. APC le da al servidor los resultados de ejecutar el PHP.
Dejé que un desarrollador real se hiciera cargo de la actualización ACP para evitar arruinar el servidor. El resultado fue que la página disminuyó su tiempo de descarga entre .8 – 1.5 segundos. Hice el baile de la felicidad.
¿Qué sigue?
Estoy en una búsqueda, dura, y aún no estamos ahí. Quiero que el 80% de las páginas en Portent.com descarguen en 2 segundos o menos y casi estamos cerca:
Por cierto, el reporte es de Google Analytics.
Pasos siguientes:
Trata de optimizar la congestión inicial. Impulsándola, podemos incrementar la cantidad de datos entregados a exploradores cuando se conectan por primera vez al sitio.
Encuentra una mejor manera de entregar los fonts. Los fonts de la web son grandes, por ejemplo, nuestro CDN causa muchos problemas de ese tipo. Hay CDNs específicos para entregar fonts, los tratamos, pero disminuyeron nuestra velocidad. Aun así se los recomendamos.
Realizar arreglos en 100+ blog post y re optimizar imágenes. ¿Algún voluntario?…
Espero que esto también les ayude a aumentar la velocidad de sus sitios. Si ven alguna idea que se me olvidara, díganmelo.
