Эффективные методы обслуживания сжатых статических ресурсов с использованием .htaccess

Когда дело доходит до оптимизации производительности веб-сайта, крайне важно использовать сжатые статические ресурсы. Сжатые ресурсы уменьшают размер файла, что приводит к ускорению загрузки и улучшению пользовательского опыта. В этой статье мы рассмотрим различные методы предоставления сжатых статических ресурсов с помощью файла.htaccess, а также соответствующие примеры кода.

Метод 1: сжатие Gzip
Сжатие Gzip — широко используемый метод сжатия ресурсов. Это уменьшает размер текстовых файлов, таких как CSS, JavaScript и HTML. Добавьте следующий код в файл.htaccess, чтобы включить сжатие Gzip:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML, and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
  # Exclude certain file types from compression
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
</IfModule>

Метод 2: сжатие Brotli
Brotli — это новый алгоритм сжатия, обеспечивающий более высокую степень сжатия, чем Gzip. Чтобы включить сжатие Brotli, добавьте в файл.htaccess следующий код:

<IfModule mod_brotli.c>
  # Compress HTML, CSS, JavaScript, Text, XML, and fonts
  AddOutputFilterByType BROTLI_COMPRESS application/javascript
  AddOutputFilterByType BROTLI_COMPRESS application/rss+xml
  AddOutputFilterByType BROTLI_COMPRESS application/vnd.ms-fontobject
  AddOutputFilterByType BROTLI_COMPRESS application/x-font
  AddOutputFilterByType BROTLI_COMPRESS application/x-font-opentype
  AddOutputFilterByType BROTLI_COMPRESS application/x-font-otf
  AddOutputFilterByType BROTLI_COMPRESS application/x-font-truetype
  AddOutputFilterByType BROTLI_COMPRESS application/x-font-ttf
  AddOutputFilterByType BROTLI_COMPRESS application/x-javascript
  AddOutputFilterByType BROTLI_COMPRESS application/xhtml+xml
  AddOutputFilterByType BROTLI_COMPRESS application/xml
  AddOutputFilterByType BROTLI_COMPRESS font/opentype
  AddOutputFilterByType BROTLI_COMPRESS font/otf
  AddOutputFilterByType BROTLI_COMPRESS font/ttf
  AddOutputFilterByType BROTLI_COMPRESS image/svg+xml
  AddOutputFilterByType BROTLI_COMPRESS image/x-icon
  AddOutputFilterByType BROTLI_COMPRESS text/css
  AddOutputFilterByType BROTLI_COMPRESS text/html
  AddOutputFilterByType BROTLI_COMPRESS text/javascript
  AddOutputFilterByType BROTLI_COMPRESS text/plain
  AddOutputFilterByType BROTLI_COMPRESS text/xml
  # Exclude certain file types from compression
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-brotli dont-vary
</IfModule>

Метод 3. Использование кэширования
Кэширование статических ресурсов может значительно повысить производительность за счет сокращения запросов к серверу. Используйте следующий код в файле.htaccess для использования кэширования:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType application/font-woff "access plus 1 year"
  ExpiresByType application/font-woff2 "access plus 1 year"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
  ExpiresByType application/x-font-opentype "access plus 1 year"
  ExpiresByType application/x-font-truetype "access plus 1 year"
  ExpiresByType application/x-font-ttf "access plus 1 year"
  ExpiresByType font/otf "access plus 1 year"
  ExpiresByType font/ttf "access plus 1 year"
  ExpiresByType font/woff "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType text/html "access plus 1 month"
  ExpiresByType application/xhtml+xml "access plus 1 month"
</IfModule>

Метод 4: HTTP/2 Server Push
HTTP/2 Server Push позволяет серверу заранее отправлять ресурсы клиенту до того, как они будут запрошены. Это может значительно уменьшить задержку. Используйте следующий код в файле.htaccess, чтобы включить HTTP/2 Server Push:

<IfModule mod_headers.c>
  <FilesMatch "\.(css|js|svg|gif|png|jpe?g|woff|woff2|ttf|eot)$">
    Header set Link "</path/to/your/asset.css>; rel=preload; as=style"
    Header set Link "</path/to/your/asset.js>; rel=preload; as=script"
    Header set Link "</path/to/your/asset.svg>; rel=preload; as=image"
    # Add more assets as needed
  </FilesMatch>
</IfModule>

Реализуя эти методы в файле.htaccess, вы сможете эффективно обслуживать сжатые статические ресурсы и повысить производительность своего веб-сайта. Сжатие Gzip и Brotli, использование кэширования и включение HTTP/2 Server Push — все это мощные методы оптимизации доставки ресурсов.