Pequeñas cosas que uno puede hacer para mejorar la velocidad de un sitio

Google es el culpable, nos obliga a obrar en nuestra contra, sólo para su beneficio y el de nadie más. Pero lo peor es que ha creado un entorno de persecución insoportable: la performance del sitio basado en lo que ellos consideran performante.

Tamaño de fotos, velocidad de carga, estándares forzados y totalmente de facto, formatos impuestos y una enorme cantidad de cosas forzadas por la peor herramienta del mundo: PageSpeed Insights.

Aquí les cuento un par de cosas que se pueden hacer aunque no sean necesarias sino que Google quiere hacerte creer que son importantes mintiéndote sobre el estado de tu sitio.

Antes que nada: si tu sitio pesa mucho, pero mucho, okey, siempre viene bien un poco de ajustes, pero estoy seguro que tu sitio web está perfectamente bien, lo que no lo está es el PageSpeed Insights de Google.

El problema es que si un cliente tuyo, al que le armaste un hermoso sitio web según sus deseos y especificaciones, entra al PageSpeed va a creer que le vendiste una basura.

Hoy me encontré con una peor, el peor virus de todos, el McAfee Antivirus, se mete en tus conexiones del browser y es capaz de ponerte una pantalla de "página peligrosa" a tu sitio web si el puntaje del PageSpeed es bajo! Eso es una locura, completamente insano! ¿Qué mierda te metés? ¿Desde cuando un sitio lento es inseguro o malo? ¿Son enfermos mentales o qué? Bueno, lo primero que hago en toda PC es desinstalar el McAfee, pero más allá de eso ¿A quién cuernos se le ocurrió que la velocidad de un sitio era el problema? En tal caso se aburre le visitante y se va!

Los estándares para los que miden esto todavía conciben conexiones de 56kbps, en un mundo que está en 4G en transición a 5G no sólo ES una estupidez, sino que está completamente alejado de la realidad: 4G es más rápido que el 99% de las conexiones Desktop del mercado por fuera del TOP 10 de países.

Aun con todo esto tuve que aprender algunas técnicas horribles para mejorar ese puntaje falso que Google emite de tu sitio web, la mayoría de estas tienen que ver con el contenido multimedia, algo que las mentes maestras detrás de PageSpeed Insights ignoran, denigran, ponen en segundo plano. Para ellos internet debería ser texto puro sin imagenes...

Obviamente todo este posteo usará este mismo blog como ejemplo y experiencia, un blog hecho "a mano" sin templates comprados ni todos esos lujos que tienen otros sitios mejor posicionados gracias a cumplir a rajatabla con la dictadura de San (EVIL) Google.

Lazy Load ya tiene su tag

Esto es tal vez algo bueno, ya hace un tiempo los browsers nuevos tienen un tag que se puede agregar a las imagenes que permite hacer el Lazy Load, la carga en diferido para contenido que no está "todavía" visible.

Usualmente se hacía con javascript, así que había que modificar el sitio, incorporar un script medio raro y más o menos eficiente y cruzar los dedos para que no dejara de funcionar y volviera obsoleto todo tu contenido.

Me negué por años a meter algo así en el blog hasta que apareció loading="lazy"

Tan simple como eso, la distancia del Lazy Load la decide el desarrollador del browser, no está en tus manos eso, pero como Chrome lo maneja relativamente bien aunque no todos los browsers lo tienen implementado todavía. Firefox no, por ejemplo.

En el caso del tag video se puede usar preload="none" y si se pone el tag poster="" con una imagen funcionará como la imagen, no lo probé pero en teoría es así según Google.

Imaginen que la portada de mi sitio tiene 10 imágenes como mínimo, una por cada posteo, a 200kb en promedio de tamaño esto ahorra bastante sin tener que recurrir a scripts de terceros.

Algunos insisten con seguir usando los javascript viejos... señores... ese es otro de los poblemas que veremos más adelante...

Videos de Youtube... Google te critica que uses Google

Google insiste con que evites usar código de terceros que se carga desde otra URL para hacer tu sitio más rápido. Cual es uno de los peores culpables de la lentitud? Youtube!

Así es, poner el player de Youtube en tu portada es un balazo en las pelotas de la performance que ellos mismos reclaman, te sobrecarga el sitio con javascript exagerado, no tiene respeto por nada el fuckin "embed" y obviamente quiero ese video incrustado aquí ¿Cómo resolverlo?

No recuerdo bien dónde era pero encontré una solución relativamente elegante

<iframe width="640" height="360" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style>
<a href=https://www.youtube.com/embed/FiNkeuo_uS0?autoplay=1>
<img src='https://i.ytimg.com/vi/FiNkeuo_uS0/maxresdefault.jpg' alt='FabioTV - Resumen Semana 06 - 2020'><span>▶</span></a>" src="https://www.youtube.com/embed/FiNkeuo_uS0" frameborder="0" allowfullscreen="allowfullscreen" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
</iframe>

Este código recrea una pantalla en el iframe dentro de srcdoc, la misma sólo contiene la imagen de thumbnail, un ícono de play y un enlace. Cuando el usuario hace click recién ahí carga el embed real de Youtube!

Con esto uno transforma el player de Youtube en una imagen similar al player pero que requiere un doble click. Para los usuarios casi ni se nota, qué se yo, no es lo mejor, lo mejor sería que Youtube no tuviera un video con tanto javascript para espiarte, pero eso es lo doblemente bueno de esta solución: les cagás el tracking excesivo.

La estafa de Webp y otros formatos

Una que es una estafa increíble de Google es el formato Webp, es una mierda, no tiene soporte en casi ningún software que funcione bien. El plugin para Photoshop me tira imagenes que no puedo ni ver en el browser.

Pero es lo mismo que vengo diciendo, ¿A quién perjudica que una foto de 200Kb pudiese llegar a comprimirse un 20% más y por ende eso te califica en contra? ¿Quién necesita 40kb extras de conexión? ¿Me preguntaron a mí si yo quería un público tan rata miserable que 40Kb son un problema? No los quiero! fuera! no entren a un blog con fotos, no vean internet, quédense con WAP, ratones! :D

Aquí pueden ver esta foto, la JPG pesa 250kb, la Webp 100Kb, sí, hay diferencia en el tamaño pero... adivinen qué...

El plugin de Google para Photoshop no anda bien, crea mal las imagenes y muchas veces no la podés cargar, tuve que utilizar Gimp (software libre recomendado) para exportar en Webp y recién ahí funcionaron.

¿Tengo que ponerme a reeditar todos mis posts para agregar webp? Ni en pedo! ya fue Google, ya fue!

Pero ¿Y si el browser no soporta el formato? Firefox y Chrome lo soportan pero supongamos que tenemos algo viejo, hay algunos métodos horribles como el tag picture:

<picture>
  <source srcset="img.webp" type="image/webp">
  <source srcset="img.jpg" type="image/jpeg"> 
  <img src="img.jpg">
</picture>

En teoría así podemos usar los dos al mismo tiempo y el browser decide porque si es muy viejo saltea tanto el picture como el source y queda el img en el medio liberado.

Los scripts (los peores no son los tuyos)

Otro problema clásico de Insights es que te reclama que los scripts son muy grandes o hacen muy lento tu sitio, miren qué me muestra en mi caso como los peores culpables:

Son todos scripts de ellos mismos! los anuncios, analytics y Youtube, algo más?? es increíble que se pisen entre ellos pero lo hacen ¿Qué esperan de mí? Yo no puedo ponerme a toquetear sus scripts!

Es una locura esto pero bueno, así es como lo manejan así que uno tiene que andar ajustando sus propios javascript. Lo ideal es ejecutar lo propio en el final, no bloquear el renderizado del sitio.

En este sentido pasa lo mismo con el CSS y con las tipografías, consejo: súbanlas a su propio sitio web y no dependan de Google Fonts para cargarlas. Siempre es mejor que esten localmente servidas.

Todo es mejor local, hasta JQuery y cosas así, si uno más o menos actualiza estos scripts una vez al año no será un problema :P pero si los dejás a cargar desde una CDN o desde otra url Insights te dirá que hacés demasiados querys a otros dominios y eso lo ve como "malo".

Obviamente a este sistema de análisis no le gusta que tu sitio se vea bien, compite contra tu javascript, tu CSS, tus imagenes, videos, tipografías, todo, quiere que tengas un sitio horrible con la menor cantidad de contenido multimedia posible.

La ideología detrás de esto quedó una década atrás cuando Google buscaba limpiar la web de tanta basura. Era entendible, pero hoy en día el mismo buscador es un caos total lleno de porquerías que nadie quiere y hasta tratan de ocultar los anuncios.

Youtube, sitio principal de ellos, fracasa miserablemente con un puntaje (al momento de escribir esto) de 51/100 para Mobile y de 28/100 para Desktop. Un horror.

Este mismo blog a la hora de escribir esta nota está dando 77/100 en mobile y 95/100 en Desktop, no espero que se sostenga en el tiempo pero hoy a la mañana sin retocar dejaba mucho que desear. Sólo agregué los lazy loads y todo cambió.

Pero la pregunta es ¿Cambió realmente para los visitantes del sitio?

No, para nadie, nadie lo notó ni lo notará porque el sitio ya vuela y porque nadie usa una conexión de 56kbps desde hace 15 años más o menos, PageSpeed Insights es una mentira y te está engañando y obligándote a laburar horas de más por una supuesta performance que, en un sitio respetable en diseño y contenido, es imposible de lograr.

Atenta contra cualquier forma de creatividad y contenido interesante, no quiere que veas nada, quiere que tu sitio web sea como una vieja página web, sólo texto, nada interesante para ver pero todo super indexable para el buscador. Hermosa contradicción.

Si te gustó esta nota podés...
Invitame un café en cafecito.app


Otros posts que podrían llegar a gustarte...

Comentarios

  • gorlok     11/02/2020 - 11:50:09

    El McAfee ES un virus, es una mierda. Hasta regalado es malo. El único McAfee bueno, es el que no se instala. Bala y fuego al hdp que instala esa garcha. Y los proveedores de internet que lo regalan son un hdrmp que quieren ver el mundo arder. Me calenté :D

    • SergioDV     11/02/2020 - 12:10:45

      El otro día tenía que instalar un cliente de FTP e instalé el Filezilla y me instaló toda la mierda de McAfee, luego tuve que quitar todo con reinicio incluido.

  • Roberto     11/02/2020 - 12:03:53

    gorlok dijo:

    El McAfee ES un virus, es una mierda. Hasta regalado es malo. El único McAfee bueno, es el que no se instala. Bala y fuego al hdp que instala esa garcha. Y los proveedores de internet que lo regalan son un hdrmp que quieren ver el mundo arder. Me calenté :D


    clap clap clap clap

  • Elio     11/02/2020 - 12:16:43

    Me recuerda a los devs de elementary OS que armaron su propio blog y se quejaban de que google les intimidaba con bajarles el pagerank porque no tenían AMP, a pesar de es un sitio web estático que carga al instante en cualquier conexión (https://blog.elementary.io/).

  • elio     11/02/2020 - 12:20:22

    Extrañamente, pagespeed le da 100 puntos al blog de elementary OS pero dice que su velocidad es "moderada" (marcado con negrita y naranja!) comparado con otras páginas. WTF?

    https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fblog.elementary.io%2F

  • Fernando     11/02/2020 - 13:34:33

    Esas cosas ya no sirven para nada, quedaron obsoletas con las velocidades actuales de internet.

  • jorge     11/02/2020 - 14:16:48

    Aparte, la verdad este sitio no esta "plagado" de multimierda.
    No quiero pensar el "ranking" de sitios como clarin.

    • Fabio Baccaglioni     11/02/2020 - 15:17:27

      le da 17 y 78, alta mentira.
      lo que hacen es cargar la página de una forma para Google y de otra para el resto :D ese truquito también funciona

  • Nelson     12/02/2020 - 08:32:04

    Como siempre, excelente...

  • Martin     12/02/2020 - 09:22:53

    Consulta, usaste cloudflare alguna vez? yo lo uso y rinde

    • Fabio Baccaglioni     12/02/2020 - 16:07:23

      depende para qué, en este blog no lo necesito, en otros puede tener más sentido, pero acá me gusta tener control real de la cosa

  • Martin Aberastegue     12/02/2020 - 09:27:29

    Muy buenos tips! y tal como decís, si usas fonts o libs alojados en sitios de terceros o CDNs te van a chillar todas las herramientas de performance por eso, no se supone que es un a ventaja distribuir los contenidos de esa manera? Quien los entiende... El Lazy load es un golazo siempre que no moleste en mobile, más con tanto media gama fulero dando vueltas...

    Algo que hice hace unas semanas fue retrasar la carga de ciertos scripts utilizando Google Tag Manager (fue lo más práctico porque los tenía ahí ya, pero se puede hacer con JS). Por ejemplo, en un sitio tenía el tag de un robot de chat y pixel de Facebook. Retrase ambos unos milisegundos y voilà! depende de cuando cargues el test pero me da alrededor 83 mobile / 100 desktop.

    https://developers.google.com/speed/pagespeed/insights/?hl=es&url=https%3A%2F%2Fwww.leideemarketing.com%2F&tab=desktop

    En mi caso retrase estos dos scripts 1500 ms, porque da tiempo suficiente a que vean algo del sitio antes de que tenga sentido ofrecer ayudar vía el chatbot. Y funciona igual que antes, no pego en performance de esa tool. En el caso de Facebook, el pixel de seguimiento la realidad es que no me sirve de mucho taggear a un usuario si está menos de 2 segundos en el sitio, no demostró interés alguno y haciendo que se dispare con retardo hasta puede que ayude a la larga a mejorar el costo por lead en pauta.

  • José Zanni     16/02/2020 - 17:06:54

    Para Youtube yo uso una solución que es bastante satisfactoria.

    Detecto URL, reemplazo por la imagen de previsualización con el iconito de PLAY al centro y agrego un evento de click que recién entonces carga el player y además con autoplay.

    La única cosa negativa es que no tiene el nombre del video.

Deje su comentario:

Tranquilo, su email nunca será revelado.
La gente de bien tiene URL, no se olvide del http/https

Negrita Cursiva Imagen Enlace


Comentarios ofensivos o que no hagan al enriquecimiento del post serán borrados/editados por el administrador. Los comentarios son filtrados por ReCaptcha V3.