Google PageSpeed Insights — это инструмент Google, который помогает владельцам веб-сайтов оценивать производительность и оптимизацию своих веб-страниц. Он предоставляет предложения и рекомендации по улучшению скорости загрузки и удобства использования веб-сайта. Ниже приведены несколько методов вместе с примерами кода, которые помогут оптимизировать производительность вашего веб-сайта и добиться более высоких показателей в Google PageSpeed Insights:
-
Включить сжатие Gzip.
Сжатие Gzip уменьшает размер файлов, отправляемых с вашего сервера в браузер пользователя, что может значительно сократить время загрузки страницы. Вы можете включить сжатие Gzip в конфигурации вашего сервера. Вот пример для Apache:# Enable Gzip compression <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 # Remove browser bugs (only needed for old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule> -
Использовать кеширование браузера.
Установив соответствующие заголовки кеширования, вы можете указать браузеру пользователя хранить определенные ресурсы локально. Это уменьшает количество запросов к серверу и сокращает время загрузки страниц при последующих посещениях. Вот пример для Apache:# Leverage browser caching <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType text/html "access plus 0 seconds" </IfModule> -
Минимизация CSS и JavaScript.
Минимизация файлов CSS и JavaScript включает в себя удаление ненужных пробелов, комментариев и других несущественных символов. Это уменьшает размер файлов и повышает скорость загрузки. Вот пример использования инструмента минимизации, такого как UglifyJS для JavaScript:// Minify JavaScript using UglifyJS const UglifyJS = require("uglify-js"); const code = ` // Your JavaScript code here `; const options = { compress: true, mangle: true }; const minifiedCode = UglifyJS.minify(code, options).code; -
Оптимизация изображений.
Большие файлы изображений могут существенно повлиять на время загрузки страницы. Вы можете оптимизировать изображения, сжимая их и используя современные форматы изображений, такие как WebP. Вот пример использования библиотеки imagemin в Node.js: