Compresión Gzip js / css / aceleración del sitio html: cómo habilitar en .htaccess

imprimir · Время на чтение: 9мин · por · Publicada · Actualizado

reproducirEscuchar artículo

Compresión gzip js css html.¡Saludos, queridos lectores! hoy hablaremos de compresión gzip js | css | htmlpara acelerar la carga del sitio. Cómo habilitarlo con el archivo .htaccess. También le diré por qué necesita habilitar la compresión de archivos en el lado del servidor.

Este tema está directamente relacionado con la técnica. optimización del sitio. Al permitir manipulaciones bastante simples, significativamente acelerar la carga del sitio web. Un sitio rápido es un éxito significativo en la promoción de motores de búsqueda.

¿Cuál es el propósito de habilitar la compresión de archivos Gzip en .htaccess?

Cómo habilitar la compresión Gzip de páginas en el sitio.

Como he dicho en muchos de mis artículos! El sitio en la etapa inicial tiene un peso bastante grande. Y esos. la optimización es necesaria para reducir el peso de nuestro sitio. Por supuesto, necesitamos reducir la cantidad de código, el peso de las páginas, las imágenes y otras cosas. La tarea general es dar al usuario una versión ligera y de carga rápida del sitio.
Así, regalamos información rápidamente. La transición entre páginas y secciones tiene lugar en una fracción de segundo. Al mismo tiempo, los visitantes verán rápidamente todos los elementos de diseño cargados y otros elementos interactivos de interacción.

Compresión GZIP: proporciona un archivo ininterrumpido de archivos transferidos. Por lo tanto, obtenemos una compresión sin pérdidas de la calidad de la fuente. Todos los datos vuelven a su estado original después de descomprimirlos en el navegador del usuario. La implementación en sí se debe a varios algoritmos de trabajo. Estos incluyen DEFLATE básico usando LZ77 y Huffman.

Por supuesto, este tipo de compresión (compresión) no es una solución ideal. Pero la implementación de Gzip nos lleva a un equilibrio entre velocidad y relación de compresión. Este método es el más popular entre otras formas de acelerar el sitio. Además, la implementación de un método más global en el servidor requerirá mucho tiempo y pruebas. ¡Y puede que no dé el resultado deseado! La compresión Gzip en este sentido es la forma más confiable de acelerar las descargas de archivos.

Compresión Gzip: ¿para qué archivos es aceptable? ¿En qué servidores funciona?

De hecho, la compresión gzip cubre una gran lista de archivos. ¡Pero tiene un pequeño inconveniente! Cuando un usuario visita un sitio, el servidor necesita comprimir una gran cantidad de datos sobre la marcha. Esto conduce a una cierta carga en el servidor. Pero no es crítico en la mayoría de los casos. Todos los formatos de archivo compatibles después de la transferencia se muestran perfectamente en los navegadores populares.

Los principales incluyen:

  • texto/texto sin formato/html;
  • texto/aplicación xml/aplicación xml/xhtml+aplicación xml/xml-dtd;
  • aplicación/rdf+xml aplicación/rss+xml aplicación/atom+xml imagen/svg+xml;
  • texto/texto css/aplicación javascript/aplicación javascript/x-javascript;
  • fuente/aplicación de tipo abierto/aplicación de fuente-otf/x-fuente-otf;
  • fuente/aplicación truetype/aplicación font-ttf/x-font-ttf.
La compresión de archivos Gzip se utiliza en los principales servidores Apache y Nginx. Con módulos de trabajo válidos y capacidades de servidor.

Por ejemplo: Nginx - usado para estático. Comprime y procesa bien los archivos estáticos. La compresión ocurre gracias a los módulos ngx_http_gzip_module y ngx_http_gzip_static_module. La compresión ininterrumpida sobre la marcha se lleva a cabo con el reemplazo de la extensión principal con ".gz".

Ejemplo de una configuración estándar:

gzip activado;
gzip_min_longitud 1000;
gzip_types texto/aplicación sin formato/xml;

Apache es el servidor más solicitado. Por supuesto, la compresión será más ambiciosa y personalizable. La compresión Gzip en este servidor se realiza mediante el módulo mod_deflate. Al proporcionar compresión sobre la marcha antes de enviarse al navegador del usuario.

Ejemplo de una configuración estándar:

# Habilitar GZIP - habilitar compresión
AddOutputFilterByType DEFLATE texto/sin formato
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE texto/xml
AddOutputFilterByType DEFLATE texto/css
AddOutputFilterByType DEFLATE aplicación/xml
AddOutputFilterByType DEFLATE aplicación/xhtml+xml
AddOutputFilterByType DEFLATE aplicación/rss+xml
AddOutputFilterByType DEFLATE aplicación/javascript
AddOutputFilterByType DEFLATE aplicación/x-javascript

# Compresión con un algoritmo lento para reducir la carga en el servidor.

Motor de reescritura encendido
AñadirCodificación gzip .gz
RewriteCond %{HTTP: Aceptar codificación} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
Regla de reescritura ^(.*)$ $1.gz [QSA,L]

PHP es una opción menos popular. Pero también tiene la capacidad de organizar la compresión usando el módulo zlib. Este método no se recomienda ya que es extremadamente lento.

Ejemplo de una configuración estándar:

1TP29ArchivoOriginal = __DIR__ . '/jquery-1.11.0.min.js';
$gzipFile = __DIR__ . '/jquery-1.11.0.min.js.gz';

1TP29OriginalData = file_get_contents(1TP29OriginalFile);

$gzipData = gzencode($originalData, 9);
archivo_put_contents($gzipFile, $gzipData);

var_dump(tamaño de archivo($originalFile)); // int(96380)
var_dump(tamaño de archivo($gzipFile)); // int(33305)

Por supuesto, el uso de servidores Apache + Nginx + PHP también es posible juntos. Así, se proporcionará una determinada distribución de carga entre servidores. Pero esta es una tarea muy difícil, que no debe ser realizada por usuarios comunes.

Configuré mi servidor yo mismo, utilizando todas las principales ventajas de Apache/Nginx/PHP. Por lo tanto, Nginx maneja la estática, Apache maneja el resto con PHP. El resultado es muy positivo. Pero se dedicó mucho tiempo a organizar este método.

Cómo habilitar la compresión Gzip en un archivo .htaccess

De hecho, no es difícil hacer esto. Además, ya he hablado de este archivo.

Las reglas básicas siguen siendo las mismas:

  1. Asegúrese de guardar el archivo .htaccess original antes de editarlo. En caso de error 500, habrá algo que restaurar.
  2. No debe haber espacios entre líneas.
  3. Escribimos todos los comentarios después del letrero #.
  4. Asegúrese de verificar la integridad del código después de la inserción.

Ya se han mencionado varios ejemplos de configuración de reglas de .htaccess estándar. Pero en mi opinión esto no es suficiente, así que daré mi propio ejemplo. Este conjunto de reglas funciona en este sitio, como puede ver, no hay problemas.

Al mismo tiempo, la compresión se produce sobre la marcha, el sitio se carga rápidamente sin frenos. Todo lo que tiene que hacer es pegar este código en su archivo .htaccess. Si tiene su propio servidor, entonces creo que lo sabe todo usted mismo.

Para el público principal, instrucciones de uso:

  1. Vamos al servidor con cualquier cliente ftp popular;
  2. Vaya a la raíz del sitio (directorio);
  3. El archivo .htaccess se encuentra en el directorio principal del sitio;
  4. Lo abrimos con un editor de texto, en general Sublime Text 3 es mejor;
  5. A continuación, al final del archivo, pegue el código que se mostrará a continuación.
  6. Le rogamos que compruebe el código, ya que el sitio tiene protección contra copia (puede haber un enlace al sitio al final del código).

# Habilitar GZIP
ifmodule mod_deflate.c debe estar entre corchetes “<>”
AddOutputFilterByType DEFLATE texto/sin formato
AddOutputFilterByType DEFLATE texto/texto
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE texto/sin formato
AddOutputFilterByType DEFLATE texto/xml
AddOutputFilterByType DEFLATE texto/css
AddOutputFilterByType DEFLATE imagen/gif
AddOutputFilterByType DEFLATE imagen/jpeg
AddOutputFilterByType DEFLATE image/jpg
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE imagen/gif
AddOutputFilterByType DEFLATE image/flv
AddOutputFilterByType DEFLATE image/ico
AddOutputFilterByType DEFLATE imagen/swf
AddOutputFilterByType DEFLATE aplicación/rss+xml
AddOutputFilterByType DEFLATE aplicación/xhtml+xml
AddOutputFilterByType DEFLATE aplicación/xml
AddOutputFilterByType DEFLATE aplicación/x-javascript
AddOutputFilterByType DEFLATE aplicación/javascript
AddOutputFilterByType DEFLATE aplicación/json
AddOutputFilterByType DEFLATE video/3gpp
AddOutputFilterByType DEFLATE video/3gpp2
AddOutputFilterByType DEFLATE video/x-flv
AddOutputFilterByType DEFLATE video/jpm
AddOutputFilterByType DESINFLAR video/jpeg
AddOutputFilterByType DESINFLAR video/x-m4v
AddOutputFilterByType DESINFLAR video/mp4
AddOutputFilterByType DESINFLAR video/ogg
AddOutputFilterByType DEFLATE video/webm
AddOutputFilterByType DEFLATE video/quicktime
AddOutputFilterByType DESINFLAR audio/x-mpegurl
AddOutputFilterByType DESINFLAR audio/midi
AddOutputFilterByType DESINFLAR audio/mp3
AddOutputFilterByType DESINFLAR audio/mp4
AddOutputFilterByType DESINFLAR audio/mpeg
AddOutputFilterByType DESINFLAR audio/webm
AddOutputFilterByType DEFLATE audio/básico
AddOutputFilterByType DESINFLAR audio/x-wav
AddOutputFilterByType DESINFLAR audio/wav
BrowserMatch ^Mozilla/4 gzip-solo-texto/html
BrowserMatch ^Mozilla/4.0[678] sin gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
ifmodule mod_gzip.c debe estar entre corchetes “<>”
mod_gzip_on Sí
archivo mod_gzip_item_include \.js$
mod_gzip_item_incluir archivo \.css$
/ifmodule debe estar entre corchetes “<>”
/ifmodule debe estar entre corchetes “<>”

Si no incluye los elementos requeridos entre paréntesis, obtendrá un error. Su sitio simplemente dejará de funcionar y le dará un error de servidor interno 500. El texto “debe estar entre corchetes “<>”” también debe eliminarse del código. Después de eso, se debe guardar el archivo .htaccess.

También es una buena idea reiniciar el servidor para aplicar exactamente las nuevas reglas. Después de todas estas acciones, su sitio funcionará mucho más rápido. La velocidad de carga de la página aumentará significativamente.

Verifique la velocidad de carga del sitio web y la compresión Gzip

Después de haber habilitado la compresión del lado del servidor. ¡Puedes comprobar el éxito del trabajo realizado! Puede hacer esto con varias herramientas populares en línea. Echemos un vistazo a ellos:

Perspectivas de velocidad de página - la herramienta en línea principal y más popular para consultar el sitio. Tras los últimos cambios en 2018 por parte de Google. Proporciona una extensa lista de datos para un análisis detallado del sitio.

Obtén más información sobre PageSpeed ​​Insights.

Qué puede:

  1. Calificación general de la velocidad del sitio;
  2. Especifica el tiempo de carga del contenido;
  3. Índice de velocidad general y tiempo de interacción;
  4. Da recomendaciones para la optimización;
  5. Muestra información detallada sobre el rendimiento;
  6. Indica si la compresión Gzip está habilitada o no;
  7. Indica si el hashing está habilitado o no;
  8. Proporciona una gran cantidad de información para la corrección de errores.

PageSpeed lo ayudará a solucionar muchos problemas de velocidad del sitio web. Gracias a esta herramienta se han solucionado muchos errores de mi sitio.

Herramientas de Pingdom es también una de las herramientas populares de análisis de sitios web en línea. Brinda suficiente información detallada sobre una variedad de criterios de evaluación del sitio. Es fácil encontrar lo que está ralentizando la descarga.

¿Qué es la herramienta pingdom?

Que te dara:

  1. Evaluación del rendimiento general del sitio;
  2. El número de solicitudes a la base de datos del sitio;
  3. Velocidad de carga de la página;
  4. Tamaño del contenido por tipo de contenido;
  5. Respuestas del servidor 200/301/302/404/503 y otros;
  6. Consultas generales por dominios;
  7. Representación gráfica de la situación, etc.;

Da mucha información sobre la velocidad del sitio. Pero no da instrucciones detalladas como Google.

Complementos de compresión GZIP para WordPress

Por extraño que parezca, los propietarios de sitios en el CMS de WordPress no necesitan preocuparse mucho. La razón de esto es la variedad de complementos para habilitar la compresión en el sitio. Todo lo que necesita hacer es instalar el complemento que desee. Luego active y habilite la compresión en la configuración del complemento. Entonces él hará todo el trabajo por ti. Describiré un par de los más populares.

Velocidad de página Ninja es el complemento de mejor rendimiento para WordPress. Puede hacer que sus sitios web sean rápidos en computadoras de escritorio y dispositivos móviles solucionando los problemas encontrados por Google PageSpeed Insights con un solo clic. Le permite habilitar rápidamente la compresión en el sitio.

Aumenta tu puntuación de Google PageSpeed ​​en Wordpress.

Caché más rápido de WP es también uno de los complementos hash más populares. Tiene una gran cantidad de configuraciones agrupadas, una de las cuales incluye compresión.

WP Fastest Cache - Complemento para WordPress.

caché de cometas Yo mismo uso este complemento. Ya que en combinación con otros plugins da un resultado excelente. También una de sus configuraciones incluye compresión gzip.

Comet Cache crea un caché de cada página.

En general, todos los principales complementos de almacenamiento en caché para Wordpress le permiten habilitar la compresión GZIP en el sitio. Recomiendo complementos multifuncionales completos para la menor carga.

En conclusión, diré lo siguiente: asegúrese de activar la compresión. Esto tendrá un efecto muy bueno en el rendimiento y elevará el sitio en la búsqueda. Espero que este artículo te ayude con esto.

Gracias por leer Nicola Top

¿Qué tan útil es la publicación?

¡Haz clic en el emoticón para calificar!

Puntuación media 5 / 5. Número de valoraciones: 52

Aún no hay valoraciones. Califique primero.

También te podría gustar...

1 respuesta

  1. Илья dice:

    Inmediatamente copié y pegué el código, lo que provocó un error 500. Ahora entiendo lo que necesito leer con atención. Veo que también tienes protección anticopia. Y gracias al contenido es adecuado y funciona.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

dieciocho − quince =