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

Оптимизация скорости сайта всегда является приоритетной задачей, так как между сайтами идет большая конкуренция и необходимо постоянно улучшать свой ресурс. Об оптимизации скорости сайта заботятся как владельцы сайтов (блоггеры), так и крупные компании, которые занимаются 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 (вопрос).

Вывод

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

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

Успехов!

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

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