Reducir el código de una página web:

Reducir el código de una página web:
Aligerar el código nos va a permitir reducir el peso de una página web, y por tanto aumentar su velocidad de descarga, sin afectar su funcionalidad.Limpiar el código seo españa
Podemos reducir el tamaño, no sólo del código HTML, sino también del CSS y del JavaScript (incluídos los archivos externos .css y .js) que contenga, siguiendo estas sencillas reglas:

Eliminar el código superfluo, es decir aquél que no tiene ninguna incidencia en la página. El código superfluo es especialmente común en los sitios web que han sufrido rediseños o modificaciones, con estilos CSS que referencian clases o elementos que ya no existen o funciones JavaScript que ya no son utilizadas.

Eliminar código redundante, es decir aquél que se encuentra duplicado y que por lo tanto obtiene los mismos resultados de diferentes formas. El código redundante es muy habitual en CSS, con elementos que están formateados mediante diferentes estilos.

Eliminar los comentarios. Los comentarios son muy útiles cuando se está escribiendo el código, pero son totalmente innecesarios de cara a los usuarios, por lo que es una buena idea excluirlos, al menos en la versión pública de tu sitio web.agencia seo barcelona

Eliminar tabulaciones, retornos de carro y espacios innecesarios. Una vez que tengas tu código definitivo, puedes eliminar todos los caracteres innecesarios para reducir ligeramente el tamaño del archivo. Ya que el código quedará prácticamente ilegible, es conveniente mantener una versión del archivo sin «limpiar» de tal forma que puedas realizar fácilmente modificaciones sobre él (y volver a llevar a cabo este paso para reducir de nuevo su peso).
Hay herramientas que simplifican esta tarea, como HTML Code Cleaner para HTML, Clean CSS para archivos CSS o ShrinkSafe para archivos JavaScript.Comprimir el código
El código de tu página web es básicamente texto, lo que significa que tiene un gran ratio de compresión. Un texto comprimido puede ver reducido su tamaño hasta en un 95%. La mayoría de los navegadores soportan la compresión en Gzip, lo que significa que las páginas se descargan comprimidas (con un tamaño mucho menor) y se descomprimen en el navegador para mostrarlas normalmente, aumentando considerablemente la velocidad de descarga.
Para que esto se lleve a cabo hace falta que las páginas se compriman desde el servidor. Si estás usando WordPress puedes habilitar la compresión con Gzip desde Opciones > Lectura > WordPress debería comprimir las entradas (gzip) si los navegadores lo requieren.
Si no usas WordPress, pero tu sitio web está basado en PHP, requerirás una simple línea de código para conseguir el mismo resultado:

<?php
if ( extension_loaded( “zlib” ) ) ob_start( “ob_gzhandler” );
?>
Este código comprueba si la libreria gzip está cargada, y en caso afirmativo usa un buffer interno que almacenará la salida para devolverla finalmente comprimida. Debes colocar esta línea lo antes posible dentro de tu código, antes de que se haya devuelto ningún tipo de contenido. La llamada de retorno ob_gzhandler se encarga de comprobar si el cliente (el navegador) soporta la compresión Gzip, y en caso contrario devuelve la salida sin comprimir.
Con este sencillo código puedes enviar comprimida cualquier página de HTML. Pero podemos ir más allá y comprimir además los archivos CSS y JavaScript externos que use tu web. Estos archivos tienen las extensiones .css y .js, y a no ser que cambies la configuración del servidor, no soportan PHP. Por lo tanto el primer paso será cambiar la extensión de estos archivos a .php. Por ejemplo, de estilo.css a estilo.php o de javascript.js a javascript.php. Esto presenta dos graves, aunque salvables, inconvenientes:

Los archivos .css y .js son cacheables por el navegador (por lo que sólo son descargados la primera vez y su carga es automática en sucesivas ocasiones), mientras que los .php no.

Algunos navegadores no interpretan los archivos .php como CSS o JavaScript independientemente de que sean referenciados mediante las etiquetas o link rel=»stylesheet» type=»text/css»…>.
Para solventar esto, necesitaremos añadir unas líneas más al código anterior. Por ejemplo, en el archivo CSS:

<?php
@header( “content-type: text/css” );
@header( “Cache-control: max-age=”.(12*60*60).”, must-revalidate” );
@header( “Expires: “.gmdate(“D, d M Y H:i:s”, time()+12*60*60).” GMT” );
if ( extension_loaded( “zlib” ) ) ob_start(“ob_gzhandler” );
?>
…Aquí el CSS…
Análogamente, en el archivo JavaScript:

<?php
@header( “content-type: text/javascript” );
@header( “Cache-control: max-age=”.(12*60*60).”, must-revalidate” );
@header( “Expires: “.gmdate(“D, d M Y H:i:s”, time()+12*60*60).” GMT” );
if ( extension_loaded( “zlib” ) ) ob_start( “ob_gzhandler” );
?>
…Aquí el JavaScript…
En los códigos anteriores se envía un encabezado HTTP con el Content-type correcto para que el navegador lo trate como un archivo .css o .js corriente. Los encabezados Cache-control y Expires indican al navegador que debe cachear el archivo durante 12 horas (12 por 60 por 60 segundos). Puedes cambiar el 12 a cualquier otro valor. La línea que habilita la compresión con Gzip es la misma de antes.
Gracias a este simple método conseguirás reducir sustancialmente el tiempo de descarga de tu página web. Como contrapartida tu servidor consumirá más CPU al tener que realizar los cálculos para comprimir el texto. Aunque los efectos de la compresión Gzip sobre el servidor no están del todo claros, ya que este método también tiene como efecto el que haya menos conexiones abiertas (al devolver la respuesta más rápidamente), aligerando por tanto la carga del servidor. Que en conjunto la compresión sea beneficiosa o perjudicial para el servidor seguramente dependerá de cada sitio web.
Aligerar el código nos va a permitir reducir el peso de una página web, y por tanto aumentar su velocidad de descarga, sin afectar su funcionalidad.Limpiar el código
Podemos reducir el tamaño, no sólo del código HTML, sino también del CSS y del JavaScript (incluídos los archivos externos .css y .js) que contenga, siguiendo estas sencillas reglas:

Eliminar el código superfluo, es decir aquél que no tiene ninguna incidencia en la página. El código superfluo es especialmente común en los sitios web que han sufrido rediseños o modificaciones, con estilos CSS que referencian clases o elementos que ya no existen o funciones JavaScript que ya no son utilizadas.

Eliminar código redundante, es decir aquél que se encuentra duplicado y que por lo tanto obtiene los mismos resultados de diferentes formas. El código redundante es muy habitual en CSS, con elementos que están formateados mediante diferentes estilos.

Eliminar los comentarios. Los comentarios son muy útiles cuando se está escribiendo el código, pero son totalmente innecesarios de cara a los usuarios, por lo que es una buena idea excluirlos, al menos en la versión pública de tu sitio web.

Eliminar tabulaciones, retornos de carro y espacios innecesarios. Una vez que tengas tu código definitivo, puedes eliminar todos los caracteres innecesarios para reducir ligeramente el tamaño del archivo. Ya que el código quedará prácticamente ilegible, es conveniente mantener una versión del archivo sin «limpiar» de tal forma que puedas realizar fácilmente modificaciones sobre él (y volver a llevar a cabo este paso para reducir de nuevo su peso).
Hay herramientas que simplifican esta tarea, como HTML Code Cleaner para HTML, Clean CSS para archivos CSS o ShrinkSafe para archivos JavaScript.Comprimir el código
El código de tu página web es básicamente texto, lo que significa que tiene un gran ratio de compresión. Un texto comprimido puede ver reducido su tamaño hasta en un 95%. La mayoría de los navegadores soportan la compresión en Gzip, lo que significa que las páginas se descargan comprimidas (con un tamaño mucho menor) y se descomprimen en el navegador para mostrarlas normalmente, aumentando considerablemente la velocidad de descarga.
Para que esto se lleve a cabo hace falta que las páginas se compriman desde el servidor. Si estás usando WordPress puedes habilitar la compresión con Gzip desde Opciones > Lectura > WordPress debería comprimir las entradas (gzip) si los navegadores lo requieren.
Si no usas WordPress, pero tu sitio web está basado en PHP, requerirás una simple línea de código para conseguir el mismo resultado:

<?php
if ( extension_loaded( “zlib” ) ) ob_start( “ob_gzhandler” );
?>
Este código comprueba si la libreria gzip está cargada, y en caso afirmativo usa un buffer interno que almacenará la salida para devolverla finalmente comprimida. Debes colocar esta línea lo antes posible dentro de tu código, antes de que se haya devuelto ningún tipo de contenido. La llamada de retorno ob_gzhandler se encarga de comprobar si el cliente (el navegador) soporta la compresión Gzip, y en caso contrario devuelve la salida sin comprimir.
Con este sencillo código puedes enviar comprimida cualquier página de HTML. Pero podemos ir más allá y comprimir además los archivos CSS y JavaScript externos que use tu web. Estos archivos tienen las extensiones .css y .js, y a no ser que cambies la configuración del servidor, no soportan PHP. Por lo tanto el primer paso será cambiar la extensión de estos archivos a .php. Por ejemplo, de estilo.css a estilo.php o de javascript.js a javascript.php. Esto presenta dos graves, aunque salvables, inconvenientes:

Los archivos .css y .js son cacheables por el navegador (por lo que sólo son descargados la primera vez y su carga es automática en sucesivas ocasiones), mientras que los .php no.

Algunos navegadores no interpretan los archivos .php como CSS o JavaScript independientemente de que sean referenciados mediante las etiquetas o link rel=»stylesheet» type=»text/css»…>.
Para solventar esto, necesitaremos añadir unas líneas más al código anterior. Por ejemplo, en el archivo CSS:

<?php
@header( “content-type: text/css” );
@header( “Cache-control: max-age=”.(12*60*60).”, must-revalidate” );
@header( “Expires: “.gmdate(“D, d M Y H:i:s”, time()+12*60*60).” GMT” );
if ( extension_loaded( “zlib” ) ) ob_start(“ob_gzhandler” );
?>
…Aquí el CSS…
Análogamente, en el archivo JavaScript:

<?php
@header( “content-type: text/javascript” );
@header( “Cache-control: max-age=”.(12*60*60).”, must-revalidate” );
@header( “Expires: “.gmdate(“D, d M Y H:i:s”, time()+12*60*60).” GMT” );
if ( extension_loaded( “zlib” ) ) ob_start( “ob_gzhandler” );
?>
…Aquí el JavaScript…
En los códigos anteriores se envía un encabezado HTTP con el Content-type correcto para que el navegador lo trate como un archivo .css o .js corriente. Los encabezados Cache-control y Expires indican al navegador que debe cachear el archivo durante 12 horas (12 por 60 por 60 segundos). Puedes cambiar el 12 a cualquier otro valor. La línea que habilita la compresión con Gzip es la misma de antes.
Gracias a este simple método conseguirás reducir sustancialmente el tiempo de descarga de tu página web. Como contrapartida tu servidor consumirá más CPU al tener que realizar los cálculos para comprimir el texto. Aunque los efectos de la compresión Gzip sobre el servidor no están del todo claros, ya que este método también tiene como efecto el que haya menos conexiones abiertas (al devolver la respuesta más rápidamente), aligerando por tanto la carga del servidor. Que en conjunto la compresión sea beneficiosa o perjudicial para el servidor seguramente dependerá de cada sitio web.

Be the first to comment

Leave a Reply

Your email address will not be published.


*