В этой статье мы по пунктам опишем какие методы использовали для оптимизации загрузки страницы на клиенте на примере страницы https://webproject.group/seo
Не используем иконки
На странице размещено около 60 уникальных иконок. При стандартном подходе использования их через тег браузер сделает 60 запросов за каждой иконкой, а это много. Использование css спрайтов кажется неудобным и долгим в настраивании процессом.
Мы выбрали использование svg иконок в таком формате. Такое использование лучше по некоторым причинам:
- Быстро и удобно встраивать иконки на сайт. Требуется только разместить код, а обычные картинки необходимо предварительно скачать
- Быстрая загрузка и экономия трафика. SVG иконки показываются на странице моментально и не требуют от браузера отдельного запроса для их получения
- Легко изменить цвет иконки с помощью свойства fill: red;
Объединяем все скрипты и css в один файл
Чтобы максимально оптимизировать загрузку js и css, мы используем методы объединения всех файлов в один. Чтобы не вызывать каждый файл скрипта по отдельности, система объединяет содержание всех необходимых для страницы js скриптов в один файл и показывает его. Так же с файлами стилей.
Используем облачный сервер для хранения статики
Хранить статические файлы удобнее в облаке, чем в директории сайта. Тарифы не дорогие и места хватит под любые запросы.
Используем CDN
Если вы выбрали хранение статических файлов в облаке, то можете подключить опцию раздачи контента через CDN. Это ускорит загрузку статики для тех пользователей, которые находятся на большом расстоянии от вашего сервера.
Сжимаем картинки
Очень просто оптимизировать до 90% размера картинок через https://tinypng.com
Используем GZIP сжатие
Для web сервера apache
AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/opentype # For Older Browsers Which Can't Handle Compression BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Используем кеширование
Это файлы, которые находятся на основном сервере. Подробнее
ExpiresActive On ExpiresDefault "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType text/css "access plus 1 year"
Используем ленивую загрузку
Очень легко встроить lazyLoad в проект с помощью этого описания
Откладываем загрузку внешних или необязательных ресурсов
Современные браузеры не загружают контент из display: none. После загрузки основной страницы, можно показать скрытый контент и он будет загружен Подробнее об этом
$(function() {$('.banner').show()})
