Лого SiteHere.ru

(Онлайн чек-лист) Самостоятельная оптимизация скорости сайта — как увеличить скорость загрузки сайта

Самостоятельная оптимизация скорости сайта

Оптимизация скорости сайта всегда является приоритетной задачей, так как между сайтами идет большая конкуренция и необходимо постоянно улучшать свой ресурс. Об оптимизации скорости сайта заботятся как владельцы сайтов (блоггеры), так и крупные компании, которые занимаются SEO продвижением, так как понимают что это один из базовых параметров.

На данный момент существует огромное количество сервисов для анализа скорости загрузки сайта и выявления проблемных мест, но несмотря на это, большинство сайтов все еще не оптимизированы надлежащим способом.

В данной статье и чек-листе я постараюсь не привязываться к конкретной CMS, а писать таким образом, чтобы решения подошли для любого сайта.

Хочу обратить внимание: если вы проверяете свой сайт только в сервисе Google PageSpeed Insights, то в процессе изучения чек-листа поймете, что большое количество параметров там скрыто и не показывается, несмотря на то что все равно влияет на скорость загрузки сайта.

Этап 1. Определите "рамки" оптимизации скорости сайта

Под понятием "Рамки оптимизации скорости сайта" я понимаю такой объем CSS, JS, медиафайлов и других файлов, которые загружаются на вашем сайте.

Определив "рамки", мы будем знать конечную, к которой нужно идти. А поможет нам найти данные "рамки оптимизации скорости сайта" сервис, созданный Джонатаном Филдингом — www.performancebudget.io.

Посмотрите небольшое видео по работе с данным сайтом, где я наглядно показал что нужно выбрать, чтобы определить "рамки оптимизации скорости сайта":

Этап 2. Узнаем реальную скорость сайта

Как я уже писал выше, Google PageSpeed Insights это хороший инструмент для проверки оптимизации скорости сайта, но все же он "дает" лишь поверхностные советы. Вы можете сперва проверить с помощью этого инструмента, а затем переходить к более подробной статистике, которую дают следующие сервисы:

  • WebPagetest
  • GTmetrix

Будь внимательны когда делаете тестирование с помощью данных сервисов, потому что время загрузки может отличаться из-за того, что сервер вашего сайта и сервер на котором идет тест находятся далеко друг от друга.

Сервис WebPagetest позволяет выбрать сервер тестирования и браузер. Данный сервис показывает в виде диаграмм каких ресурсов (CSS, JS) больше всего в процентном соотношении на вашем сайте. Что больше всего радует, так это подробная статистика по запросам в виде графиков. Также есть информация о том, к каким файлам применяется GZIP сжатие и становится сразу понятно все ли верно указали в настройках .htaccess.

А вот сервис GTmetrix позволяет увидеть график загрузки файлов, так еще к этому все показывает подробные советы по оптимизации каждого нюанса на сайте. И здесь все разбивается на более детальные моменты оптимизации.

Зная реальную информацию о своем сайте, сейчас вы можете сравнить данную цифру с той, где были показаны рамки оптимизации скорости сайта.

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

(Чек-лист) Самостоятельная оптимизация скорости сайта

1. Оптимизация изображений

  1. Используйте изображения именно того разрешения, которое необходимо на странице.

    Часто встречаются ситуации, когда используются изображения, у которых разрешение большое (например, 800x600px), а на странице используется лишь миниатюра (например, 300x225px). Особенно часто встречается данная ошибка при создании галерей. Используйте только то разрешение изображения, которое необходимо в конкретной ситуации.

  2. Объедините все иконки (если SVG, то в SVG-спрайт) в одно изображение (спрайт).

    Это уменьшит количество запросов к серверу. Сейчас существуют онлайн решения: css.spritegen.com, iconizr. Так и решения для сборщиков (для Gulp — gulp-svg-sprites, для Grunt — grunt-svg-sprite, для Webpack — Webpack SVG sprite loader).

  3. Оптимизируйте изображения: PNG, JPG, SVG.

    Здесь есть как онлайн решения: TinyPNG, Kraken.io. Так и автоматизированные решения для сборщиков: Gulp — gulp-imagemin, gulp-pngquant; Grunt — grunt-contrib-imagemin; Webpack — imagemin-webpack-plugin.

  4. Deferring images without lazy loading or jQuery — https://varvy.com/pagespeed/defer-images.html

2. Уменьшите количество запросов

  1. Используйте SVG-спрайты и PNG-спрайты.

    Об этом я писал в блоке "Оптимизация изображений", который находится выше.

  2. Объедините все CSS файлы в один.

    Как я говорил раннее — это уменьшит количество запросов к серверу. Плагины для сборщиков (для Gulp — gulp-concat-css, для Grunt — grunt-concat-css, для Webpack — css-concat-loader).

  3. Объедините все JS файлы в один по возможности.

    Плагины для сборщиков (для Gulp — gulp-concat-js, для Grunt — grunt-contrib-concat, для Webpack — webpack-uglify-js-plugin).

  4. Максимально уменьшите количество запросов к базе данных.

    Все, что можно загружать без запросов к базе данных, загружайте без ее использования — статично. Так как на запросы и ответ уходит время, то будет логичным, если мы максимально уменьшим данный показатель.

3. Оптимизируем CSS и JS

  1. Сжимаем все CSS файлы.

    Онлайн решения: CSS Compressor, CSS Minifier. Плагины для сборщиков: Gulp — gulp-clean-css; Grunt — grunt-contrib-cssmin; Webpack — clean-css-loader.

  2. Сжимаем все JS файлы.

    Сервисы онлайн: JavaScript Compression Tool, JS Minifier. Плагины для сборщиков: Gulp — gulp-uglify; Grunt — grunt-contrib-compress; Webpack — плагин, который указан в прошлом пункте также сжимает JS.

  3. Загружайте все CSS и JS файлы в самом конце. Размещайте их перед закрывающим тегом <body>.

    Необходимо между тегами <style> и </style> вставить самые важные CSS свойства. То есть именно те, которые отвечают за вывод первого экрана на сайте. Потому что эту часть сайта пользователь видит в самом начале. А затем догрузить оставшуюся часть CSS из файла, а уже после JS.

  4. Удалите из адресов JS и CSS файлов все строки, которые указывают версию скрипта и т.д.

    Эти параметры указываются в адресе через знак ?v=1.0.1 (вопрос).

Вывод

Надеюсь вы уже поняли, что это была лишь часть онлайн чек-листа по самостоятельно оптимизации сайта и его скорости загрузки. Я решил разобрать все детали в оптимизации скорости загрузки. Если будут появляться дополнения к статье, я обязательно буду ее дополнять, а также готовить следующую часть чек-листа.

Если вы знаете интересное решение, которое позволяет ускорить загрузку страницы, пожалуйста, пишите об этом в комментариях, будем вместе делиться полезными материалами и вместе сделаем интернет еще быстрее и комфортнее! 😉

Успехов!

С Уважением, Юрий Немец

18 комментариев к записи
  • Дмитрий Ковалевский

    Интересная статья, спасибо, взял некоторые моменты на заметку.

    Если будет интересно, то тоже пару советов оставлю из личного опыта.

    Например сейчас в google pagespeed очень важным является оптимизация изображений. Оптимизация вручную это хорошо, но только основных изображений, а вот если используешь CMS то при загрузке изображений она (cms) может не оптимизировать изображения, а когда их много, или ты импортируешь файлы, то нужно настраивать сервер, чтобы он оптимизировал автоматически все изображения.

    Есть модуль для nginx от google pagespeed, который оптимизирует изображения и файлы.

    Так же не была затронута тема gzip сжатия, тоже очень важный пункт.

    В связке с gzip еще нужно использовать кэширование.

    Вполне согласен с моментом, когда нужно ставить основные стили для загрузки первого экрана в тег <style>, pagespeed тоже очень положительно на это "смотрит".

    Думаю эти моменты в дальнейшем будут описаны, но сами попросили в комментариях поделиться 🙂

     
    • Юрий Немец

      Добрый день, Дмитрий!

      Спасибо большое, за ваш комментарий. Данная тема безусловно требует продолжения 🙂 .

       
  • Jon Doe

    Интересная статья, спасибо. Не знал что можно удалить строки скрипта с версией, у меня как раз ругань гугла на эту проблему на 80%. Продолжайте, полезно.

     
  • Makedo

    Ускорение на 99.97%. Забавно. Люди мечтают на 10-20% увеличить скорость загрузки, а тут 99.97%. У кого получилось,отпишитесь)))

     
    • Дмитрий Ковалевский

      Очень тяжело сейчас такого добиться, но было такое дело что в одном из параметров (мобильный или компьютер я не помню) добивался 99. Все портит метрика, гугл аналитика и всевозможные коллбэкхантеры, для которых гугл просит включить кэширование, а без аналитики и порой без чата уже никуда.

       
  • AlexKn

    Здравствуйте!

    Скажите пожалуйста, а как получить Ваш курс лендинг за 60 минут? По ссылке — не получается…

     
  • Айк

    У меня на блоге  при уменьшения размера картинок ухудшается  качество картинок,не знаю что и делать уже…..

     
  • Айк

    У меня на блоге https://1informer.com  при уменьшения размера картинок ухудшается  качество картинок,не знаю что и делать уже…..

     
  • Михаил

    Юрий, спасибо за статью. Ранее пользовался только google pagespeed и работал над сайтом пока не получил нормальный показатель. Прочитал статью и прогнал сайт через  gtmetrix. Полученный PageSpeed Score неприятно удивил. Придется еще работать и работать.

     
  • Алексей

    Спасибо!!! Много чего полезного познал для себя laugh

     
  • Valeriu

    Когда ещё будут новые статьи?

     
  • Димыч

    PageSpeed Insights сервиз не однозначный. Он может показать разные значения через различные промежутки времени. Да и самым важным параметром для этого сервиса является оптимизация изображений. Порой доходит до смешного, выставляю качества изображения на 1%, а он все равно пишет, что фото превышает лимит)

     
  • Димыч

    К стати есть хороший сервис по сжатию фоток optimizilla.com

    Думаю, что лучше css не сжимать, потом в этой каше трудно разобраться если что

     
  • Михаил

    Для ускорения сайта, могу посоветовать w.tools. Помимо статики, кешируют и динамику в их CDN. Без дополнительных оптимизаций ускорился почти в 4 раза.

     
  • Мих

    Хорошая статья, особенно для тех кто пользуется исключительно пейдж спид от гугла. В нем недостаточно параметров и они не всегда объективно показывают реальную скорость сайта. У меня был пример когда сайт находился в зеленой зоне (87/83 баллов), но при этом страшно тупил. Пользователь успевал уйти с сайта до то как загружались блоки , содержащие пользовательские магниты. Понятно что в этом случае конверсия была минимальна. После того как начали разбирать сайт по гметрикс — добились адекватных показателей загрузки.

     
  • Rusfet

    Нашел интересные моменты. Спасибо. Буду пробовать.

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *