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

Escucha este artículo

¡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 optimización técnica del sitio. Permitiendo manipulaciones bastante simples, acelera significativamente la carga del sitio. Un sitio rápido es un éxito significativo en la promoción de motores de búsqueda.

El contenido del artículo:

• ¿Cuál es el propósito de habilitar la compresión de archivos Gzip en .htaccess?
• Compresión Gzip: ¿para qué archivos es aceptable? ¿En qué servidores funciona?
• Cómo habilitar la compresión Gzip en un archivo .htaccess
• Verifique la velocidad de carga del sitio web y la compresión Gzip
• Complementos de compresión GZIP para WordPress

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

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 precisamente 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 la compresión AddOutputFilterByType DEFLATE text/sin formato AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilter ByType DEFLATE application/rss+xml AddOutputFilter Por tipo de aplicación DEFLATE/ javascript AddOutputFilterByType DEFLATE aplicación/x-javascript

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

RewriteEngine On AddEncoding gzip .gz RewriteCond %{HTTP:Aceptar codificación} gzip RewriteCond %{REQUEST_FILENAME}.gz -f RewriteRule ^(.*)$ $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:

$archivooriginal = __DIR__ . '/jquery-1.11.0.min.js'; $gzipFile = __DIR__ . '/jquery-1.11.0.min.js.gz'; 1TP30OriginalData = file_get_contents(1TP30OriginalFile); $gzipData = gzencode($originalData, 9); archivo_put_contents($gzipFile, $gzipData); var_dump(tamaño de archivo($originalFile)); // int(96380) var_dump(tamaño del 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 debería 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 AddOutputFilterByType DEFLATE texto/sin formato AddOutputFilterByType DEFLATE texto/texto AddOutputFilterByType DEFLATE texto/html AddOutputFilterByType DEFLATE texto/sin formato AddOutputFilterByType DEFLATE texto/xml AddOutputFilterByType DEFLATE texto/css AddOutputFilterByType DEFLATE image/gif AddOutputFil terByType DEFLATE image/jpeg AddOutputFilterByType DEFLATE image/jpg AddOutputFilterByType DEFLATE image/ png AddOutputFilterByType DEFLATE image/gif AddOutputFilterByType DEFLATE image/flv AddOutputFilterByType DEFLATE image/ico AddOutputFilterByType DEFLATE image/swf AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/x-ja Aplicación vascript AddOutputFilterByType DEFLATE / javascript AddOutputFilterByType DEFLATE aplicación/json AddOutputFilterByType DEFLATE video/3gpp AddOutputFilterByType DEFLATE video/3gpp2 AddOutputFilterByType DEFLATE video/x-flv AddOutputFilterByType DEFLATE video/jpm AddOutputFilterByType DEFLATE video/jpeg AddOutputFilterByType DE FLATE video/x-m4v AddOutputFilterByType DEFLATE video /mp4 AddOutputFilterByType DESINFLAR video /ogg AddOutputFilterByType DEFLATE video/webm AddOutputFilterByType DEFLATE video/quicktime AddOutputFilterByType DEFLATE audio/x-mpegurl AddOutputFilterByType DEFLATE audio/midi AddOutputFilterByType DEFLATE audio/mp3 AddOutputFilterByType DEFLATE audio/mp4 AddOutputFilterByType DEFLATE audio/ mpeg AddOutputFilterByType DEFLATE audio/webm Add OutputFilterByType DEFLATE audio/básico AddOutputFilterByType DEFLATE audio /x-wav AddOutputFilterByType DEFLATE audio/wav BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html mod_gzip_on Sí mod_gzip_item_include archivo \.js$ mod_gzip_item_include archivo \.css$

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.

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.

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.

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.

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.

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.

Leyendo este artículo:

• Optimización del código HTML del sitio web: limpieza, compresión, corrección de errores
• Mapa del sitio XML: cómo agregar un mapa del sitio a Google y Yandex Webmaster

Gracias por leer: AYUDANTE DE SEO | NICOLA.TOP