Проверить скорость загрузки страниц сайта

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

Google pagespeed

Влияние скорости загрузки на продвижение сайта

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

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

Как думаете, если пользователь будет ждать загрузки страницы по 5-10, а то и более секунд, останется ли он на таком сайте? Нет! Он уйдет, а это - показатель «отказов», которые дадут сигнал поисковым системам, что с вашим сайтом что-то не так и его следует понизить в результатах поиска.

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

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

Google сервис анализа скорости загрузки сайта

PageSpeed Insights – Google инструмент проверки скорости загрузки страниц. Позволяет сделать тест, как для стационарного компьютера, так и для мобильного устройства.

Кроме основной его функции, он выполняет еще ряд других:

  1. Проверка скорости загрузки для компьютеров и для мобильных устройств;
  2. Определение удобства пользования;
  3. Предоставление конкретных рекомендаций по ускорению загрузки и повышению удобства пользования.

Перейти к инструменту проверки скорости загрузки: http://developers.google.com/speed/pagespeed/insights/

После того, как выполните анализ, вам будет доступна оценка Google по 100 бальной шкале.

Ускорение загрузки страницУскорение загрузки страниц

Анализатор подчеркнул, какие исправления нужно сделать обязательно, а какие «по возможности».

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

Как уменьшить время загрузки страниц в WordPress

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

Кэширование

Плагин Wp Super cache, который можно обозначить пометкой Must Have. Он просто обязательно должен быть установлен на WordPress сайт. Его задача кэширование страниц. При первом заходе пользователя, браузер загружает все JS и CSS файлы. При переходе на следующую страницу, эти файлы уже будут в кэше, а значит это позволит избежать их повторной загрузки. У меня установлен плагин Hyper Cache, он является аналогом Wp Super cache и выполняет все те же функции.

Отключение Post Revision

Вы замечали, что при написании или редактировании записи идут авто сохранения черновиков? Это влияет на скорость работы Базы данных, увеличивая ее размер. Чтобы отключить Post Revision, зайдите в файл wp-config.php и добавьте следующую строчку:

define('WP_POST_REVISIONS', false);

Это предотвратит появление новых копий, однако не удалит старые. Для того чтобы стереть из БД старые копии, следует войти в PHPMyAdmin и сделать SQL запрос:

DELETE a,b,c
FROM wp_posts a
LEFT JOIN wp_term_relationships b ON (a.ID = b.object_id)
LEFT JOIN wp_postmeta c ON (a.ID = c.post_id)
WHERE a.post_type = 'revision'

Так же для очистки базы данных можно использовать WordPress плагин WP-Optimize.

Комплексная оптимизация WP

Autoptimize – отличный плагин, который позволяет произвести ряд улучшений, таких как: сжатие CSS и JS файлов, объединение их в один файл, перемещение JavaScript файлов в Footer.

JavaScript в конце страницы

Если вы не используете плагин из предыдущего пункта, то вам следует, по возможности, поместить JavaScript в конце страницы. Это позволит загружать JS после загрузки основного контента. Об этом нам так же говорит PageSpeed Insights.

Сжатие JS

Опять же, если Autoptimize не установлен, то нужно использовать другой инструмент по сжатию JS кода. Например - http://javascriptcompressor.com.

Объединение файлов в один

Следует объединить файлы CSS в один. То же следует проделать и с JS. Это позволит сократить количество обращений к серверу.

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

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

Как с этим бороться? Есть множество онлайн сервисов, которые позволяют сжать изображение без потери качества.

Но мне по душе старый добрый Photoshop. В разделе «Файл» - «Save for web» можно сохранить изображение, ориентированное именно на использование его на сайтах. С помощью данного метода размер файла будет уменьшен в несколько раз, при том, что изменение качества самого фото практически не будет заметно. При этом следует правильно выбрать оптимальное расширение.

Хотлинки

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

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

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?example\.com/.*$ [NC]
RewriteRule .*\.(gif|jpg|png|ico)$ - [F,L]
</ifModule>

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

Согласно спецификации HTTP/1.1, браузеры могут производить одновременную загрузку не более 2-х компонентов сайта с одного хоста одновременно. Для того чтобы решить эту проблему, достаточно использовать несколько хостов. Например, изображения хранятся на одном хосте, файлы JS на другом. Можно использовать библиотеку Google, а так же переносить файлы на поддомен и делать выгрузку оттуда.

Отказ от плагинов

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

P.S. Ну и напоследок, обратите пристальное внимание на удобство пользования сайтом на мобильных устройствах. Пусть общий процент посещений с устройств, чье разрешение менее 1280x800 не столь велик, все же пренебрегать ими не стоит. Крайне рекомендуется использовать адаптивный дизайн, или сделать дополнительно мобильную версию сайта.

Почему следует это сделать:

Представьте, если человек зашел с мобильно устройства на сайт, а они не оптимизирован для просмотра на моб. Он сразу его покинет, а это – отказ. Зачем вам рост отказов? Ведь это даст повод поисковикам понизить ваш сайт в результатах поиска.

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

Комментарии к “Проверить скорость загрузки страниц сайта

  1. У меня скорость загрузки 43 / 100. Это очень плохо? Необходимо выполнить все описанные рекомендации PageSpeed Insights?
    Спасибо за ссылку на этот инструмент, буду разбираться

    1. Елена, я вам больше скажу: мой браузер вообще отказывается открывать ваш сайт. А по PageSpeed Insights отображается не 43, а 34.
      Удобство для пользователей так же хромает. Поисковики сейчас на это очень обращают внимание.

      1. Поняла, в PageSpeed Insights первые данные для мобильных устройств, потом для компьютеров.
        Юрий, а какой браузер отказывается открывать? У меня с айфона пишет «большое количество переадресаций» (иногда не открывает). Плохо понятно, что за переадресации, которые не ставила.
        Буду работать. Поисковики действительно уделяют этой проблеме большое внимание. Все фото, материалы у меня уникальные, а ранжирование низкое.
        Скажите пожалуйста, ведь гугл и яндекс к скриптам плохо относятся: там слайдеры? Эти пункты (изображения) не смогу оптимизировать, правильно? Извините, если выражаюсь неправильно, я новичок.

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

          По переадресациям — не знаю с чем это связано.

          Изображения подписывайте более развернутыми названиями, состоящими из ключевых слов, а не просто chauder.jpg. У некоторых вообще не прописан атрибут alt. Исправьте и ранжирование улучшится. Так же используйте графические редакторы для уменьшение веса картинок. Потеря качества будет не заметна для глаза, а скорость загрузки увеличится.

          Google относительно недавно начал читать JS. Плохое отношение может быть лишь в случае, если у вас там ошибки. Если ошибок нет — то все ок. Так что, на счет слайдеров не беспокойтесь (оптимизация изображений должна быть на этапе их добавления).

          Но в PageSpeed Insights под оптимизацией JS имеется ввиду сокращение кода и перенос малозначимых скриптов в футер.

          Для сжатия кода javascript, html и css можно использовать онлайн сервисы.
          Либо более простой вариант — плагин Autoptimize. Который ко всему прочему способен переносить js из header в footer и объединять все css файлы в один, что уменьшает количество запросов к серверу.

          Где-то на Хабре попадался пост по настройке кеширования в .htaccess, вам будет полезно ознакомится — поищите.
          Надеюсь, у вас установлен один из плагинов кеширования (WP Super Cache или Hyper Cache)?

          Самый оптимальный вариант, который мне приходит в голову — перейти на хостинг http://www.ukraine.com.ua/?page=74830 (реф ссылка). Там в конфигурациях можно за пару минут сделать все нужные настройки по оптимизации кода, сделать отложенную загрузку изображений, включить кеширование изображений. Единственное, что нужно будет сделать вручную — уменьшить вес самих картинок. Фотошоп вам в помощь. Работа нудная, но — необходимая.

          P.S. Тьфу ты. Начал вспоминать в каком посте я писал про Autoptimize и плагины кэширования. Поискал — не нашел. Дал ответ, а уже потом обратил внимание, что в этой статье и писал. Проснулся недавно…

  2. WP Super Cache установила по вашей рекомендации. На хабре нашла статьи.

    На счет ошибок в скриптах, затрудняюсь ответить. Но настораживает то, что абсолютно во всех фото (наполнение сайта) я прописываю атрибут alt, а его получается не видно. Значит где-то все-таки ошибочки.

    Юрий! Спасибо, вы такой фронт работ открыли для меня. Благодарю за помощь!

    1. В тех изображениях, которые вы вручную добавили в тело статьи, отображается alt, а вот миниатюры (те, что над статьей) вместо

      alt="бла бла бла"

      выводят просто alt, без каких-либо значений. Надо в single.php копаться.

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

      Я бы на вашем месте все же подумал над сменой шаблона на адаптивный. Ну или в крайнем случае — над установкой плагина мобильной версии. Его не сложно настроить.

      По возможности, позакрывайте от индексации сквозные внешние ссылки на mytaste, счетчики в футере и т.д.

      Я не особый ценитель стиля, но все же оформил бы форму подписки и убрал надпись «Можно использовать следующие HTML-теги и атрибуты» под комментариями.

      Ну, вроде все =)

  3. Здравствуйте. Спасибо за статью! У меня PageSpeed Insights тоже выдавал ряд обязательных рекомендаций. И если со сжатием и кешем разобралась, то как удалить из верхней части страницы коды JavaScript и CSS не знала вообще. Думаю, с плагином Autoptimize проблема решится и скорость загрузки страниц увеличится. Спасибо ))

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

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