ТОП-7 эффективных способов ускорения загрузки сайта

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

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

Поговорим мы о том, как ускорить загрузку вашего сайта, использовав при этом 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 строки.

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


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

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

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

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

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

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

40 лет Победы51937Украина, Днепропетровская обл., г. Днепродзержинск,+38 093 338 11 41
Комментариев: 8
  • Практически все оптимизации на WordPress достигаются плагином W3 Total Cache. Он умеет минифицировать скрипты и стили и объединять в один файл. Плюс к этому оптимизирует запросы к базе данных.

    И еще - в WordPress есть официально одобренный способ вставки скриптов и стилей в functions.php своей темы. Для начала нужно зарегистировать стиль/скрипт функциями wp_register_style/wp_register_script, затем загрузить с помощью wp_enqueue_style/wp_enqueue_script во время события wp_enqueue_scripts.

    Также рекомендую проверять скорость своего сайта с помощью gtmetrix.com и Google Page Speed.

    • Google Page Speed скорее проверяет не скорость, а соответствие сайта оптимизации под максимальную скорость. Это можно подтвердить тем, что данный инструмент от гугла не распознает кэширование на стороне сервера, которое реализовано с помощью директивы Etag. По этому поводу общался с поддержкой Макхоста. Кэширование на стороне хостинга работает, а гугл его не видит. В итоге, рекомендует включить кэширование, которое по факту включено. Из-за этого и падает оценка в данном сервисе. Использую его лишь для того, чтобы смотреть, что нужно сделать, но ни как инструмент проверки скорости в процентном отношении.

      • Насчет Google Page Speed - согласен. Иногда его советы типа "Перенести css в конец файла" откровенно вредны. Попробуйте gtmetrix.com. В основном благодаря ему оптимизировал свой блог.

        • Нужно еще будет посмотреть на плагин W3 total cache. Может он будет лучше работать. Сейчас буду разбираться. Спасибо за наводку)

  • Полезная инфа, а я как раз сейчас занимаюсь ускорением блога и обязательно воспользуюсь вашими советами. Спасибо!

  • Интересная и полезная статья блогадарю

  • Здравствуйте. Читая наткнулся на маленький "трабл" сервис webwait не работает, не знаю вредна ли теперь на него ссылка или нет, просто поставлю вас в известность)

    • Здравствуйте. Да, достаточно давно уже заметил, что сервис не работает. Но тогда думал, что это всего лишь временная недоступность сайта.

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

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