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

Автор: | Рубрика: Оптимизация сайта | Обновлено: 2015-02-08 | Создано:
Просмотров: 1629
как ускорить загрузку сайта

Доброго всем времени суток!

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

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

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

Проверка скорости загрузки сайта с помощью онлайн сервисов

  • Pingdom Tools

оценка скорости загрузки сайта на Pingdom Website Speed Test

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

По окончании проверки, Вы увидите 4 основных параметра: оценку скорости (сколько из 100 возможных балов получил ваш сайт); сколько запросов было сделано к базе данных; за сколько секунд ваш блог загружается; размер в мегабайтах анализируемой страницы.

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

  • SiteSpeed

проверка скорости сайта через sitespeed.ru
В отличии от предыдущего сервиса, этот на русском. Полный отчет о проверке отсылают на почту. Для этого введите свой имейл в специальную форму.

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

Как можно ускорить загрузку сайта на WordPress

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

По возможности реализовывать те или иные украшения с помощью CSS, а не картинками. Не так давно я нашла отличный сервис оптимизации изображений optimizilla.com.

С его помощью мне удалось сжать размер шапки в 3 раза! До этого эта красочная шапка весила 353 Кб. Все изображения, которые я добавляю в свои посты, я предварительно сжимаю в фотошопе. У каждого поста есть миниатюра 200*200. Так вот, я не загружаю картинок 500*500 или других размеров, а скажу же сжимаю в Фотошопе исходную картинку до нужного мне размера. Подробную инструкцию смотрите в статье "Как изменить размер картинки без потери качества". Если я добавляю в статью скрин, то его также подгоняю под размер контентной колонки, а если есть возможность, обрезаю лишнее на нем.

Включение кэш браузера и Gzip сжатия файлов

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

Чтобы включить кэш браузера нужно в файл .htaccess прописать вот такой код:

# Кэш в браузерах посетителей
FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
</filesmatch>
</ifmodule>

Еще одна фишка для ускорения загрузки сайта - Gzip сжатие для Js, Html и Css. В тот же файл .htaccess добавляется небольшой код. Gzip сжатие работает следующим образом: при загрузке сайта на сервере хостинга происходит архивирование (сжатие) всех файлов, необходимых для передачи и корректного отображения информации у пользователя. А в браузере посетителя происходит обратный процесс – разархивирование этих файлов. Все это происходит в считанные секунды и для вас этот процесс не заметен.

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

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

Вот код для включения Gzip сжатия, который был у меня в .htaccess:

# Сжатие данных Gzip
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
<ifmodule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_item_include file \.js$
mod_gzip_item_include file \.css$ </ifmodule>
</IfModule>

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

Чтобы оптимизировать коды и скрипты, которые замедляют загрузку сайта, нужно обращаться в веб-программистам. В некоторых случаях, следует убрать из шапки коды, которые сразу же после открытия страницы начинают подгружать скрипты, а не содержимое сайта. Еще есть сервисы, которые помогают сократить CSS и Java Script файлы. Например в файле CSS можно сократить число строк, прописав все стили в одну строчку. Безусловно, для редактирования и внесения изменений в стили, такой файл станет не удобным.

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

На этом у меня все, до встречи!

С уважением, Виктория – блог inetsovety.ru

Поделиться ссылкой на пост в соц. сетях
Получать уведомления о новых статьях на e-mail
Комментариев: 38 к статье "Как проверить скорость загрузки сайта"
  • Руслан 2015-11-16 в 17:04

    Тоже стараюсь следить за скоростью загрузки страниц сайта. Но я привык использовать сервис от гугл — pageSpeedInsight. Он показывает скорость загрузки как на ПК так и на мобильной версии в баллах.
    Ниже всегда приводятся рекомендации по ускорению загрузки

    Ответить
  • Сергей Грицюк 2015-10-26 в 11:13

    Я через Pingdom проверяю Uptime сайта. Если он в течении месяца меньше заявленного хостингом, то можно требовать компенсацию. Хотя на Хостпро грех жаловаться. Именно с ним проблем лично у меня ни разу не было.

    Ответить
  • Марина 2015-10-02 в 23:44

    У вас галочка «подписаться на обновления» слишком низко стоит, сразу не видно. Подавляющее большинство наверно и не подписываются на обновления из за этого

    Ответить
    • Сергей Грицюк 2015-10-26 в 10:55

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

      Ответить
  • Виталий Охрименко 2015-03-23 в 23:21

    Добавил коды в файл .htaccess и никаких изменений в ответах сервисов для проверки не обнаружил. Как думаете, в чем причина?

    Ответить
    • Виктория 2015-03-24 в 16:18

      Возможно дело в хостинге и для него эти коды не подошли. Бывает такое. В данном случае вам следует поискать в сети другие варианты кодов.

      Ответить
      • Виталий Охрименко 2015-03-30 в 22:03

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

        Ответить
        • Виктория 2015-03-31 в 08:49

          Возможно они конфликтуют с плагином Hyper Cache. У меня Hyper Cache не стоит не на одном сайте, поэтому не могу ничего сказать из своего опыта.

          Ответить
          • Виталий Охрименко 2015-05-20 в 23:00

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

            Ответить
          • Сергей Грицюк 2015-10-26 в 10:57

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

            Ответить
  • Виталий Охрименко 2015-03-13 в 11:29

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

    Ответить
    • Виталий Охрименко 2015-03-13 в 11:31

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

      Ответить
      • Виталий Охрименко 2015-03-13 в 11:34

        Уменьшил шапку на 16%, не много конечно однако оч полезно, сейчас по другим изображениям пробегусь. Спасибо Виктория

        Ответить
        • Виталий Охрименко 2015-03-13 в 11:38

          Блин, залил на хостинг, все таки ухудшение качества видно, если присмотреться, как считаете, стоит так делать для шапки или нет?

          Ответить
          • Виктория 2015-03-13 в 14:46

            Если качество сильно пострадало, то может имеет смысл оставить прежнее изображение. Тем более, как вы написали ранее, оно уменьшилось всего на 16%.

            Ответить
          • Виталий Охрименко 2015-03-16 в 16:27

            Я заметил что страдают надписи, где применялись всякие интересные стили для текста. Остальное изображение не страдает. А 16% это тоже много!

            Ответить
      • Анютка Незабудка 2015-04-30 в 19:41

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

        Ответить
        • Сергей Грицюк 2015-10-26 в 11:03

          Согласен, часто в комментариях находится развяка.

          Ответить
    • Виктория 2015-03-13 в 14:47

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

      Ответить
      • Виталий Охрименко 2015-03-18 в 16:36

        Я именно этим сервисом и сжимал…сначала фотошопом, а потом сервисом. Спасибо, кстати, за него. Сейчас постоянно пользуюсь ним прежде чем залить картинку на хостинг. Даже после крутого сжатия фотошопом сервис сжимает еще минимум на 5% (ато и 15-20), при этом качество вообще не теряется

        Ответить
        • Анютка Незабудка 2015-04-30 в 19:45

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

          Ответить
      • Анютка Незабудка 2015-04-30 в 19:47

        Виктория, я тоже пользуюсь сервисом по вашей ссылке, спасибо за нее.

        Ответить
      • Сергей Грицюк 2015-10-26 в 11:05

        Получше Фотошопа? Ну не скажите. Если понимаешь, что делаешь и как нужно делать, то Фотошоп творит чудеса, поэтому внеконкуренции.

        Ответить
    • Сергей Грицюк 2015-10-26 в 11:01

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

      Ответить
  • Константин Кислов 2015-03-11 в 08:36

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

    Ответить
    • Виталий Охрименко 2015-03-30 в 22:09

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

      Ответить
      • Анютка Незабудка 2015-04-30 в 19:51

        Ничего себе! За что он так жестоко с нами?

        Ответить
        • Виталий Охрименко 2015-05-20 в 23:01

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

          Ответить
          • Сергей Грицюк 2015-10-26 в 11:09

            У Гугла есть такое понятие, как средняя иозиция и новым сайтам, если они не явные ГС, он дает возможность на начальных этапах побывать в ТОПе, чтоб для себя определить, насколько сайт интересен пользователям, а потом уже позиции сайта начинают варьироваться. Яндекс вроде как в последнее время тоже вводит так называемый «плавающий ТОП, т.е. понятия ТОП-3 и ТОП-10 уже не актуальны, как таковые — одним пользователям сайт может показываться на первой позиции, другим — на третьей. Позиция сайта зависит от многих факторов и меняется несколько раз в течении для, в зависимости от его попурярности, конкурентности и других факторов.

            Ответить
  • Aleksandr 2015-03-02 в 17:55

    Сейчас пойду и свой проверю блог на скорость!

    Ответить
    • Сергей Грицюк 2015-10-26 в 11:09

      Как успехи, Александр?

      Ответить
  • Людмила Лао 2015-02-16 в 20:23

    Я тоже сжимаю фото при загрузке на сайт. И тоже миниатюры делаю. Кстати, скажите, базовые миниатюры от вордпресса не уменьшают вес картинки, если она предположим 800х600 а в заголовке вставлена миниатюра, предположим 100х70

    Ответить
    • Виталий Охрименко 2015-03-16 в 16:35

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

      Ответить
    • Сергей Грицюк 2015-10-26 в 11:11

      Для миниатюры предусмотрены стили. Я не всегда ставлю миниатюру. Как ни как, а лишняя нагрузка.

      Ответить
  • Алексей 2015-02-12 в 00:03

    Сейчас поисковики обращают внимание на всё. Сайт долго грузится — ниже в выдачу. Да и для посетителей долгая загрузка не приносит плюсов.

    Ответить
  • Рашида 2015-02-09 в 14:18

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

    Ответить
  • Рашида 2015-02-09 в 14:15

    Виктория, в какое место прописать этот код в файл: в файл .htaccess прописать вот такой код

    Ответить
    • Виктория 2015-02-10 в 15:32

      Я прописывала после # BEGIN WordPress

      Ответить
Оставить комментарий
Нажмите, чтобы отменить ответ.

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