2

Consejos de optimización

19Ene
en Desarrollo web, Herramientas, HTML, Tutoriales

supermanVamos a dar algunos consejos que nos van a permitir mejorar el front-end de nuestros sistemas web.

Unos de los motivos principales de la optimización según desarrolloweb.com es que Google posiciona mejor a las web más rápidas en cargar, además es un hecho que si el usuario tiene que esperar más de 5 segundos para que cargue la página, es muy probable que la abandone.

En nuestra Universidad donde abundan los proyectos web no nos preocupamos por estos temas, y utilizamos framewoks javascript indiscriminadamente, por lo que sobrecargamos las páginas del cliente. Incluso para nuestro país es un punto muy importante, debido a la poca conectividad y a la lentitud de las conexiones.

Hoy empezaremos con la optimización del HTML.

Evita el código incrustado o en línea.

El código en línea es cuando escribimos en cualquier etiqueta HTML algún estilo CSS dentro del atributo style o cuando dentro de un atributo onclick esribimos algún código javascript.

El código incrustado es cuando se escribe CSS dentro de las etiquetas <style> o javascript dentro de las etiquetas <script>.

Estas formas de poner código aunque reducen las solicitudes HTTP, solo son recomendables cuando los archivos son pequeños y el costo de hacer una petición es mayor. Por otra parte estas formas pueden incrementar el tamaño del documento HTML y evita guardar en la cache los elementos en linea/incrustados.

La mejor opción es utilizar el código externo, usando la etiqueta <link> para incluir CSS, y el atributo src de la etiqueta <script> para incluir javascript. De esta manera no solo mejora la organización de tu código, sino que también hace posible al navegador cachearlo. Esta opción suele ser la mejor en la mayoría de los casos, sobre todo cuando estás trabajando con archivos grandes y una gran cantidad de páginas.

Ubica los estilos arriba y los scripts al fondo

Al poner los estilos en el <head> la página se muestra progresivamente, lo que hace aparentar que la página se carga rápido. Por otro lado, al poner los CSS al fondo la página se cargará sin estilos hasta que el CSS se descargue y aplique.

<head>
    <meta charset="UTF-8">
    <title>Browser Diet</title>
    &nbsp;
    <!-- CSS -->
    <link rel="stylesheet" href="style.css" media="all">
</head>

El javascript es mejor ponerlo al fondo (antes del fin del <body>) ya que de otro modo bloquean el renderizado mientras se están descargando y ejecutando.

<body>
  <p>Lorem ipsum dolor sit amet.</p>
  <!-- JS -->
  <script src="script.js"></script>
</body>

Utiliza el atributo async

Para explicar cómo este atributo es útil para el rendimiento, es mejor entender qué pasa cuando no lo usamos.

<script src="example.js"></script>

De esta forma, la página tiene que esperar a que el script sea descargado, analizado y ejecutado completamente antes de poder seguir mostrando el HTML. Esto puede incrementar significativamente el tiempo de carga de tu página. A veces este comportamiento puede ser el deseado, pero no suele ser el caso.

<script async src="example.js"></script>

El script es descargado asíncronamente mientras el resto de la página sigue siendo analizada. El script se ejecutará en cuanto se acabe de descargar. Tenga en cuenta que varios scripts asincrónicos se ejecutará sin un orden específico.

 Comprime el HTML

Aunque es una buena práctica identar el código y usar comentarios, al navegador eso no le interesa, por lo que puedes comprimir tu código con herramientas automatizadas. Como resultado, tus usuarios disfrutarán de un proceso de descarga, análisis y ejecución más rápido.
A continuación les dejo una de estas herramientas (requiere java):

HTML Compressor

0 MB

Fuente: Browser Diet

2 Comentarios

  1. LuisM dice:

    Muy buenos los consejos. Espero que sigan publicando, Saludos…

  2. Charlietyn dice:

    Articulo muy bueno y muy util

Dejar un comentario