Май 14, 2020 Запись была обновлена
(Онлайн чек-лист) Самостоятельная оптимизация скорости сайта — как увеличить скорость загрузки сайта
Оптимизация скорости сайта всегда является приоритетной задачей, так как между сайтами идет большая конкуренция и необходимо постоянно улучшать свой ресурс. Об оптимизации скорости сайта заботятся как владельцы сайтов (блоггеры), так и крупные компании, которые занимаются SEO продвижением, так как понимают что это один из базовых параметров.
На данный момент существует огромное количество сервисов для анализа скорости загрузки сайта и выявления проблемных мест, но несмотря на это, большинство сайтов все еще не оптимизированы надлежащим способом.
В данной статье и чек-листе я постараюсь не привязываться к конкретной CMS, а писать таким образом, чтобы решения подошли для любого сайта.
Хочу обратить внимание: если вы проверяете свой сайт только в сервисе Google PageSpeed Insights, то в процессе изучения чек-листа поймете, что большое количество параметров там скрыто и не показывается, несмотря на то что все равно влияет на скорость загрузки сайта.
Этап 1. Определите "рамки" оптимизации скорости сайта
Под понятием "Рамки оптимизации скорости сайта" я понимаю такой объем CSS, JS, медиафайлов и других файлов, которые загружаются на вашем сайте.
Определив "рамки", мы будем знать конечную, к которой нужно идти. А поможет нам найти данные "рамки оптимизации скорости сайта" сервис, созданный Джонатаном Филдингом — www.performancebudget.io.
Посмотрите небольшое видео по работе с данным сайтом, где я наглядно показал что нужно выбрать, чтобы определить "рамки оптимизации скорости сайта":
Этап 2. Узнаем реальную скорость сайта
Как я уже писал выше, Google PageSpeed Insights это хороший инструмент для проверки оптимизации скорости сайта, но все же он "дает" лишь поверхностные советы. Вы можете сперва проверить с помощью этого инструмента, а затем переходить к более подробной статистике, которую дают следующие сервисы:
Будь внимательны когда делаете тестирование с помощью данных сервисов, потому что время загрузки может отличаться из-за того, что сервер вашего сайта и сервер на котором идет тест находятся далеко друг от друга.
Сервис WebPagetest позволяет выбрать сервер тестирования и браузер. Данный сервис показывает в виде диаграмм каких ресурсов (CSS, JS) больше всего в процентном соотношении на вашем сайте. Что больше всего радует, так это подробная статистика по запросам в виде графиков. Также есть информация о том, к каким файлам применяется GZIP сжатие и становится сразу понятно все ли верно указали в настройках .htaccess.
А вот сервис GTmetrix позволяет увидеть график загрузки файлов, так еще к этому все показывает подробные советы по оптимизации каждого нюанса на сайте. И здесь все разбивается на более детальные моменты оптимизации.
Зная реальную информацию о своем сайте, сейчас вы можете сравнить данную цифру с той, где были показаны рамки оптимизации скорости сайта.
И только сейчас вы можете воспользоваться чек-листом, который находится ниже, в полной мере. В данном чек-листе я рассматриваю только те способы оптимизации, которые не потребуют от вас дополнительных вложений в плане денег, а необходимо лишь желание и немного усидчивости, чтобы пройтись и оптимизировать каждый пункт.
(Чек-лист) Самостоятельная оптимизация скорости сайта
1. Оптимизация изображений
- Используйте изображения именно того разрешения, которое необходимо на странице.
Часто встречаются ситуации, когда используются изображения, у которых разрешение большое (например, 800x600px), а на странице используется лишь миниатюра (например, 300x225px). Особенно часто встречается данная ошибка при создании галерей. Используйте только то разрешение изображения, которое необходимо в конкретной ситуации.
- Объедините все иконки (если SVG, то в SVG-спрайт) в одно изображение (спрайт).
Это уменьшит количество запросов к серверу. Сейчас существуют онлайн решения: css.spritegen.com, iconizr. Так и решения для сборщиков (для Gulp — gulp-svg-sprites, для Grunt — grunt-svg-sprite, для Webpack — Webpack SVG sprite loader).
- Оптимизируйте изображения: PNG, JPG, SVG.
Здесь есть как онлайн решения: TinyPNG, Kraken.io. Так и автоматизированные решения для сборщиков: Gulp — gulp-imagemin, gulp-pngquant; Grunt — grunt-contrib-imagemin; Webpack — imagemin-webpack-plugin.
- Deferring images without lazy loading or jQuery — https://varvy.com/pagespeed/defer-images.html
2. Уменьшите количество запросов
- Используйте SVG-спрайты и PNG-спрайты.
Об этом я писал в блоке "Оптимизация изображений", который находится выше.
- Объедините все CSS файлы в один.
Как я говорил раннее — это уменьшит количество запросов к серверу. Плагины для сборщиков (для Gulp — gulp-concat-css, для Grunt — grunt-concat-css, для Webpack — css-concat-loader).
- Объедините все JS файлы в один по возможности.
Плагины для сборщиков (для Gulp — gulp-concat-js, для Grunt — grunt-contrib-concat, для Webpack — webpack-uglify-js-plugin).
- Максимально уменьшите количество запросов к базе данных.
Все, что можно загружать без запросов к базе данных, загружайте без ее использования — статично. Так как на запросы и ответ уходит время, то будет логичным, если мы максимально уменьшим данный показатель.
3. Оптимизируем CSS и JS
- Сжимаем все CSS файлы.
Онлайн решения: CSS Compressor, CSS Minifier. Плагины для сборщиков: Gulp — gulp-clean-css; Grunt — grunt-contrib-cssmin; Webpack — clean-css-loader.
- Сжимаем все JS файлы.
Сервисы онлайн: JavaScript Compression Tool, JS Minifier. Плагины для сборщиков: Gulp — gulp-uglify; Grunt — grunt-contrib-compress; Webpack — плагин, который указан в прошлом пункте также сжимает JS.
- Загружайте все CSS и JS файлы в самом конце. Размещайте их перед закрывающим тегом <body>.
Необходимо между тегами <style> и </style> вставить самые важные CSS свойства. То есть именно те, которые отвечают за вывод первого экрана на сайте. Потому что эту часть сайта пользователь видит в самом начале. А затем догрузить оставшуюся часть CSS из файла, а уже после JS.
- Удалите из адресов JS и CSS файлов все строки, которые указывают версию скрипта и т.д.
Эти параметры указываются в адресе через знак ?v=1.0.1 (вопрос).
Вывод
Надеюсь вы уже поняли, что это была лишь часть онлайн чек-листа по самостоятельно оптимизации сайта и его скорости загрузки. Я решил разобрать все детали в оптимизации скорости загрузки. Если будут появляться дополнения к статье, я обязательно буду ее дополнять, а также готовить следующую часть чек-листа.
Если вы знаете интересное решение, которое позволяет ускорить загрузку страницы, пожалуйста, пишите об этом в комментариях, будем вместе делиться полезными материалами и вместе сделаем интернет еще быстрее и комфортнее! 😉
Успехов!
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Интересная статья, спасибо, взял некоторые моменты на заметку.
Если будет интересно, то тоже пару советов оставлю из личного опыта.
Например сейчас в google pagespeed очень важным является оптимизация изображений. Оптимизация вручную это хорошо, но только основных изображений, а вот если используешь CMS то при загрузке изображений она (cms) может не оптимизировать изображения, а когда их много, или ты импортируешь файлы, то нужно настраивать сервер, чтобы он оптимизировал автоматически все изображения.
Есть модуль для nginx от google pagespeed, который оптимизирует изображения и файлы.
Так же не была затронута тема gzip сжатия, тоже очень важный пункт.
В связке с gzip еще нужно использовать кэширование.
Вполне согласен с моментом, когда нужно ставить основные стили для загрузки первого экрана в тег <style>, pagespeed тоже очень положительно на это "смотрит".
Думаю эти моменты в дальнейшем будут описаны, но сами попросили в комментариях поделиться 🙂
Добрый день, Дмитрий!
Спасибо большое, за ваш комментарий. Данная тема безусловно требует продолжения 🙂 .
Интересная статья, спасибо. Не знал что можно удалить строки скрипта с версией, у меня как раз ругань гугла на эту проблему на 80%. Продолжайте, полезно.
Ускорение на 99.97%. Забавно. Люди мечтают на 10-20% увеличить скорость загрузки, а тут 99.97%. У кого получилось,отпишитесь)))
Очень тяжело сейчас такого добиться, но было такое дело что в одном из параметров (мобильный или компьютер я не помню) добивался 99. Все портит метрика, гугл аналитика и всевозможные коллбэкхантеры, для которых гугл просит включить кэширование, а без аналитики и порой без чата уже никуда.
Здравствуйте!
Скажите пожалуйста, а как получить Ваш курс лендинг за 60 минут? По ссылке — не получается…
Добрый вечер!
Вот видео из мини-курса "Лендинг за 60 минут":
Урок 1. Создание PSD макета
Урок 2. Верстка
Урок 3. Разные экраны
Благодарю!
У меня на блоге при уменьшения размера картинок ухудшается качество картинок,не знаю что и делать уже…..
У меня на блоге https://1informer.com при уменьшения размера картинок ухудшается качество картинок,не знаю что и делать уже…..
Юрий, спасибо за статью. Ранее пользовался только google pagespeed и работал над сайтом пока не получил нормальный показатель. Прочитал статью и прогнал сайт через gtmetrix. Полученный PageSpeed Score неприятно удивил. Придется еще работать и работать.
Спасибо!!! Много чего полезного познал для себя
Когда ещё будут новые статьи?
PageSpeed Insights сервиз не однозначный. Он может показать разные значения через различные промежутки времени. Да и самым важным параметром для этого сервиса является оптимизация изображений. Порой доходит до смешного, выставляю качества изображения на 1%, а он все равно пишет, что фото превышает лимит)
К стати есть хороший сервис по сжатию фоток optimizilla.com
Думаю, что лучше css не сжимать, потом в этой каше трудно разобраться если что
Для ускорения сайта, могу посоветовать w.tools. Помимо статики, кешируют и динамику в их CDN. Без дополнительных оптимизаций ускорился почти в 4 раза.
Хорошая статья, особенно для тех кто пользуется исключительно пейдж спид от гугла. В нем недостаточно параметров и они не всегда объективно показывают реальную скорость сайта. У меня был пример когда сайт находился в зеленой зоне (87/83 баллов), но при этом страшно тупил. Пользователь успевал уйти с сайта до то как загружались блоки , содержащие пользовательские магниты. Понятно что в этом случае конверсия была минимальна. После того как начали разбирать сайт по гметрикс — добились адекватных показателей загрузки.
Нашел интересные моменты. Спасибо. Буду пробовать.