Seleccionar página
Comprimir archivos HTML CSS Js | código .htaccess

Comprimir archivos HTML CSS Js | código .htaccess

por | 16 Ene 2018

Código .htaccess con Gzip o Deflate para comprimir archivos HTML CSS Js

Aprenderemos a comprimir archivos HTML CSS Js … añadiendo código al archivo .htaccess ubicado en nuestro servidor. El código mostrado sirve para comprimir archivos HTML CSS JS, imágenes, XML…

¿Por qué debemos comprimir archivos?

Existen múltiples razones por las que debes plantearte comprimir los archivos de tu web, por citar algunas:

  1. Reduce el peso de tus archivos drásticamente (en los ejemplos de este post, hemos reducido un 80%).
  2. Como los archivos pesan menos, mejoran los tiempos de carga de tu sitio = mejorarás tu SEO.
  3. Además consumirás menos ancho de banda en tu servidor.
  4. Puede significar una oportunidad frente a páginas de la competencia más lentas.
  5. Y por último y no memos importante, mejora la experiencia de usuario.

Antes de comenzar, te recomiendo hacer un test de velocidad de tu página para que compares los resultados de velocidad antes y después de comprimir archivos HTML CSS Js..

Puedes realizar el test de velocidad con cualquiera de estas herramientas:

PageSpeed Insights

https://www.pingdom.com/free

Cómo funciona la compresión de archivos

Voy a dar una explicación muy sencilla que te ayudará a entender mejor este tutorial, pero sin entrar en detalles. 

Cliente web (navegador) y servidor web deben estar preparados para trabajar con archivos comprimidos

Lo primero que tenemos que entender es lo siguiente: para que la compresión de archivos funcione en una web, tanto el navegador (Mozilla, Chrome, IE, Safari…) como el servidor web donde tenemos alojado nuestro sitio, tienen que estar capacitados para trabajar con archivos comprimidos.

Desde  hace muchos años los navegadores ya tienen habilitada esta función, así que no debes preocuparte por el navegador. 

Cómo se realiza la comunicación entre cliente web (navegador) y servidor web 

También te ayudará saber como funcionan las comunicaciones entre el navegador que usa el usuario para ver una web y el servidor donde está alojada. Más o menos consiste en lo siguiente:

  1. El usuario accede a una url, entonces el cliente web (navegador) solicita esa página, recurso o archivo al servidor web (por ejemplo un servidor web Apache). En esta petición, el navegador además de solicitar el archivo, envía unas cabeceras dentro del HTTP con distinta información. Una de estas cabeceras hace referencia a la capacidad del navegador para aceptar o no archivos comprimidos. La cabecera es la siguiente: Accept-Encoding: gzip,deflate (en este caso el navegador está indicando que es capaz de trabajar con compresión de archivos gzip y deflate).
  2. El servidor web recibe la petición del archivo que se solicita y la información de cabeceras. Ahora el servidor sabe que el navegador acepta recursos comprimidos en gzip y deflate y puede optar por enviar al navegador los archivos comprimidos mediante uno de los dos métodos, con la garantía de que se mostrarán correctamente al cliente. Por supuesto el servidor tiene que tener habilitado alguno de los módulos de compresión que el navegador es capaz de manejar, si no los archivos se devolverán sin comprimir.
  3. Si existe el archivo, el servidor se lo envía al cliente web (navegador) y si además tiene habilitada la compresión, lo envía comprimido. Para indicar que el archivo que envía está comprimido, añade una cabecera con la siguiente variable: Content-Encoding: gzip, indicando al navegador que el archivo está comprimido (en este ejemplo con gzip).
  4. El navegador recibe el archivo, lee la información de cabecera y descomprime el archivo para mostrarlo al usuario.

Consideraciones iniciales para utilizar el método Gzip para comprimir HTML CSS Js …

El archivo .htaccess es un archivo oculto que sólo existe en servidores web Apache. Gzip es una variable PHP que si se encuentra arctivada a nivel de servidor, nos permite comprimir mediante este método. Por lo tanto, lo primero que tenemos que hacer es comprobar si nuestro servidor web es Apache y además si tenemos la variable PHP .gzip está activada.

Para saber si nuestro sitio va a soportar el método de compresión gzip vamos a la siguiente web: https://checkgzipcompression.com/  y escribimos nuestro dominio. Pulsamos sobre buscar y esperamos el resultado.

Comprimir archivos HTML CSS Js

Si el resultado es GZIP Enabled tu servidor es Apache y además soporta la compresión Gzip. Si observas la imagen verás que habilitando la compresión nos dice que puede reducir los archivos un 80.3%.

En caso contrario pueden ocurrir dos cosas: que tu servidor web sea Apache pero no tengas activado el modulo GZIP o que tu servidor web sea de otro tipo. Si estás tienes alguna empresa de hosting donde alojas tu página, en la descripción de los servicios que ofrecen te indicarán el tipo de servidor que usan.

Otras herramientas para comprobar gzip son:

http://www.gidnetwork.com/tools/gzip-test.php

http://gzipwtf.com/

cada una de ellas analiza diferentes datos. Te animo a que pruebes las tres y compares la información que arrojan sobre tu sitio.

Cómo Habilitar Compresión GZIP en servidores Apache

Opción 1: Habilitar Gzip desde el archivo .htaccess

El archivo .htaccess se encuentra en la raíz de tu servidor. Es una archivo oculto, si no lo encuentras comprueba que tienes activada la opción de ver archivos ocultos. Para acceder al archivo puedes utilizar tu servidor FTP habitual, yo utilizo FILEZILLA. Si tienes problemas para realizar este paso puedes enviarme un comentario y te ayudo.

Abre el archivo para editarlo y coloca el siguiente código. Si hay algún <ifModule> abierto lo colocas debajo del cierre </IfModule>

# BEGIN GZIP
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_item_include file .html$
mod_gzip_item_include file .php$
mod_gzip_item_include file .css$
mod_gzip_item_include file .js$
mod_gzip_item_include mime ^application/javascript$
mod_gzip_item_include mime ^application/x-javascript$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include handler ^application/x-httpd-php
mod_gzip_item_exclude mime ^image/.*
</IfModule>
# END GZIP

Guarda los cambios del archivo. Sube de nuevo el .htaccess al servidor y comprueba que la web funciona y que has activado el gzip con algunas de las herramientas que hemos visto para testear gzip.

Si el código anterior provoca algún problema puedes probar con el siguiente código:

# BEGIN GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
# END GZIP
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^application/javascript$
mod_gzip_item_include mime ^application/x-javascript$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include handler ^application/x-httpd-php
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

Si te fijas en cualquiera de los dos códigos mostrados, verás que hemos activado la compresión para varios tipos de archivos, pero no para las imágenes (exclude mime image). No es útil comprimir imágenes con ninguno de estos métodos, así que no modifiques la línea de código: mod_gzip_item_exclude mime ^image/.*

Si has llegado hasta aquí sin problemas, enhorabuena: has conseguido comprimir archivos HTML CSS Js … acabas de conseguir mejorar la velocidad de tu web.

Si tu servidor no soporta ningún código gzip en este artículo encontrarás otro código para activar el método de compresión de archivos: DEFLATE.

Opción 2: Habilitar Gzip instalando un plugin en WordPress

Si tienes una página WordPress, puedes instalar un plugin caché como WP Rocket que se encarga de añadir todo el código al archivo .htaccess. Para funcionar correctamente el módulo Gzip debe estar instalado en tu servidor. Más o menos estás haciendo lo mismo que en el punto anterior pero mediante un plugin. Obviamente el plugin ofrece muchas más características que mejoran la velocidad y rendimiento de tu sitio WordPress. Hace un tiempo que instalé el plugin en mi web y los resultados, opciones, continuas mejoras y actualizaciones que hacen, me están dando grandes resultados.

Cómo Habilitar Compresión Deflate si tu servidor Apache no soporta Gzip

El método Deflate para comprimir archivos HTML CSS Js …  es otra de las alternativas que puedes utilizar. Este código se añade igual que el anterior en el archivo .htaccess. Algunos técnicos afirman que es más rápido que gzip.

Este es el código que debes pegar en el archivo .htaccess para comprimir archivos con deflate:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/shtml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

Puedes quitar las líneas de código de aquellos tipos de archivos que no te interese comprimir.

Algunos temas de WordPress no soportan la compresión de archivos y se rompen al no cargar bien las reglas de estilo o javascript. Si te encuentras con este problema, borra el código y vacía caché de página.

Cómo Habilitar Compresión GZIP en otro tipo de servidores

Este apartado es para los usuarios que tengan un servidor web distinto a Apache. En concreto usuarios con servidores NGINX y ISS (windows). 

Habilitar GZIP en servidores web NGINX 

  1. Accede al archivo de configuración de Nginx mediante ssh, la ruta más usual es: /etc/nginx/nginx.conf
  2. Copia y pega el siguiente código en el archivo nginx.conf
gzip on;
gzip_comp_level 2;
gzip_http_version 1.1;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";
# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

Encontrarás más información en : http://nginx.org/en/docs/http/ngx_http_gzip_module.html#example

Habilitar GZIP en servidores web IIS

Si tienes un servidor Windows, en el siguiente enlace encontrarás información para comprimir archivos HTML CSS Js: https://technet.microsoft.com/en-us/library/cc771003(WS.10).aspx

Hemos terminado por hoy, recuerda que para mejorar la velocidad de tu página no es suficiente con comprimir archivos HTML CSS Js etc. Hay otros factores que afectan a la velocidad de tu sitio, por ejemplo la velocidad de respuesta de tu servidor, emplear algún sistema de caché, la cantidad de imágenes que muestras en cada página y el peso de las mismas… iré tratando estos factores en otros artículos. Espero que este te haya ayudado.

 

Si has conseguido llegar hasta el final seguro que tendrás una web más rápida. ¿Puedes comentarme los datos que has obtenido?

Por cierto antes de terminar: TAMBIÉN ES MUY IMPORTANTE QUE OPTIMICES LAS IMÁGENES, TANTO EL TAMAÑO COMO  EL PESO DE ARCHIVO, te dejo esta guía que he creado con múltiples herramientas que te pueden ayudar: Cómo comprimir imágenes desde el ordenador o dentro del servidor

Errores de datos estructurados en Search Console con WordPress

por | 28 Feb 2017

Corrección errores de datos estructurados

Ayuda para usuarios de páginas WordPress: solución a los errores de datos estructurados en Search Console, falta author, updated… tipo de datos hentry.

Microformats-hentry

Vamos a la herramienta para Webmaster de Google, Search Console y pulsamos sobre Apariencia en el buscador >> Datos Estructurados.

SearchConsole-DatosEstructurados

Cuándo termine el rastreo de tu página se mostrará un resumen con los errores de datos estructurados en Search Console.

Errores tipo de datos hentry en microformats.org

hentry-errores

En este ejemplo los errores se producen en el microformato de tipo  hentry. Esto quiere decir que estamos utilizando el formato de datos semánticos o estructurados de microformats.org. 

Para entender que error estamos cometiendo, lo más lógico es que conozcamos las propiedades de este microformato. Toda la información la encontrarás en la página: http://microformats.org/wiki/hCard

Lo más importante es conocer las propiedades obligatorias que hay que implementar para el título, autor y fecha de cada entrada del blog. La estructura del microformato hentry está compuesta de propiedades opcionales y obligatorias que si no son detectadas provocan errores de datos estructurados en Search Console.

Volviendo a nuestro ejemplo, vamos a hacer click sobre la palabra «hentry» para que nos muestre todas las páginas con errores:

Paginas-con-errores-en-datos-estructurados

Si nos fijamos en la última columna nos está indicando el error de datos estructurados que detecta, en mi caso si observo las URL veo que en todas las entradas de mi blog falta author y updated y en las páginas falta author, entry-title y updated. 

Para solucionar este error vamos a modificar las plantillas de WordPress o el archivo functions.php:

1.- Si el error es en entradas individuales del blog tenemos que modificar la plantilla single.php.  

2.- Si el error es en páginas modificaremos archive.php o la plantilla que carga las páginas.

3.- Si las etiquetas html se crean en funciones debemos trabajar con el archivo functions.php

Herramienta de pruebas de datos estructurados

Vamos a comprobar los datos estructurados que nos faltan, author y updated de nuestras entradas del blog:

1.- Selecciona una URL de un post de tu lista de errores y pulsa sobre la URL: en este caso seleccionamos una entrada del blog en la que falta author y updated.

ComprobarDatosEstructurados

Se abrirá una ventana emergente con un botón: Probar datos activos, pulsa sobre él para abrir la Herramienta de prueba de datos estructurados.

2.- En la columna de la izquierda verás el código fuente de tu página, aquí tienes que localizar la parte de código que hace referencia al título, autor y a la fecha de la entrada. 

Dentro de la etiqueta <article class=»hentry»> 

Herramienta de pruebas de datos estructurados

Los errores de datos estructurados en Search Console para esta URL concreta son: Falta author y updated. Analizando el código observamos lo siguiente:

1.- El título (entry-title) está correcto. Efectivamente el formato para el título sólo obliga a implementar una etiqueta HTML con class:»entry-title» y contenido de texto (el título de la entrada). CORRECTO

2.- El autor se agrupa en una etiqueta span HTML con la clase author vcard. CORRECTO

3.- El enlace a la URL de author: dentro del enlace de la etiqueta author es obligatoria la propiedad de class=»fn». Lo correcto es: <a href=»urlautor» class=»fn»…> ERROR

Debemos añadir la clase fn a todos los enlaces de autor

4.- La fecha: el esquema hentry obliga a tener un formato fecha con la class=»updated». En mi caso brilla por su ausencia. ERROR

Solución falta author, updated en los datos estructurados de WordPress

Ya hemos detectado los problemas que provocan los errores de datos estructurados en Search Console en nuestra página WordPress. Tenemos dos posibilidades para solucionarlos que dependen de cómo se crean las etiquetas HTML en nuestra página.

En algunos temas de WordPress las etiquetas se crean directamente en los archivos single.php, archive.php e index.php. En este caso al abrir el archivo encontrarás las etiquetas referentes a título, autor… y puedes modificar directamente el código para añadir los datos que te faltan. Sin embargo en otros temas es una función la encargada de crear estas etiquetas, en este caso la solución no es tan sencilla y depende del tema.

Vamos a ver esto con más detalle.

Solución 1: Modificaciones en archivos single.php, archive.php, index.php

Nos vamos a nuestra carpeta wp-content/themes y abrimos el archivo single.php. Localiza en el archivo las etiquetas: entry-title, author vcard y alguna que haga referencia a la fecha.

Si has detectado que falta entry-title entonces tienes que añadir también esta tag HTML:

<h1 class="entry-title"><?php the_title(); ?></h1>

Debajo de title busca author vcard y dentro del enlace añade la clase fn:

<span class="author vcard">
<a href="https://laprogramaciondehoy.com/author/" class="fn" title="Lph by Nerea Liébana" rel="author">
Lph by Nerea Liébana</a>
</span>

Por último nos falta modificar o añadir a la etiqueta de fecha la clase updated:

<span class="updated"><?php the_time('j F,Y'); ?></span>

Debes repetir estos pasos para los archivos index.php y archive.php si has detectado errores de datos estructurados en el index de tu WordPress o en las páginas.

Solución 2: Modificaciones en el archivo functions.php

Si después de revisar los archivos de tu tema, no has encontrado las etiquetas HTML es porque se generan mediante funciones de WordPress. En este caso debemos añadir filtros para modificar estas funciones.

add_filter the_author_post

‘the_author_posts_link’ es la función  encargada de crear el código HTML para vcard author. Vamos a añadir un filtro sobre esa función para que incluya en la etiqueta la clase fn.

Nos vamos abrir el archivo functions.php de nuestro tema y añadimos el siguiente código: el filtro reemplaza dentro del link rel=»author» por rel=»author» class=»fn»

//añadir class fn a la función auto 
function add_class_to_author_link($link) {
    return str_replace( 'rel="author"', 'rel="author" class="fn"', $link);
}
add_filter('the_author_posts_link', 'add_class_to_author_link');

Quitar hentry en las páginas que no sean entradas del blog 

Si quieres eliminar los datos estructurados para las páginas que no sean entradas individuales del blog, tienes que añadir el siguiente código en tu archivo functions.php.

/* Remove Hentry
/* ------------------------------------ */
function remove_hentry( $classes ) {
   if( !is_single() ) {
      $classes = array_diff($classes, array('hentry'));
      return $classes;
   } else {
   return $classes;
   }
}
add_filter( 'post_class', 'remove_hentry' );

Si analizas el código verás que eliminando el if(!is_single()) eliminarás los datos estructurados en toda tu web.

Si además quieres eliminar los datos estructurados en Custom Post Types (ejemplo CPT: trabajo-realizado y servicio) utiliza el siguiente código:

function remove_hentry( $classes ) {
   if( !is_single() || is_singular('trabajo-realizado') || is_singular('servicio')) {
      $classes = array_diff($classes, array('hentry'));
      return $classes;
   } else {
   return $classes;
   }
}
add_filter( 'post_class', 'remove_hentry' );

Personalmente creo que la mejor opción para solucionar el problema es hacer un mix de las soluciones que se aportan en esta entrada. Como los microdatos están pensados para aportar información semántica que se supone que ayuda al SEO de la página, opino que tienen sentido con entradas tipo post, eventos, noticias… pero no están pensados para contenido de páginas estáticas.

En definitiva yo he optado por eliminarlos de todas las páginas que no sean entradas del blog y corregir los problemas en las páginas de entradas individuales (single.php)

Más información soporte WordPress.

Comprobar que los errores se han solucionado

Google Search Console volverá a rastrear tu sitio en unas semanas y podas comprobar de nuevo si has solucionado los problemas que tenías con los datos estructurados. 

Si quieres ir comprobando las URL de cada página de error utiliza la: Herramienta test datos estructurados de Google

Información completa sobre microformato hentry: http://microformats.org/wiki/hentry