Как увеличить скорость загрузки сайта


Здравствуйте, ребята!

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

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

В общем, в содержании по пунктам распишу все способы, а далее уже читайте и применяйте все на практике.

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

Уже давно известно, что скорость загрузки ресурса — один из факторов ранжирования в поисковой выдаче. Если взять абсолютно 2 одинаковых страницы, но одна будет грузиться быстрей, то и в выдаче она будет иметь более высокие позиции. Но это не значит, что первая будет на 30 позиции, а вторая на 1й. Нет, просто сайт с более быстрой загрузкой будет иметь немного лучше позиции.

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

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


«>

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

Только, что я проверил скорость загрузки одной своей статьи. По результатам 5ти проверок получил средний результат в 0,82 секунды.

«>

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

Конечно, бывает сложно добиться маленького значения и это зависит от многих факторов:

  • Количество контента на странице;
  • Количество подгружаемых скриптов;
  • Размер графики на странице и на сайте в целом;
  • Количество плагинов.

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

Оптимизация графики

Не секрет, что самым весомым элементов каждого сайта является именно графика. Сюда входит, как графика на каждой странице, так и общая графика. Касаемо графики на каждой страницы, то это контентная графика — изображения, скриншоты, фотографии. Общая графика — это графика, которая входит в дизайн сайта. Все это мы можем оптимизировать.

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

Одна фотография, сделанная на зеркальный фотоаппарат среднего качества, будет весить несколько мегабайт. Если загрузить такую фотографию на сайт, то посетитель при заходе на страницу будет ее всю скачивать. Представьте, сколько времени будет длиться загрузка страницы, если будет размещено 10 высокообъемных изображений.

Данному моменту уделяйте время, когда публикуете контент. Когда-то я писал статью о том, как уменьшить размер изображения без потери качества. Материал будет вам очень кстати.

Относительно дизайна, то старайтесь использовать в нем меньше изображений. Можно сделать вполне вменяемый и органичный дизайн, использовав при этом CSS стили. Это даже к лучшему будет. Если вы посмотрите на очень популярные ресурсы, то заметите, что у них дизайн — это по сути белый фон с разделительными линиями. Это играет на руку очень сильно и убивает 2х зайцев:


  1. Уменьшает время загрузки;
  2. Повышает удобность потребления контента.

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

Кэширование

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

Чтобы сделать кэширование на сайте (для WordPress) нужно установить плагин Hyper Cache. Полную инструкцию читайте по данной ссылке. Все разжевал там.

Также можно добавить некоторые коды в файл .htaccess, которые также будут включать кеширование, а также gzip сжатие. Честно сказать, их действие на своем сайте я не заметил. Может потому, что мой блог уже был полностью оптимизирован. Да и не вижу в них особого смысла. И заморочка одна имеется, так как не сможем очищать кэш. Тогда не будет видно изменений на сайте. Поэтому, не буду давать эти коды, чтобы вы потом не ломали себе голову при возникновении проблем.

Я их не использую. Кэширования с помощью плагина Hyper Cache более, чем достаточно.

Оптимизация загрузки скриптов


Если ваш сайт довольно функциональный (различные социальные кнопки, слайдеры, счетчики посещаемости и т.д.), то на нем имеется много скриптов.

Скрипты — всегда лишняя и большая нагрузка на сайт. По возможности всегда избавляйтесь от них. Если же это невозможно, то можно сделать их загрузку в последнюю очередь, а также удалить их с самого кода шаблона темы оформления.

Чтобы подгрузить скрипты в самом конце загрузки страницы, их нужно разместить в самом низу кода страницы, то есть в подвале. На WordPress это реализовывается с помощью размещения в файле footer.php перед закрывающим тегом </body>.

Также можно разместить скрипты в отдельном файле, а не в файле footer.php. А затем уже подгрузить этот файл в конце файла подвала. Это наилучший способ, как загружать скрипты на сайте.

Покажу на практике, как это все делать. Начну с видео-урока.

Как правило, большинство скриптов размещается в файле header.php между тегами <head></head> и они размещаются между тегами <script></script>. В пример показываю один скрипт из своего файла шапки.

«>


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

Чтобы разместить этот скрипт в отдельном файле, нам нужно взять его содержимое (красная рамка) и разместить в новом файле, который я создаю с помощью редактора Notepad. Выглядеть содержимое нового файла будет следующим образом.

«>

Теперь сохраняем данный файл в формате .js и называем его удобным именем. Я назову «footer-scripts.js», чтобы четко понимать, что это файл скриптов, которые выводятся в футере сайта.

«>

Далее мы этот файл загружаем на хостинг в папку с шаблоном оформления. Должен лежать вместе со всеми файлами шаблона.

«>

Теперь можно подгрузить этот файл на сайт, чтобы скрипты работали. Для этого нужно разместить строчку кода, в которой прописан путь к этому файлу. Разместить код нужно в файле footer.php перед закрывающим тегом </body>/

Вот моя строка кода.


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

Путь к файлу в данной строке подходит к сайтам на WordPress. Если у вас сайт на другом движке или просто HTML станица, то путь придется изменить под себя.

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

«>

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


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

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

«>

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

Идем дальше.

Избавление от лишних запросов в коде шаблона

Это самый сложный способ в ускорении сайта, который стоит на каком-то движке, например на WordPress. Его суть в замене строчек php кода в файле шаблона на уже сгенерированный код, чтобы избавиться от лишней генерации запросов к базе данных.

Нам потребуется файл header.php и все, что находится внутри него между тегами <head></head>. Между этими тегами и хранятся php коды, которые генерируют запросы и выводят основную информацию. Всю суть легче будет понять с помощью видео-урока, который я подготовил ниже.


Теперь текстовый вариант.

Покажу все на примере строки, которая генерирует запрос на вывод кодировки сайта. Строка в файле выглядит следующим образом.

«>

Как видим, это php код. Если же посмотреть в исходный код (ctrl+u) любой страницы сайта, то увидим, что этого php кода уже нет, а будет HTML код с указанной кодировкой.

«>

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

«>


От одного запроса избавились. Таким же образом нужно заменить другие возможные строчки. Конечно получится не все сделать, так как не все в исходном коде выводится. Но нужно стремиться к максимальному количеству замен.

Также хочу обратить внимание, что имеется код на генерацию названия сайта. Заключается он, как правило, в теги <title></title>. Если вы планируете изменять название ресурса, то либо не заменяйте этот код или же не забудьте потом в коде файла изменить название, так как после замены название будет выводиться из готовой строки с названием. Генерация имени сайта не будет происходить, так как php кода не будет. Учтите этот момент.

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

Отключение ревизий

Снова замучаю вас видео-уроком.

Ревизии — это автоматическое сохранение копий записей, которые делаются при создании записей в определенные интервалы времени.

На самом деле, вещь полезная, но иногда создает очень много мусора и нагружает базу данных. Я бы не сильно рекомендовал отключать данный функционал, так как иногда спасает. Может внезапно пропасть свет и что тогда? А, если будут копии записи, то вы сможете спокойно восстановить прогресс. Не раз такое бывало, знаю по собственному опыту.


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

Как очистить БД я покажу далее, а сейчас все таки покажу, как отключить ревизии в WordPress.

В корне движка имеется папка WP-includes, в которой лежит файл default-constants.php. Необходимо открыть его, найти в нем следующее содержание.

На момент написания этой статьи все это находится, начиная с 277 строки. Весь этот код отвечает за сохранность наших записей. Состоит он из 3х частей, каждая из которых начинается на if.

«>

Первая часть отвечает за интервал для автоматического создания ревизий. По умолчанию значение стоит в 60 секунд, то есть каждую минуту будет создаваться одна копия записи. Представьте, что статью вы пишите не один час. Можно данное значение увеличить, например до 10-20 минут. Данная настройка работает только при включенных ревизиях.

Значение ставим в секундах.

Вторая часть отвечает за время хранения удаленных записей в корзине. Когда мы удаляем записи, то они попадают в корзину. По умолчанию, хранятся они там 30 дней, после чего происходит удаление. Если поставить значение 0, то записи в корзину попадать не будут, а сразу удаляются без возможности восстановления.

Третья часть отвечает за работу ревизий. По умолчанию они включены. Если хотите отключить, то значение true необходимо изменить на false или поставить 0.

Что делать с ревизиями, решать вам, но мое мнение — отключать не нужно. Рекомендую просто поставить значение интервала сохранения в пределах 15-20 минут, а затем периодически удалять все ревизии из базы данных.

Минимум плагинов

Чем больше плагинов на сайте, тем больше та же нагрузка на базу данных. Поэтому, стараемся сократить их количество к минимуму. Если у вас сайт на WordPress, то количество можно сократить до 4-5 плагинов, использовав только реально необходимые плагины. Кстати, по этой ссылке вы узнаете, что это за плагины.

Что касается основных и популярных функций, то большинство из них можно заменить кодами:

  • Форма обратной связи без плагинов
  • Карта сайта без плагинов
  • Редирект после первого комментария

Данный список постоянно пополняется. Так, что ждем вас еще.

Чистка базы данных

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

Все это нужно периодически чистить. Можно делать это с помощью плагинов, но я не сторонник таких методов. Предпочитаю делать все ручками. Тем более, что делается это не каждый день.

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

Вот сами запросы.

  • 1я строчка — удаляем все ревизии;
  • 2я строчка — очищаем корзину;
  • 3я строчка — оптимизируем таблицы;
  • 4я строчка — удаляем все спам комментарии;
  • 5я строчка — удаляем пингбэки;
  • 6я строчка — отключаем пингбэки;
  • 7я строчка — удаляем информацию о последних редактированиях постов и еще некоторые моменты.

Заходим в phpMyAdmin своего хостинга и выбираем свою базу данных, которую будем чистить. Нас интересует пункт SQL.

«>

После перехода в данный пункт мы должны вставить список запросов, который я дал выше и выполнить их.

«>

После выполнения запроса должно выдать результат очистки базы данных. Количество очищенной информации будет у всех разное. Все зависит от вашего сайта и количества мусора, которого вы насобирали. У меня очистило 102 строки.

«>

Удалились и ревизии, и корзина, и неиспользуемые данные. В общем, все пучком. Такое действие делайте хотя бы раз в месяц, если активно развиваете ресурс.


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

Надеюсь, что использовав все эти фишки, вы значительно ускорите свой сайт. Я не давал ничего нерабочего. Сам все проделал и получил замечательные результаты. Берите все на вооружение.

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

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

Ну все. До встречи в новых материалах. Пока!

С уважением, Константин Хмелев!

Как увеличить скорость загрузки сайта

kostyakhmelev.ru

Какой должно быть время загрузки?

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

И все-таки, на какие показатели стоит ориентироваться?

  • 1 секунда — отличный, но труднодостижимый результат.
  • 2–3 секунды — стандартное время отклика большинства успешных ресурсов.
  • 3–5 секунд — маленькая, но для некоторых проектов терпимая скорость;
  • 6–10 секунд — столь низкий показатель негативно влияет на продвижение;
  • от 11 секунд — плачевный результат, при котором надо срочно ускорять сайт.

Какой должно быть время загрузки

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

В определенных нишах вполне нормально, если страницы загружаются по 5–6 секунд. Так, широко известная компания OZON не может похвастаться быстродействием интернет-магазина, но это не мешает ей иметь высокую конверсию.

Время загрузки сайтов в разных отраслях

Будет полезно!

Читайте наш мега гайд о продвижении интернет-магазинов в любой тематике.

Лучше всего об оптимальном именно для вас показателе расскажет Google PageSpeed Insights. Постарайтесь получить хотя бы не менее 70–80 баллов — это средняя планка, равная 2–4 секундам. В первую очередь обратите внимание на следующие метрики:

  • time to first byte — время получения начальных сведений от сервера;
  • load time — скорость загрузки главных элементов;
  • page size — размер (общий вес) страницы;
  • requests — количество запросов к базе данных необходимых для формирования страницы.

Более детально мы рассмотрим сервис Google PageSpeed Insights чуть позже, а пока поговорим об особенностях формирования производительности сайтов.

От чего зависит скорость загрузки?

Прыть сайта можно условно разделить серверную и клиентскую часть (их впоследствии мы и будем оптимизировать).

Итак, полный цикл загрузки при первом посещении выглядит подобным образом:

  1. DNS-запрос по названию ресурса.
  2. Подключение к серверу по IP-адресу.
  3. Установка защищенного соединения при использовании HTTPS.
  4. Запрос HTML-страницы по url и ожидание ответа сервера.
  5. Загрузка HTML.
  6. Разбор файла на стороне браузера, создание очереди запросов.
  7. Загрузка и анализ CSS-стилей.
  8. Загрузка и запуск JS-кода.
  9. Начало отрисовки страницы, выполнение JavaScript (JS).
  10. Загрузка web-шрифтов.
  11. Загрузка картинок и других медиа.
  12. Окончание отрисовки, работа отложенного JS-кода.

Отдельные этапы иногда меняются местами или осуществляются параллельно, однако суть остается неизменной.

Пункты с первого по четвертый относятся к серверной оптимизации, а все остальные — к клиентской.

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

Этапы проверки скорости сайта

Учтите! Роботы Яндекса и Google не кэшируют файлы. Кэширование влияет на загрузку второй и последующих страниц, в то время как поисковые системы всегда загружают страницу как новую. А вот потенциальных клиентов сайта результат данной опции в виде быстрого открытия статьи или каталога приятно удивит, если только они не используют утилиты очистки.

На что влияет скорость загрузки сайта?

Индексация, ранжирование, конверсия — три заветных слова для каждого разработчика и вебмастера. И все эти понятия в той или иной степени зависят от такого фактора, как время загрузки проекта.

Индексация

Крайне важно сделать так, чтобы страницы попали в индекс как можно быстрее и в максимально полном объеме.

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

Совет здесь один: желаете избавиться от проблем с индексацией? Пора увеличить скорость загрузки сайта!

Ранжирование

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

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

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

Важно! Согласно исследованиям американской компании MOZ, четкая взаимосвязь между скоростью полной загрузки страницы и ее позицией в «Гугл» отсутствует. А вот быстрота получения первого байта (показатель Time To First Byte) 100% влияет на ранжирование: чем резвее ответ сервера, тем выше сайт в выдаче.

Конверсия

Давно доказано, что «торможение» интернет-площадки сокращает продажи и приводит к отказу от услуг. В таком случае неважно, насколько хороший у вас контент или заманчива реклама — пользователи просто не станут дожидаться загрузки страницы, покинут сайт.

Многочисленные опросы говорят о том, что 47% готовы ждать полную отрисовку не более двух секунд, задержка даже в одну лишнюю секунду чревата потерей лояльности на 16%. К тому же 88% участников исследования заявили: они вряд ли вновь воспользуются сайтом после неудачной попытки. Кстати, мобильные пользователи не менее требовательны к производительности ресурсов (85% из них хотят, чтобы страницы открывались так же быстро, как и на компьютере).

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

Лучшие инструменты для мониторинга скорости загрузки

Готовы изменить свой web-проект к лучшему? Прежде всего, надо проверить показатели при помощи специальных сервисов.

  • Google PageSpeed Insights

Простой и удобный анализатор для мгновенной оценки клиентской оптимизации. Перейдите по ссылке https://developers.google.com/speed/pagespeed/insights/, введите в поле адрес интересующего вас сайта и нажмите «Анализировать».

PageSpeed позволяет узнать скорость, а также уровень оптимизации для компьютеров и мобильных. Причем быстродействие сайта определяется двумя метриками: FCP и DCL.

Скорость загрузки сайта на мобильных и компьютерах

FCP (First Contentful Paint) — первая отрисовка контента. Низкий показатель указывает на вероятные проблемы с самим соединением либо размерами используемых ресурсов.

Что касается DCL (DOMContentLoaded), то это не менее значимый параметр, означающий полную загрузку HTML и построение DOM-дерева.

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

Рекомендации по улучшению скорости загрузки сайта

  • Pingdom

Представленный сервис может помочь в расчете среднего времени загрузки и количества обращений к серверу. Кроме того, он в деталях отображает важную информацию о быстродействии изображений, стилей, JavaScript, скриптов и других элементов страницы — вы сразу обнаружите проблемные участки, тормозящие ваш сайт, получите советы по их улучшению.

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

Как увеличить скорость загрузки сайта

  • Отчет Google Аналитики

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

В результате замера вы получите общую сводку по средней скорости ответа сервера, поиска домена, переадресации и загрузки страницы. Отдельная колонка предназначена для данных о производительности сайта с учетом браузера и страны.
Также Google Аналитика предоставляет информацию о пользовательской скорости загрузки, резвости отдельных страниц по сравнению с общим быстродействием проекта.

Как и при использовании большинства других сервисов, здесь вы получите ценные советы и по изменению онлайн-площадки, чтобы она работала должным образом.
Вы сможете лично оценить все преимущества веб-аналитики, пройдя авторизацию, открыв необходимое представление. После этого вам нужно перейти в раздел «Отчеты», выбрать «Поведение», а затем «Скорость загрузки сайта».

Скриншот отчета google analytics

  • GTmetrix

Тестирует производительность ресурса, предоставляя много полезной информации. Благодаря сохранению истории этот сервис дает возможность сравнить, как ухудшилась или улучшилась скорость после внесения правок. GTmetrix сообщает об ошибках, подгружая и сортируя по приоритету рекомендации от Google и Yahoo.

Пользоваться им просто: надо перейти на https://gtmetrix.com/ и ввести в поле адрес сайта, а затем нажать на кнопку Analyze.

Скриншот интерфеса GTmetrix

  • PR-CY

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

PR-CY пользуется популярностью среди вебмастеров, благодаря продуманному интерфейсу и точным сведениям.

Скриншот интерфейса PR-CY

А знаете ли вы? Результаты исследований Strangeloop Networks доказывают, что за последние несколько лет время загрузки web-проектов возросло на 21%. Если раньше статьи чаще всего дополнялись картинками низкого качества, то сейчас ресурсы наполнены тяжелыми элементами (первоклассными изображениями, галереями, видео, анимацией и внешними приложениями). Все это улучшает визуальное впечатление, однако замедляет работу сайта. Здесь, как и во многих других вопросах SEO, важно найти золотую середину.

Как ускорить загрузку и сохранить симпатии пользователей?

Вам, наверное, интересно, какие имеются подручные средства для оптимизации ресурса? Потратив всего 5 минут своего времени, вы узнаете все эффективные приемы и сможете применить их на практике.

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

Серверная часть

Такая оптимизация является очевидной и понятной: она легко тестируется и координируется системным администратором. К тому же медленный ответ сервера создает трудности всем пользователям, независимо от типа их устройства и скорости подключения.

Улучшение хостинга

Нехватка ресурсов хостинга — проблема № 1 для небольших блогов. Иногда рентабельнее увеличить скорость дисковой системы и CPU, перейдя на тариф с расширенными возможностями. Если же цена получения дополнительных ресурсов значительно выше стоимости работ по улучшению производительности, стоит воспользоваться следующими методами.

Настройка сервера Nginx

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

  • Удаление неиспользуемых nginx-модулей

Это не только ускорит работу, но и уменьшит уязвимость сервера.

Вам нужно выполнить сборку с такими командами:

В итоге вы получите Nginx с уже отключенными модулями Autoindex и SSI, которые в большинстве случаев бесполезны. Запустив скрипт configure с флагом -help, вы узнаете, какие еще модули можно безболезненно исключить из веб-сервера.

  • Работа с секцией Server

Для ускорения сайта рекомендуется включить в секцию Server следующие строки:

  • Сжатие данных

Обязательная процедура для тех, кто желает повысить скорость загрузки сайта. Так вы сможете уменьшить размер пересылаемого трафика.
Откройте файл конфигурации, который находится по адресу /etc/nginx/nginx.conf и добавьте в секцию http {} следующую информацию:

  • Кэширование статических файлов

В том же файле необходимо найти конструкцию Server и дописать туда:

— (expires 7d — количество дней хранения кэша на ПК пользователя).

Примечание! Воспользоваться этими советами и ощутимо снизить вес страниц смогут только владельцы выделенных и виртуальных серверов, потому что на виртуальном хостинге доступ к редактированию конфигурации Nginx отсутствует. Но в таком случае вы можете обратиться в техническую поддержку провайдера и попросить специалистов внести необходимые вам корректировки.

Настройки сервера Apache

Самая быстрая возможность оптимизировать веб-сервер — воспользоваться модулем mod-pagespeed от Google. После его установки, соединитесь через SSH с сервером и введите такие команды:

Зайдите в директорию /var/cache/mod_pagespeed и удостоверьтесь, что модуль работает корректно. В ней должны появиться папки сайта с кэшированием запросов к Apache — все настроено автоматически.

Что делает данный инструмент? Он удаляет лишние пробелы и атрибуты HTML-документов, объединяет несколько JS, CSS и HTML файлов в один, конвертирует картинки под установленный в тегах <img /> размер, а также способствует оптимизации другими способами.

Gzip — сжатие на стороне сервера

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

Работа осуществляется на стороне сервера без задействования клиентского оборудования. Единственный минус подобного решения — рост нагрузки на сервер, однако он незначительный.

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

Откройте файл .htacess и добавьте в него код:

Или прописать в нем такие строки:

Внимание! Gzip сжимает файлы от одного до девяти единиц. Оптимальным параметром считается пятерка.

CDN для загрузки популярных JavaScript библиотек

Content Delivery Network (CDN) представляет собой своеобразную сеть доставки содержимого — большое количество серверов, расположенных по всему миру. Веб-сервер, предназначенный для отдачи контента клиенту на максимально возможной скорости, выбирается на основе определенных показателей. Чаще всего он отличается наименьшим временем отклика. К тому же браузер кэширует JavaScript, позволяя не загружать библиотеку повторно.

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

На Content Delivery Network часто переносят все файлы JavaScript, изображения и CSS, оставляя на основном сервере лишь файл HTML.

Перенос файлов на Content Delivery Network

Настройка кэширования на стороне сервера

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

Создайте на сервере папку с любым допустимым названием (например, cache) и напишите в начале PHP-страницы следующее:

При наличии файла index_xx_yy.cache просто считайте его содержимое и выведите на экран (здесь xx — это переменная $_GET["page"], а yy — значение переменной $_GET["id"]). Если вышеупомянутого файла нет, включите в папке кэш буфер и запишите туда все процессы, запущенные на странице.

В конце после тэга не забудьте добавить:

Запишите в $buffer его содержимое, затем остановите буферизацию и очистите контент. Следующее действие предполагает открытие файла index_xx_yy.cache (если его на сервере нет, то надо создать) и запись в файл $fp значения $buffer.

Оптимизация базы данных

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

Это можно сделать вручную через phpMyAdmin хостинга (пункт SQL). Не хотите попусту тратить время? Воспользуйтесь специальными плагинами или настройте автоматическую оптимизацию. Сделать это несложно.

Установите на ПК программу Notepad++ и подключитесь через FTP к хостингу. Найдите в папке public_html файл wp-config.php и перетащите на рабочий стол. После этого откройте его с помощью Notepad++ и найдите строчку с названием базы данных. Под ней надо добавить следующее:

Первая команда отключит ревизии постов, а вторая станет через день очищать корзину.

Обновите файл и перетащите его мышкой обратно на хостинг, заменив старую версию новой.

Оптимизация TCP, TLS, HTTP/2

В этом разделе объединены тонкие сетевые настройки, способствующие ускорению сервера. Они не меняют показатели разительно, зато их оптимизация не требует финансовых вложений.

TCP — популярный сетевой протокол, функционирующий на основе «окна перезагрузки». Чем выше габариты окна (количества пакетов для передачи), тем больше пропускная способность. Ваша задача — правильно рассчитать и настроить размер буфера TCP. Большинство разработчиков используют для этого параметры задержки и полосы пропускания, умноженные на два. Чтобы изменить размер буфера, используйте вызов Setsockopt в С или методы setReceiveBufferSize и setSendBufferSize в Java. Такая корректировка ориентирована на ускорение масштабных порталов и серверов. Главное — регулярно обновлять систему.

Что касается тюнинга TLS, он сократит время ответа и повысит уровень безопасности соединений. Найдите конфигурационный файл на Nginx и проведите следующие изменения:

  • включите разделяемый кэш сессий и отключите встроенный аналог;
  • уравняйте количество рабочих операций с числом процессоров;
  • разрешите keep-alive соединения;
  • увеличьте время жизни сессии.

Теперь немного о HTTP/2. В этот достаточно молодой протокол заложены механизмы быстродействия, рассчитанные на уменьшение влияния сетевых задержек. Чтобы увеличить скорость загрузки сайта, SEO-профи рекомендуют отказаться от встраивания файлов в HTML-код, доменного шардинга, спрайтов и конкатенации файлов.

Количество HTTP-запросов

Время открытия страницы на 80% зависит от загрузки Flash, CSS, скриптов и картинок. Уменьшение числа упомянутых элементов приводит к ускорению веб-проекта. Но как сократить количество запросов без изменения внешнего вида?
Для этого достаточно применить встроенные в страницу Inline-изображения и CSS-спрайты — комбинированные картинки, которые состоят из небольших фрагментов.
Если вы используете на странице несколько JS и CSS-элементов, их можно объединить в один файл — это действенный и простой прием.

Уменьшение редиректов

Создание перенаправлений — стандартная практика продвижения, когда надо сообщить серверу, что адрес страницы был изменен. 301-редиректы помогают избежать 404-ошибок, но при этом они замедляют работу сайта. Особенно явной становится проблема для пользователей мобильных устройств, которым приходится совершать дополнительные переходы. Google советует по возможности уменьшить количество перенаправлений.

Чтобы быстро найти все редиректы на своем ресурсе, воспользуйтесь специальной программой. После установки на компьютер утилита Screaming Frog за считанные минуты определит проблемные места.

Интерфейс утилиты Screaming Frog

Клиентская часть

Этот сегмент менее удобен в управлении, так как направлен на процессы, которые осуществляются в браузере пользователя. Тем не менее их оптимизация порадует вас хорошим результатом, позволив заметно повысить скорость загрузки сайта.

Настройка асинхронной загрузки

Современные страницы перегружены тяжелыми файлами JavaScript, которые замедляют дальнейшее отображение страницы. Соответственно, в местах с этими строками загрузка тормозится, ведь все HTML-элементы открываются по очереди. Однако с выходом HTML5 вебмастерам стала доступна асинхронная загрузка, во время которой скрипты запускаются в последнюю очередь.

Ускорить сайт можно при помощи специального скрипта Google ExtSrcJs. Надо лишь заменить:

на:

и подключить файл скрипта extsrc.js.

Удаление лишних плагинов

Большинство генераторов и визуальных редакторов легко создадут необходимый вам код, правда, он будет «мусорным» – лишние строчки кода приведут не только к торможению ресурса, но и к возникновению ошибок, мешающих загрузке. Это надо исправлять. Кроме того, опытные специалисты рекомендуют всегда удалять ненужные расширения, плагины и темы.

Оптимизация размера страницы

Уменьшив размер страницы и количество «тяжелого» контента, вы ускорите работу сайта и сэкономите деньги на оплате услуг хостинга, если платите за трафик.
Для оптимизации попросите провайдера включить опцию сжатия HTTP. Это как минимум вдвое уменьшит размер графики и других элементов страницы.

Физическое сжатие графики и смена расширения файлов

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

  • Удаляйте ненужные картинки. Где предусмотрена такая возможность, используйте текст вместо тяжелой графики.
  • Отдавайте предпочтение формату JPEG, который сжимается без потери качества. Даже снизив качество на 25-40%, вы получите на выходе достойную иллюстрацию, практически неотличимую от исходника. При этом вес картинки будет минимален.
  • Не злоупотребляйте PNG для создания эффекта прозрачности. Для сжатия этого и любого другого формата подойдет не только Photoshop, но и OptiPNG, Compresspng и PNGout.
  • Очищайте элементы от цифрового мусора (рабочих версий, ненужных палитр, комментариев дизайнера). Сделать это можно при помощи сервиса Smush.it.

Скриншот сжатия графики и смены расширения файлов

Для сжатия графических файлов онлайн используйте tinyjpg.

Отказ от масштабирования картинок

Не стоит менять размер изображений с помощью CSS, width и height. Лучше предварительно внести корректировки, воспользовавшись графическим редактором.
Вместо одной масштабируемой иллюстрации, которая занимает много места и замедляет загрузку, стоит использовать несколько картинок, адаптированных под разные устройства.

Чтобы браузер каждый раз грузил нужный вариант, установите плагин Imager (для WordPress). Это работает так:

Оптимизация JavaScript и CSS

Специальные методы упрощения кода уменьшают размеры элементов, сокращая названия функций и удаляя мусор. Можно дополнительно улучшить CSS и JavaScript за счет изменения названий переменных (в случае обновления HTML и правильной работы селекторов).

Упростить код несложно — имеется много сервисов: JSCompress или Refresh-SF. Подойдет для этого и Google PageSpeed Insights. После выполнения на нем анализа страницы, нажмите на «Сократить HTML», а затем на «Посмотреть содержание».

Обратите внимание! Лучше всего размещать JS-файлы в конце страницы, а CSS — в начале. Так ваш ресурс произведет на пользователей положительное впечатление как по внешнему виду, так и по скорости.

Оптимизация веб-шрифтов

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

Начните пользоваться новыми форматами WOFF и WOFF2, при этом исключите все наборы символов, кроме кириллицы и латиницы.

Улучшить ситуацию можно при помощи спецификации link rel=«preload» и CSS-свойства font-display. Первый показатель мгновенно указывает браузеру о необходимости загрузки файла шрифта, второй позволяет управлять поведением браузера в случае задержки.

Настройка кэширования на стороне браузера

Использование кэша предполагает то, что файлы сайта будут загружаться с сервера лишь один раз. В дальнейшем они сохраняются на компьютер и «подтягиваются» при загрузке с ПК пользователя.

Для подключения кэша браузера необходимо создать файл .htaccess и, воспользовавшись модулем expires, прописать в нем выбранные директивы:

  • Expires — отвечает за актуальность кэша (можно установить срок от недели до года).
  • Cache-Control: max-age — аналог предыдущего заголовка, выполняющий те же функции.
  • Last-Modified и ETag — устанавливают в кэше уникальный id для каждого url. В Nginx для статичных файлов они включены по умолчанию.

Настройка кэширования на стороне браузер

Как увеличить скорость загрузки сайта на определенном движке?

  • WordPress

Для оптимизации CSS и JavaScript в таком случае стоит установить плагин Autoptimize. Можно также загружать откорректированные элементы страницы из PageSpeed Tool.
Учтите, что основой «легкости» ресурса является правильно выбранная тема. Если нынешняя версия тормозит ваш проект, есть смысл ее поменять.

  • Opencart

Следует уменьшить размеры статичного контента — для Nix-систем подойдет Google ModPagespeed. Также вы можете воспользоваться Gzip, сжатием изображений.

  • Joomla

Оптимизируйте иллюстрации под Web, тогда они будут обладать меньшим весом. Никогда не загружайте картинки с высоким разрешением для их последующего уменьшения через CSS и HTML. Большое количество «неблагополучных» элементов приведут к серьезному замедлению работы сайта.

  • 1C Битрикс

В административной панели этой CMS существует немало полезных настроек. Например, «Автокэширование» и «Оптимизация CSS», где можно выбрать подходящие вам функции: объединение файлов, создание сжатых копий и т. п.

Заключение

Теперь вы знаете, насколько важно быстродействие ресурса для его конверсии, индексации и ранжирования. Надеемся, статья ответила на все ваши вопросы и помогла оптимизировать сайт с минимальными усилиями!

livepage.pro

Вводные факты

В первую очередь скорость загрузки влияет на поведенческие факторы: глубину просмотра и количество отказов. У быстрых сайтов выше показатель конверсии. Также от скорости косвенно зависит успех поискового продвижения: при прочих равных Google учитывает время загрузки страницы.

  • Инженеры Google выяснили, что пользователь замечает даже пустяковую задержку загрузки — 0,4 секунды;
  • Пользователь с большой вероятностью покинет страницу, если та загружается 3+ секунд;
  • Мобильные пользователи готовы ждать немного дольше — 6-10 секунд;
  • 79% пользователей интернет-магазинов не сделают повторную покупку, если в первый раз сайт загружался долго.

Эксперимент Financial Times

Представители деловой газеты провели эксперимент с новым сайтом издания.

Участников поделили на две группы. Первая, контрольная, просматривала страницы с обычной скоростью загрузки, а вторая — с задержкой в пять секунд. Во втором этапе приняли участие уже четыре группы: контрольная и ещё три, участникам которых «досталась» задержка в одну, две и три секунды. Глубину просмотра в течение сессии взяли за коэффициент конверсии (рассматривали пользователей, которые посетили хотя бы две страницы) и посчитали разницу между конвертированными пользователями в каждой из групп.

При посещении двух страниц разница между графиками не бросается в глаза, но при посещении трёх и более страниц заметно постепенное снижение по всем вариантам задержки загрузки — и чем больше глубина просмотра, тем значительнее разница. При самых низких скоростях, с задержкой в три и пять секунд, коэффициент конверсии оказался на 7,5% и 11% ниже по сравнению с контрольной группой.

Чем больше задержка загрузки, тем меньше просматривается страниц за сессию. Результат исследования говорит о том, насколько скорость загрузки важна для вовлечённости пользователей и, в конечном счёте, конверсии.

Как увеличить скорость загрузки сайта

Скорость загрузки можно измерить с помощью этих сервисов:

  • Проверка скорости сайта PR-CY,
  • GTmetrix,
  • PageSpeed.

Как увеличить скорость загрузки сайта

1. Уменьшите объем загружаемых страниц

Используйте сжатие gzip, это сократит время передачи файлов браузеру. Объём передаваемых данных уменьшится в 4-5 раз, а скорость загрузки — увеличится.

Nginx

Для включения сжатия gzip в Nginx, измените конфигурацию сервера и добавьте эти строки:

server {
….
gzip on;
gzip_disable «msie6»;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
}

Apache

Сначала убедитесь, что подключен модуль mod_deflate. После этого нужно добавьте в файл .htaccess следующие строки:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Уровень сжатия

Gzip поддерживает уровень сжатия от 1 до 9. В Nginx его можно регулировать таким образом:

gzip_comp_level 5;

Оптимальный уровень сжатия — 5.

2. Уменьшите объём графики

Удалите ненужные изображения. Там, где это возможно, используйте текст вместо заведомо более тяжёлой графики.

Формат JPG лучше всего подходит для фотографий. PNG предпочтительнее для остальных элементов сайта — иконок, иллюстраций и пр., при условии, что изображения правильно сжаты. Учитывайте, что сайт будет просматриваться на разных устройствах и в разных браузерах.

Вы можете использовать одно масштабируемое изображение, но оно будет занимать много места и тормозить загрузку страницы. Лучше использовать несколько изображений, адаптированных под разные устройства, чтобы браузер загрузил нужное — это можно сделать при помощи плагина Imager. Он заменяет плейсхолдеры прозрачными изображениями, подтягивает к каждому атрибут src и назначает нужный размер, после чего вам остаётся только загрузить несколько вариантов изображения разных размеров.

Как это работает:

<div style=»width: 240px»>
<div class=»delayed-image-load» data-src=»httр://placehold.it/{width}» data-alt=»alternative text»> </div>
</div>
<script>
new Imager({ availableWidths: [200, 260, 320, 600] });
</script>

Сжать изображения можно при помощи  функции сохранения веб-страниц в графических редакторах или сервисов PunyPNG, TinyPNG и других.

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

Этот пункт перекликается с предыдущим. Один из способов уменьшить количество запросов браузера — удалить со страницы часть элементов.

Используйте CSS-спрайты — графические файлы, содержащие сразу несколько изображений. Это оптимальный способ, если на сайте много маленьких изображений и иконок. Объедините несколько CSS- и JS-файлов в один, это сократит количество HTTP-запросов.

Чтобы посмотреть количество запросов браузера в Chrome, войдите в «Инструменты разработчика» (Настройки → Дополнительные инструменты) и перейдите во вкладку Network.

Как увеличить скорость загрузки сайта

4. Включите кэширование данных

Настройте сервер так, чтобы браузер пользователя кэшировал данные — в этом случае при первом посещении сайта некоторые элементы страниц (изображения, CSS- и JS-файлы) сохранятся автоматически. В следующий раз браузер не потратит время на их загрузку.

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

Как включить кэширование?

Используйте модуль headers веб-сервера Apache, который контролирует и изменяет заголовки HTTP-запросов и HTTP-ответов. Браузер загружает с сервера в локальный кэш данные, которые редко изменяются, и при посещении сайта загружает их уже из кэша. Также можно кэшировать файлы определённых типов на заданное время, по истечении которого они будут загружены с сервера заново.

Это можно сделать так:

<FilesMatch «.(gif|jpeg|png|swf|js|css|pdf|ico)$»>
Header set Cache-Control «max-age=1234000»
</FilesMatch>

Укажите нужные расширения файлов в конструкции FilesMatch, где для них устанавливается заголовок Cache-Control и переменная max-age, с помощью которой указывается время хранения файлов в секундах. Те файлы, которые не нужно кэшировать, просто не включайте в список.

Также можно запретить кэширование файлов. Добавьте приведённый ниже код в .htachess, предварительно указав, какие типы файлов кэшировать не нужно:

<FilesMatch «.(pl|php|cgi|fcgi|scgi)$»>
Header unset Cache-Control
</FilesMatch>

Вы также можете управлять кэшированием с помощью модуля expires. Он контролирует установку HTTP-заголовков для кэширования со стороны браузера. Укажите период хранения данных в зависимости от времени, от последнего изменения файла или от времени доступа клиента.

Например, так:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault «access plus 2 month»

ExpiresByType image/png «access plus 4 months»
ExpiresByType image/swf «access plus 4 months»
</IfModule>

Или так:

ExpiresByType text/html «access plus 2 month 14 days 7 hours»
ExpiresByType image/gif «modification plus 8 hours 3 minutes»

www.cossa.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.