Antes que nada quiero contextualizar el motivo de esta publicación…
En estos días en mi trabajo como freelance me han llegado dos personas que han querido que les optimice su sitio que está muy lento, uno de ellos utilizaba Joomla con una plantilla, por lo que ya era obvio para mí el motivo de su sitio lento, pero el otro llamó mi atención ya que no era más que archivos HTML con imágenes, estilos y demás que realmente no eran complejos, eran unas 8 páginas HTML que tardaban entre 30 y 45 segundos en cargar cada una.
Algo curioso que llamó mi atención era que el código parecía que siguió buenas prácticas y terminó por convertirse en un extraño chorizo de código amontonado.
El CSS empieza a utilizar cuestiones como margin: 50px 20px; y termina por hacer uso de margin-top: 50px; margin-bottom: 50px; margin-left: 20px; margin-right: 20px; es como si hubiese empezado con X persona y terminado con Y, le comento a mi cliente que si han hecho esto varias personas, solo por quitarme la curiosidad y me comenta que no, que solo fue una persona.
Esto entonces me da como conclusión que la misma persona terminó por “enfadarse” y aplicar buenas reglas a hacer todo al aventón.
Ya que contextualizamos un poco el motivo de esta publicación, empecemos con 3 cosas que veremos aquí:
- CSS
- HTML
- Imágenes
Estas 3 cosas serán las que veremos para saber cómo optimizar un sitio básico de forma sencilla.
Lo primero es el CSS. Una recomendación que siempre se hace es el no hacer lo que mencioné anteriormente, evitar el padding-top: 50px; padding-left: 20px; padding-bottom: 50px; padding-right: 50px; por poner otro ejemplo ya que esto ocupa más tiempo para ejecutarse y más peso en los archivos, por lo tanto carga más lenta. Podemos optimizar el CSS haciendo reducción de este tipo de código combinando las propiedades en una sola, tal caso para padding, margin, background, border,entre otros.
Otra cosa que podemos hacer es evitar el uso de clases repetitivas, por ejemplo, suponiendo que tendremos 3 botones que compartirán estilos y cambiarán su fondo, no es necesario hacer una clase por cada botón, se puede aprovechar el estilo de código de clases anidadas, es decir:
Suponiendo que tenemos la clase: .boton{ border: solid 1px red; font-size: 12px; font-family: 'Arial'; background: transparent; outline: none; color: red; } y queremos que únicamente cambie el color de rojo a verde, entonces hacemos uso de la clase anidada teniendo entonces: .boton.verde{ border-color: green; color: green; } y entonces en HTML usaríamos: <button class="boton green">Este es verde</button><button class="boton">Este es rojo</button> y ambos solo harían el cambio donde queremos realmente que varíe entre clases y no necesitamos duplicar todo el código CSS para ambos casos.
Otro detalle que he notado es que se hace uso de IDs para cuestiones que pueden usar clases y al haber muchas IDs específicas, empieza a generar mucho código CSS, un ejemplo: En este caso, vi que usaba IDs para generar relaciones a jQuery, pero las estilizaba ahí, es decir, el slider era un ID y lo estilizaba haciendo uso del ID en CSS, luego dentro de, asignaba vía jQuery también un ID a las flechas para cambiar entre slides y por último le agregó un ID a las etiquetas H en cada slider y las estilizaba por separado.
En este caso podemos reducir todo ese código, primero no forzando a jQuery a inyectarle IDs, segundo, haciendo uso de las clases para las H y como comenté antes, de las clases anidadas podemos reducir todo ese código. Además, no es necesario que se usen IDs aún cuando ya están pre-estilizados los elementos.
Para estos casos, es mejor hacer uso de !important si no nos permite sobre-escribir nuestros estilos por X o Y razón, pero podemos aprovechar las mismas clases y pasarlas de nueva cuenta en nuestro estilo.
Por último, los dos últimos puntos para no extendernos ya que queremos ser algo breves, hay que evitar el código basura, es decir, si hay clases que no se utilizan, eliminarlo, en mi caso había de las 1,800 líneas promedio de CSS del proyecto, unas 300 de código basura que no estaban siendo utilizadas y logré dejar en unas 850 las líneas finales resumiendo las cosas. El otro punto para finalizar CSS es minimizar el código haciendo uso de herramientas en línea para que así, se muestre la versión compacta y pese menos nuestro archivo final. Aquí cabe destacar que recomiendo siempre guardar una copia del original, pero, no olvidemos que si minimizamos y perdemos el archivo original, podemos volver a recuperar haciendo uso de herramientas como “CSS Beautify” y así ver el código legible de nueva cuenta.
El apartado de HTML es bastante sencillo, técnicamente, HTML debe estar siempre ahí y ser estilizado por el CSS, pero hay apartados que podemos optimizar, por ejemplo, en este proyecto cargaban 8 veces las tipografías desde Google Fonts, siendo que se podía conjuntar en una sola llamada. Por eso se evita el uso de múltiples cargas de CSS uniendo todos en uno en lo posible y no cargando HTML con etiquetas “innecesarias”, es decir, en este caso, repetir la misma para cargar “Bold, Light” y demás.
Otro error que se hace en HTML y no se optimiza es que a veces metemos etiquetas donde no se deben, por ejemplo span se mete para estilizar pequeños fragmentos internos por ejemplo de una H , algo como <h1>Hola <span>Mundo</span></h1> pero a veces las ponemos sin sentido, ponemos por ejemplo muchos <br /> para hacer saltos de línea o incluso me ha tocado toparme con <p></p> a lo loco para saltar líneas.
Ahora bien, hay que evitar el uso de código HTML innecesario, por ejemplo para alertas en este proyecto inyectaron un código como este: <div class="alerta error" id="aviso1">Esto es un aviso</div> y luego cuando ejecutaba una acción el usuario (en este caso no era más que un botón para vincular a un PDF que abría en un modal, esta etiqueta (no con este texto) estaba ahí y la mostraba con jQuery estilo $("#aviso1").show(); y pues mostraba su respectivo texto, luego al cliquear la descarga, se abría otro aviso para mostrar que se iba a descargar el archivo y así…pero realmente no es necesario aún buscando UX y el HTML queda cargado con etiquetas que se pueden relativamente generar con código JS para no tener código innecesario en el HTML y así más limpio.
Para finalizar, al igual que en CSS lo mejor es minimizar el código haciendo un archivo más ligero al final y guardar siempre su original.
Por último las imágenes, aquí había algo súper relevante para estos casos, me tocó ver imágenes de resolución incluso de 1080p en espacios de “600×600” y con el background a center center cargaba esta imagen de 1.5mb, además de que según el cliente se guardaban en calidad alta en Photoshop, por lo que las hacían pesar muchísimo. Lo primero fue usar algún compresor como TinyJPG, posterior, hay que hacer su acomodo al tamaño, si el campo es de 600×600 y sabemos que no crecerá ese espacio, aún moviéndose en responsivo, lo mejor es mantenerse sobre este aspecto y que la imagen realmente mida esa cantidad, pero, para cuestión de evitar un pixelaje muy agresivo, es recomendable aumentar unos 50px.
Teniendo entonces nuestra imagen en Photoshop a calidad 7, y posterior pasando esta imagen ya hecha a su tamaño, en mi caso pensando en que el lugar donde estará es de 600×600 se haría de 650×650, y ya teniendo el JPG guardado, lo pasamos por TinyJPG y entonces, con esto tenemos una imagen muy reducida, en mi caso la imagen de 1.5mb pasó a solamente 46kb.
Otras cosas que se tienden a hacer es el Lazy Loading pero en este caso no lo veremos, lo que sí cabe mencionar es que a veces por UX incluso, se hace uso de imágenes muy pequeñas, dígase, 50×50 y luego se les aplica un efecto con CSS de desenfoque para que muestre que está una imagen ahí y posterior se reemplaza con la buena una vez que ya haya cargado. Esto es otro detalle que no veremos.
Pero de esta forma podemos evitar que haya una carga tan excesiva, incluso se recomienda evitar el uso de imágenes y mejor usar íconos basados en tipografía como FontAwesome, o SVGs directamente, si es necesaria la imagen pues se pone pero habrá que optimizarlas para que no tengan carga innecesaria para el usuario.
Originalmente como menciono, la página de mi cliente solo de visitar el index, pesaba unos 40mb entre imágenes y textos, después de la limpieza, pesaba al rededor de 3.5mb-4.5mb ya que eliminé imágenes como menciono y reemplacé por íconos, comprimí las imágenes, mejoré el CSS, el HTML, el JS y demás y vualá, tenemos una página que cargaba en 3.5s totalmente con una conexión a 5mbps incluso en teléfonos con red 3g, no tomaba más de 5s en cargar la página casi en su totalidad.
Por ahora estos puntos son sencillos y que se comentan en múltiples sitios pero quise hacer un tema de ello para empezar una serie de publicaciones para seguir optimizando sitios básicos y estáticos.
