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


Оптимизация скорости загрузки сайта - Tophosting

Дата последней проверки статьи на актуальность Администратором: 24.08.2018

Улучшим сайт на 7 баллов по мнению Google или оптимизируйте загрузку видимого контента.

 

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

Оптимизируйте загрузку видимого контента – и получите до 7 баллов от Гугла!

Как это сделать? Все очень просто: нужно ограничить объем данных, которые нужно отобразить в верхней части страницы: для этого перестраиваем структуру HTML так, чтобы в первую очередь загружался важный контент, находящийся на первом экране; снизьте объем HTML, CSS и JavaScript; по возможности вместо картинок используйте CSS; включите сжатие.

Для справки (можно пропустить): yandex.ru – Основная поисковая система в России, с 2010 года признается, как самый эффективный инструмент продаж и рекламы. При правильной настройки Яндекс.Директа данная площадка становится еще и самой недорогой рекламой в интернете. Яндекс имеет расширенные настройки для поиска любой информации и даже картинок и анимации. (узнать подробнее о Яндексе) – дает 24% важности на фактор оптимизации загрузки контента.

rambler.ru –  на удивление по популярности поисковых систем в России второе место занимает именно Рамблер, у которого, как и у Яндекса есть свой браузер. Но на удивление у данного поисковика есть множество недочетов как в алгоритме поиска, который берет за основу алгоритм ранжирования Яндекса. Что не очень плохо влияет на качество поисковой выдачи. Так же у Рамблера раза 4 в день зависает почта и появляется окно «Сервер временно не доступен», что не отталкивает аудиторию (подробнее о рамблере можно прочитать тут: Рамблер – как оно есть) – оценивает оптимизацию контента на сайте в 12%, хотя за основу берет алгоритм Яндекса.

google.ru – Также одна из популярных систем в России. И по всему миру (google.com). Данная площадка не скромно популярна среди мобильных устройств, причиной такой популярности служить операционная система Андройд, разработчиками которой является Google. А также тот факт, что не каждый знает, что можно зайти в настройки и поставить вместо поисковой системы Google, Яндекс и не вбивать каждый раз любимую поисковую систему – Google считает скорость загрузки сайта, очень важной, поэтому компания разработала собственный сервис, через который вы можете оценить скорость работы вашего сайта (сервис на проверку скорости сайта от Google) – то есть Гугл за скорость дает не 24%, а гораздо больше. На этом фоне очень сильно можно выиграть, используя язык программирования Google и его бесплатные конструкторы.

Остальные, не такие популярные поисковые системы:

www.yahoo.com– Еще один из крупных поисковых систем в мире.

www.apport.ru – Довольно распространенная поисковая система в Россия, имеется два языка.

msn.com — Также довольно популярная поисковая система по новостям и по сайтам.

www.altavista.com – Без сравнения самая крупная система в мире.

astalavista.box.sk — Поисковая система по поиску бесплатного программного обеспечения.

www.bigfoot.com – Социальная сеть, поиск людей.

www.excite.com – Удобный поиск.

www.filez.com — Поиск  сайтов и бесплатного программного обеспечения.

www.hotbot.com – Одна из самых быстрых систем индексация сайтов.

infoseek.go.com – Проиндексировано более 60 мил. страниц.

www.Jassan.com – Поиск по фондовым биржам, корпорациям.

www.lycos.com – Удобный поиск музыки, видео, изображений и фотографий.

www.moneysearch.com — Поиск по сайтам финансового рынка, а также посайтам компаний связанные с бизнесом.

www.travel-finder.com – Поиск по сайтом сосредоточенные на спорте, туризме.

www.atrus.ru – Поиск, каталоги.

www.list.ru – Каталог ресурсов.

www.ru – Поиск, также имеется каталог.

www.strars.ru — Поиск по сайтам, также имеется каталог.

sel.alfainter.net – Каталог, но индексации сайтов нет.

www.anet.donetsk.ua – Каталог сайтов сети интернет.

www.a-counter.kiev.ua – Каталог сайтов.

el.visti.net — Поиск по рефератам, дипломным работам.

www.internetri.net – Украинский каталог.

www.qp.dp.ua – Каталог по сайтам.

www.meta.kharkiv.net – Еще один  поисковик

www.topping.com.ua – Каталог по сайтам. Поиск в интернете, имеется рейтинг.

poshuk.dnepr.net – Сравнительно молодой каталог.

sesna.kharkiv.org – Еще один поисковик

www.susanin.com Сусанин – Довольно известный каталог.

uahoo.gu.net UA  – Каталог по сайтам в интернете

www.ukrainet.lviv.ua – Украинский каталог.

www.echo.com.ua — Регистрация в системах

www.allonesearch.com — Поиск по сайтам.

www.beaucoup.com – Поиск по сайтам в интернете. Имеется шесть языков.

www.deja.com – Одна из мощных поисковых систем по поиску новостей. Поиск может проводится по авторам, дате добавления итд…

www.dogpile.com – Имеется логический поиск по сайтам.

Оптимизация контента на сайте для повышения скорости загрузки:

Начнем мы сразу с параметров, которые влияют на скорость загрузки сайта или на оборот ее тормозят. Но перед этим, вам нужно проверить сайт на ошибки при помощи w3c Validator (описание проекта: W3C Validator), это онлайн программа, которая прогоняет ваш сайт и рассказывает о всех ошибках, которые вам необходимо устранить. Это нужно сделать в первую очередь, перед работой с скоростью загрузки контента из-за того, что сервисы не смогут адекватно оценить скорость, потому что ошибки на сайте будут на доли секунд загружаться дольше и все равно получите плохой результат. Такое явление происходит из-за того, что браузер начинает читать код с ошибками, потом ждать и, если он не может прочитать код, он просто пропускает строчку с ошибкой и в этот момент вы начинаете терять драгоценное время. Сейчас сервисом w3c пользуются все по умолчанию, по этой причине данное действие необходимо не для того чтобы стать лучше других, а стать равным с другими интернет ресурсами.

Важно знать: по мнению Яндекс.Форума 2014 года – 79% пользователей, ждут загрузку сайта 3 секунды, после чего просто закрывают сайт и уходят на другой ресурс, а около 40% запомнят сайт и будут пытаться не попадать на него, даже по другим запросам. (Если у вас была данная проблема, вам просто необходимо заменить Фавиконку сайта, поскольку именно ее и запоминает пользователь). – так же советуем прочитать статью о том, что «Почему не нужно брать чужие фавиконки»

Первый этап:

Итак, мы проверили свой сайт или твердо знаем, что на нем нет ошибок. Тогда мы начинаем проверять сайт программой Google PageSpeed Insights – ссылка.

Google PageSpeed Insights – это инструмент, от оценки которого мы и будем отталкиваться. Проанализировав ресурс, вы увидите две оценки «Для мобильных устройств» и «Для персональных компьютеров», а также две шкалы оценки, например: 98 из 100. Стоит отметить, что, если ваш сайт хорош на 98 баллов из 100 баллов, вы не получаете ощутимой разницы в поисковой выдачи, возможно это связанно с высокой конкурентностью в интернете или с особенность ранжирования Google. Так что всеми силами добивайтесь 100 балов.

Как добиваться 100 баллов в Google PageSpeed Insights?

1. Необходимо использовать кеш браузера

- Google, Яндекс и т.д, рекомендуют указывать в заголовках HTTP дату и срок действия статистических объектов. Это делается для того чтобы, когда посетитель будет повторно заходить на ваш ресурс, даже если он это сделает по другому поисковому запросу, сайт не полностью загружался из интернета, а только частично, пользуясь сохраненными статистическими данными о вашем сайте из архивов браузера. (в ходе долгих экспериментов и исследований, не было выявлено влияние такого подхода на скорость работы браузера, даже на самых деревянных компах)

2. Нужно оптимизировать изображения (речь идет о всех изображениях на сайте)

- Пробежавшись по интернету, в большинстве сайтах, особенно которые посвящены рецептам, недвижимости, машинам и т.д. Мы обнаружили следующее, сайты загружаются на ПК больше 3 секунд (что пагубно влияет на трафик посетителей), такая загрузка была вызвана сочными, красивыми картинками, которые вешают по 14 мб, а ведь картинка то не одна. На 2017 год принято делать дизайны сайтов, где все держится на картинках, следовательно, сайт будет загружаться очень долго. Но и это еще не все. Допустим у вас модный интернет и вы загружаете все с бешенной скорость и такой интернет стоит у 32% населения России. Кто будет думать о тех, кто заходит с планшетов, телефонов о тех, кто пользуется мобильным интернетом?

В этом плане вам поможет: «Сервис для сжатия картинок без потери качества» - http://www.punypng.com/ (советуем данный сервис, поскольку он является бесплатным, и вы бы на него наткнулись сами). Так же при загрузке картинок на сайт, пользуетесь простой логикой: если вам нужна картинка 900 на 850, то не загружаете картинку большего размера.

 

3. Избавьтесь от элементов, блокирующих отображение первого экрана

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

4. Включите сжатие – это можно сделать на хостинге (если вы не опытный программист, рекомендуем вам сделать резервную копию вашего ресурса, перед началом)

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

Классическая инструкция по включению сжатия gzip  сайта :

Первый шаг (только для руцентров): Переводим САЙТ в режим РУЧНОЙ работы.Второй шаг: Изменяем файл ~/etc/nginx/имя_сайта.site.confТретий шаг: Между строками server { и listen ... вставляем следующий код:

gzip on;

gzip_buffers 16 8k;

gzip_comp_level 2;

gzip_min_length 1024;

gzip_types text/css text/plain text/json text/x-js text/javascript text/xml application/json application/x-javascript application/xml application/xml+rss application/javascript;

gzip_disable "msie6";

gzip_vary on;

gzip_http_version 1.0;

 

Четвертый шаг: Перезапускаем веб сервер.

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

5. Уменьшите JavaScript, CSS и HTML

- Убрать или хотя бы обнаружить такую ошибку очень хорошо помогает сервис pr-cy.ruПосле того, как вы проанализируете сайт вам в разделе «Нужно исправить» подскажут о проблемах с JavaScript, CSS и HTML, если они имеются. Вам останется только исправить и проверить снова.

6. Не используйте переадресацию с целевой страницы

- Между URL и целевой страницей должно выполнять не больше одной переадресации. Допустимо, если ваш сайта выполняет переадресацию вида site.ru -> m.site.ru. А вот site.ru -> www.site.ru -> m.site.ru -> m.site.ru/home – это уже перебор.

7. Оптимизируйте загрузку видимого контента (об этом говорилось в начале статьи, поэтому буду краток)

– нужно построить код так, чтобы сначала подгружалась только важная информация. А также снижаем объем HTML, CSS и JavaScript; по возможности вместо картинок используйте CSS; с включенным сжатием

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

- Проверить скорость ответа сервера вы можете все на том же pr-cy.ru. Нормой считается то состояние, когда время ответа не превышает 200 мс и то это достаточно плохой показатель. Практическим путем было выяснено, что чаще всего длительный ответ связан с техническими проблемами и маленько производительной мощностью сервера. Для данного пункта GOOGLE написал маленькую инструкцию или вернее сказать, алгоритм действий:

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

8.2 - Найдите и исправьте проблемные места. Если используется популярная веб-платформа или система управления контентом, советы по оптимизации вы найдете в документации.

8.3 - Отслеживайте и исправляйте любые проблемы производительности.

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

Подводим большие итоги:

Чтобы получить 100 баллов по удобству пользователей, Google просит придерживаться следующих правил:

1. Адаптировать размер контента для области просмотра.

2. Использовать удобные для чтения размеры шрифтов.

3. Настроить область просмотра в соответствии с размером экрана.

4. Отказаться от плагинов.

5. Увеличить размер активных элементов на странице.

6. Отказаться от межстраничных объявлений, закрывающих основной контент страницы.

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

 

Авторы: Василий Чукотский

Редактор: Андрей Коротков

tophosting.pro

Оптимизация скорости загрузки сайта на Wordpress используя подсказки Page Speed / Хабр

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

Сегодня я расскажу на примере одного из сайтов созданных и поддерживаемых мной — как оптимизировать скорость его загрузки и лояльность Googla.

Исходные данные:
  • Скорость загрузки сайта — 2 с,
  • Скорость обработки первого запроса 1,06 с,
  • Время передачи первого запроса 364 мс,
  • Объем загружаемых данных ~ 3 мБ,
Ответ на задачку
  • Скорость загрузки сайта — 1 с,
  • Скорость обработки первого запроса 80 мс,
  • Время передачи первого запроса 15 мс,
  • Объем загружаемых данных ~ 70 кБ, (первая загрузка 1400 кБ)

Перед проведением работ сделайте бекап всех файлов и базы данных. Автор не несет ответственности за возникшие последствия.

Задача:
Оптимизировать скорость загрузки ибо на хорошем ноутбуке с хорошим интернетом скорость загрузки, мягко говоря, оставляет желать лучшего. Для сравнения данные по главной странице Яндекса:
  • Скорость загрузки сайта — 1,2 с,
  • Скорость обработки первого запроса 203 мс,
  • Время передачи первого запроса 71 мс,
  • Объем загружаемых данных ~ 46 кБ,
Решение задачи
Погуглив и найдя кучу рекомендация по оптимизации сайта как например эту понял что для вменяемых оценок скорости работы сайта мало знать числа, надо понимать откуда растут ноги. В комментариях к выше указанному топику наткнулся на замечательное дополнение к хрому PageSpeed Insights

Процедура работы с данным инструментом очень простая:

Получаем список рекомендаций которые имеют различные приоритеты и разбиты на группы
  • Обеспечить быстрый ответ сервера
  • Уменьшить количество блокирующих ресурсов
  • Минимизировать нагрузку
  • Минимизировать задержку при загрузке страницы
  • Другое и т.д.
В каждом разделе есть рекомендации например «Минимизировать нагрузку » (В моём случае список получился вот такой)
  • (В)Включите сжатие,
  • (Н)Предоставляйте ресурсы с одного и того же URL,
  • (Н)Сократите JavaScript,
  • (Н)Сократите CSS,
  • (Н)Сократите HTML
Данный инструмент не только даёт рекомендации но и делает некоторые вещи за вас

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

Но вернемся к нашим баранам сайту. Сделав все необходимые замены JavaScript, CSS и изображений приятно удивляюсь уменьшению количества загружаемой информации примерно на 1 мбайт. Но все останавливается на пункте «Включите сжатие» Идем и просим помощи у гугла находим W3 Total Cache — замечательный плагин для Wordpress позволяющий оптимизировать сайт по необходимым для нас параметрам. Установка проста как всегда у Wordpress. Заходим в дополнения, поиск, установить. А вот дальше начинается самое интересное, настройка… Плагин умеет очень много, но все нам не нужно. Оставляем

  • Page cache (Страницы не генерируются при каждом запросе, а отдаются уже сохранённые)
  • Browser cache (Часть информации, такая как картинки, скрипты и стили хранятся на стороне клиента после первой загрузки)
По мимо этого плагин сам умеет ужимать JavaScript и CSS но я бы отдал предпочтение PageSpeed так как кому как не гуглю знать что лучше делать с этими файлами.

В плагине есть и более экзотичные оптимизаторы как CDN, Reverse Proxy но они дают результат уже при больших нагрузках.

Ответ на задачку
  • Скорость загрузки сайта — 1 с,
  • Скорость обработки первого запроса 80 мс,
  • Время передачи первого запроса 15 мс,
  • Объем загружаемых данных ~ 70 (1400) кБ, *
Итого получаем огромный прирост по скорости загрузки сайта, уменьшение нагрузки на сервер ну и удовлетворение от проделанной работы!

Данные о скорости и времени загрузки получены методом 5 проб в разное время суток и выведено некое среднее значение.

* — Объем загружаемых данный в итоге получился за счет использования слайдера из 8 картинок 1000 на 300 пикселей, средний вес каждой до оптимизации 250 кбайт после 170 кбайт. но так как у нас появился кеш браузера они грузятся только первый раз и на 1 месяц

Всем желаю успешного использования данных знаний.

habr.com

Как оптимизировать скорость загрузки сайта, чтобы улучшить позиции в Яндексе и Google

скорость загрузки сайтаскорость загрузки сайтаАвтор: Евгений Аралов, SEO-аналитик компании SiteClinicСегодня поднимем очень важную тему – скорость загрузки сайта. Наш аналитик Евгений Аралов рассказывает о тех показателях, которые влияют на позиции сайта в поисковых системах.

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

В статье подробно рассмотрим:Что такое время загрузки сайтаКакие показатели скорости сайта влияют на его видимость в Яндексе и GoogleКейс: как влияет время загрузки на поведенческие факторыКак понять, что оптимизировать, с помощью webpagetest.org

 

Что такое время загрузки

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

Полное время загрузки страницы – это общее время, затраченное на загрузку всех элементов страницы с момента запроса к серверу: время подключения к DNS, TCP-подключение, редиректы, загрузка всех скриптов, изображений и т.д.

В свою очередь полное время загрузки можно разделить на следующие составляющие:

A) Время ответа сервера – как быстро сеть и сервер вернули первый байт HTML-файла, который вы запросили. Сюда входит время на подключение к DNS, TCP и время до первого байта TTFB (Time to first byte). Чем больше это время, тем дольше пользователь видит белый экран.

Б) TTFB (Time to first byte) – важнейший показатель, это время, которое нужно серверу, чтобы обработать запрос и отправить ответ браузеру. Например, при запросе php-страницы ее обрабатывает специальный интерпретатор, соединяет с базой данных – и только потом ответ будет отправлен.Прежде всего, на это время влияют настройки сервера, оптимизация кода сайта, CMS и базы данных.Также влияние оказывает расстояние клиента от сервера и количество маршрутов, которое проходит пакет с данными. Чем дальше клиент от сервера, тем дольше пакет будет до него идти.Например, если клиент находится в Москве, а сервер с сайтом в Папуа-Новой Гвинее, ответ займёт больше времени, нежели если бы сайт находился в Москве.

Забегая наперед, сразу скажу, что TTFB является фактором ранжирования.

В) Обработка HTML и загрузка содержимого – время, затраченное браузером на обработку HTML, загрузку скриптов, изображений и CSS. Здесь время в основном зависит от чистоты кода HTML и размера самих файлов – чем они больше, тем дольше времени занимает загрузка.

Г) Время до начала рендеринга – как быстро начинает загружаться визуальная часть сайта, т.е. как быстро пользователь перестает видеть белый экран и начинает видеть сам сайт.

Данный показатель зависит от скорости ответа сервера, правильной верстки, оптимизации CSS и JS. Именно это значение пользователь воспринимает как скорость загрузки страницы.

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

0-shema-skorost-min0-shema-skorost-min

 

Какие показатели влияют на позиции сайта в Яндексе и Google

В 2010 году Google официально заявил, что скорость сайта является фактором ранжирования, однако не уточнил, что именно влияет на ранжирование.

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

Кроме подсказок о влиянии времени загрузки самих поисковых систем, ряд специалистов проводил исследования на поиск зависимости позиций и времени загрузки. Одно из самых известных исследований провели специалисты MOZ. Давайте посмотрим, к каким выводам они пришли:

А) Наблюдается четкая корреляция между TTFB и позицией страницы: чем меньше время получения первого байта, тем лучше позиция:

1-skorost-zagruzki-min1-skorost-zagruzki-min

 

Б) Корреляции между полным временем загрузки страницы и ее позицией в Google не обнаружено:

2-skorost-zagruzki-min2-skorost-zagruzki-min

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

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

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

По данным представителя Яндекса Алексея Шафранова, 38% пользователей покидают страницу, если время загрузки превышает 10 секунд, с мобильных устройств 74% пользователей уйдут, если страница грузится более 5 секунд.

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

 

Кейс: как влияет время загрузки на поведенческие факторы

Давайте посмотрим на реальном примере, как, за счет уменьшения времени загрузки, улучшились показатели поведенческих факторов:Интернет-магазин с трафиком ~100 000 сеансов/месяц. Регион – США.Что сделано: оптимизировали изображения, подключили CDN хостинг на SSD, оптимизировали самописный движок.

Результат: – Время загрузки уменьшилось с 11 с до 5 с– Время ответа сервера уменьшилось с 2,5 с до 0,6 с

Влияние на показатель отказов и количество страниц за сеанс:

1. Зависимость среднего времени загрузки и показателя отказов:В данном случае при уменьшении времени загрузки с 11 с до 5 с показатели отказов уменьшились с 65% до 55%:

3-skorost-zagruzki-min3-skorost-zagruzki-min

 

2. Зависимость среднего времени загрузки и количества страниц за сеанс:

4-skorost-zagruzki-min4-skorost-zagruzki-min

На данном графике видно, как параллельно уменьшению времени загрузки увеличивается количество страниц за сеанс с 3 до 5.Нельзя не отметить и зависимость конверсии от скорости загрузки. Так, по некоторым исследованиям, увеличение времени на 100 мс увеличивает конверсию на 1%. Обычно это заметно на очень крупных проектах.

Хорошо видно влияние времени на конверсию на следующем графике:

5-skorost-zagruzki-min5-skorost-zagruzki-min

Итак, подведем итоги:– Основной фактор ранжирования – это время до получения первого байта TTFB.– Время загрузки и время рендеринга – косвенные факторы, которые влияют на поведенческие факторы и удовлетворенность пользователя.

Оптимальные показатели времени загрузки страницы

Прежде чем перейти к анализу времени загрузки, определимся с оптимальными показателями.Исходя из собственной практики и из рекомендаций самих поисковых систем, можем определить следующие требования:● Время до первого байта (TTFB): до 300 мс. Google в своей справке рекомендует 200 мс, но на практике и 300 мс не всегда получается● Время загрузки страницы: 3-5 с;● Время рендеринга: до 1,5 с.

 

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

Webpagetest.org – это открытый ресурс для измерения загрузки страниц, разработанный AOL и поддерживаемый Google.

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

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

6-skorost-zagruzki-min6-skorost-zagruzki-min

После запуска теста мы увидим следующую таблицу:

7-skorost-zagruzki-min7-skorost-zagruzki-min

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

Данная таблица позволяет нам быстро оценить состояние нашего сайта и настроек сервера. Однако WPT позволяет проводить и более глубокий анализ с помощью своеобразной диаграммы Ганта:

8-skorost-zagruzki-min8-skorost-zagruzki-min

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

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

Каждый цвет отвечает за свой показатель (рассмотрим лишь основные): поиск DNS, TCP-подключение, время получения первого байта, загрузка контента.

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

 

Оптимизация по ширине

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

1. Если много зеленого – это значит, браузер слишком долго ждет первый байт.

Возможные решения:

А) Оптимизация CMS – как мы говорили в начале статьи, проблемы могут быть связаны с долгой генерацией ответа из-за проблем с оптимизацией программного кода. В данном случае нужно подключать программистов, которые смогут это оценить.

Б) Закрыть доступ к различным краулерам (паукам): ahrefs, linkpad, megaindex и прочее. Бывает, что сторонние пауки достаточно сильно грузят сервер, из-за чего возникают проблемы со временем загрузки.

В) Возможно, стоит задуматься о смене хостинга.

Г) Использовать CDN (ContentDeliveryNetwork) – данная система распределяет статические элементы сайта (CSS, JS, изображения, видео) на различных серверах по всему миру. В зависимости от нахождения пользователя, система отдает ему контент с ближайшего сервера. Кроме того, что сокращается расстояние между клиентом и сервером, также снимается нагрузка с основного сервера. Однозначно стоит задуматься мультирегиональным сайтам, сайтам с высоким трафиком и с большим количеством медийного контента (подробнее: https://habrahabr.ru/company/webzilla/blog/236511/)

 

2. Если много оранжевого цвета – это говорит о том, что сайт не использует постоянное подключение.Явление достаточно редкое, но если вы такое у себя обнаружили, стоит задуматься о настройке постоянного соединения HTTP (подробнее: https://goo.gl/F02d4a).

 

3. Много синего – контент слишком много весит: изображения, JS-скрипты, CSS

Выглядит это так:

9-skorost-zagruzki-min9-skorost-zagruzki-min

Возможные решения:

А) Оптимизация изображений:– Старайтесь максимально сжимать изображения без потери качества. Помочь в этом могут некоторые программы: FileOptimizer, PUNYpng и т.д.– Старайтесь использовать формат JPG вместо PNG– Не злоупотребляйте изображениями PNG c прозрачностью

Б) Сжимайте CSS и JS с помощью специальных программ OnlineJavascriptCompressionTool и OnlineJavaScript/CSS Compression.

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

 

Оптимизация по высоте

Оптимизация по высоте подразумевает сокращение запросов от браузера к серверу:– jбъединяйте файлы CSS и JS – если у вас очень много CSS- или JS-файлов, их можно объединить;– в вёрстке используйте спрайты.

Пример: http://i.rozetka.ua/h.05d448/sprite.png:

10-skorost-zagruzki-min10-skorost-zagruzki-min

 

Ускорение рендеринга

Не вдаваясь в подробности процесса, перейдем сразу к рекомендациям (как происходит рендеринг, вы можете почитать по здесь):– Пишите валидный код, как CSS, так и HTML: проверка валидности для CSS, проверка валидности для HTML;– Старайтесь делать CSS проще: чем меньше вложенность, тем лучше;– CSS включайте в тег

, а все скрипты – перед ; – Старайтесь в скриптах минимизировать работу с DOM; – Используйте кэш.

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

 

Полезные ссылки

Набор инструментов для анализа и оптимизации времени загрузкиHow brousers workRendering: repaint, reflow/relayout, restyleКак сделать CDN для своего сайта и почему это полезно для высоконагруженных проектовОбзор приложений для сжатия изображений

optimizatorsha.ru

Как увеличить скорость загрузки сайта в Google PageSpeed до 100%

SEO оптимизация скорости загрузки сайта

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

Улитка, черепаха, «тормоз» … Это невинные слова, которые пользователи могут сказать о медленном сайте — и эти слова никто не хотел бы услышать. Воспитанные пользователи могут ничего не сказать, но все равно пойдут с Вашего сайта к конкурентам.

Неудобный для пользователей, не достоин выдачи выше, чем на сотую странице … Эти сложные эпитеты принадлежат «искусственному интеллекту» — то есть, вот что Google думает о сайте с плохой скоростью.

Не очень приятно представлять, что все это может касаться вашего сайта? Давайте проверим, что показывает ваш «спидометр»: ваш сайт готов к гонкам за успех или только к соревнованиям среди черепах? В любом случае, сохраняйте спокойствие. Все можно исправить! Есть много инструментов для тестирования и оптимизации скорости сайта, которые позволят вам исследовать, определить проблемные места и исправить, чтобы ваш сайт «летал»! Итак, запускаем двигатели!

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

1. Google Page Speed Insights

https://developers.google.com/speed/pagespeed/insights/

Можете не верить, но Google — вовсе не бездушная машина. Он может быть строгим в своих «предпочтениях» по поисковой выдачи, но предлагает инструменты для улучшения производительности сайта (которая считается одним из важных факторов поисковой оптимизации). Google Page Speed Insights сканирует ваш сайт, сообщает вам время его загрузки, находит слабые места, тормозящие его работу, и предлагает возможности для решения этих проблем. Менее чем через минуту вы получаете полезные советы, как повысить скорость сайта. Эти советы классифицированы по важности.

Еще один сервис, работающий по технологии Google pagespeed Insights

https://testmysite.withgoogle.com/intl/ru-ru/

2. YAHOO’S YSLOW

http://yslow.org/

Yahoooo! Поехали! Ваш сайт может работать быстрее, если вы воспользуетесь советами еще одного поискового гиганта. YAHOO’S YSLOW оценивает продуктивность и стремительность загрузки собственного сайта на основе перечня критериев Yahoo, влияют на то, насколько медленным или быстрым сайт является для посетителей. Этот простой в использовании инструмент выставляет оценки на основе этих критериев и дает советы по улучшению. Чтобы у вас была лучшая картина, информация предоставляется в виде графиков и диаграмм, а также классифицируется по важности.

3. Page Scoring

http://www.pagescoring.com/website-speed-test/

Избавьтесь вещей, которые замедляют ваш сайт! Вот один из самых простых онлайн-инструментов для определения скорости сайта — Page Scoring. Он сканирует ваш сайт и сообщает вам, как быстро он загружается со всеми HTML, CSS и Js-файлами, связанные с запросом пользователя. Он также дает вам ссылки на эти файлы и показывает в точности, сколько времени «выдается» на загрузку конкретных файлов и контента. Это дает вам прекрасную возможность узнать в общем о возможности производительности вашего сайта — от времени ответа веб-сервера в список файлов элементов страниц, «воруют» скорость загрузки.

4. Pingdom

https://tools.pingdom.com/

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

5. GTmetrix

https://gtmetrix.com/

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

6. Web Page Test

https://www.webpagetest.org/

Если вы используете Web Page Test, много важных деталей относительно загрузки каждого элемента вашего сайта могут быть представлены в каскадных диаграммах и с удобными скриншотами. Вы получите оценки производительности сайта и список рекомендации по оптимизации в порядке важности. Одна из классных особенностей Web Page Test — то, что вы можете выбрать страны, по которым вы хотите провести проверку производительности сайта.

7. Monitis

http://www.monitis.com/pageload/

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

8. PR-CY.ru

http://pr-cy.ru/speed_test/

Данный сервис оценивает быстроту загрузки сайта, а также дает рекомендации по её улучшению

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

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

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

Определение причины медленной загрузки сайта – первый шаг решения проблемы

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

Для оценки скорости сайта и получения рекомендаций по ее увеличению лучше всего использовать дополнения для Фаерфокса или Хрома Page Speed. Также для этой цели можно использовать онлайн-сервисы оптимизации скорости описанные выше.

Методы ускорения загрузки сайта

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

Один из них – это оптимизация модулей и компонентов сайта.

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

Объединить CSS и JS

Еще один эффективный способ – объединить внешние файлы CSS или скрипты JS. Благодаря этому уменьшается общее число загружаемых объектов и количество запросов к серверу. Еще эти же файлы можно сжать с помощью Gzip.

Ускорение сайта методом оптимизации изображений

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

Вот один из инструментов, который поможет вам оптимизировать изображения:

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

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

Лично я оптимизировал сайт seovedenie.ru с помощью сервиса Google Page Speed Insights. После некоторых манипуляций я достиг заветных 100 баллов из 100 возможных. В результате оптимизации скорость сайта увеличилась на порядок во всех сервисах описанных выше.

Набирайте скорость, держитесь крепче … и хорошего полета!

Вам будет интересно:

seovedenie.ru

Проверка скорости загрузки сайта — как ее измерить онлайн и увеличить с помощью Page Speed Insights от Google

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

Проверка скорости загрузки сайта — как ее измерить онлайн и увеличить с помощью Page Speed Insights от GoogleПроверка скорости загрузки сайта — как ее измерить онлайн и увеличить с помощью Page Speed Insights от Google

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

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

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

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

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

  1. Pingdom — здесь достаточно просто указать адрес страницы, скорость загрузки которой вы хотите измерить (это не обязательно должна быть главная страница, ибо скорость загрузки внутренних страниц не менее, а зачастую даже более важна).

    Измеряем скорость загрузки сайта в онлайн сервисе Pingdom

    Измеряем скорость загрузки сайта в онлайн сервисе Pingdom

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

    1. объединил некоторые картинки из темы оформления сайта в так называемые спрайты
    2. а также по возможности уменьшил путем объединения число подгружаемых файлов стилей (CSS) и скриптов
    3. кроме этого имеется смысл включить Gzip сжатие статики на сервере
    4. и оптимизировать все используемые на сайте картинки

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

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

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

    Во всплывающем окне вам предложат скопировать постоянную ссылку на проделанный тест, а также отправить его по E-mail или в Твитер. Также в нижней части окна можно подписаться на мониторинг сайта на предмет доступности. Если ваш ресурс упадет (станет недоступен для посетителей), то вам будет выслано сообщение на E-mail, либо SMS на сотовый. Но эта услуга является платной, хотя и имеется возможность бесплатного триала.

    Для измерения пинга для вашего сайта, а также для просмотра Traceroute, нужно будет выбрать в самом верху страницы вкладку «Ping and Traceroute». Вводите в предлагаемую форму Урл без http, ставите галочку в чекбокс «Traceroute» или «Ping» под этой формой, и жмете «Test now».
  2. WebPageTest — как обычно, вводите Урл проверяемой страницы (не обязательно главной). Сервис некоторое время обсчитывает скорость загрузки всех элементов сайта, после чего выдает очень наглядную диаграмму (точнее даже две — за первый проход и за второй, когда уже часть элементов сайта загружаются из кеша браузера):

    Измерение скорости загрузки сайта в онлайн сервисе WebPageTest

    Измерение скорости загрузки сайта в онлайн сервисе WebPageTestНа первой диаграмме уделяете внимание положению фиолетовой вертикальной линии — это будет время окончания отрисовки сайта. Вторая вертикальная линия (синяя) будет означать время полной загрузки. Хорошо, если первая линия находится на 1-1,5 секундах загрузки сайта, а вторая — раньше 4 секунд. Тогда следующие абзацы можно прочитать «для справки». Если сайт загружается дольше 4 секунд — то нужно озабачиваться исправлением этой ситуации.
  3. Google PageSpeed Insights — это инструмент для разработчиков от самого Гугла. Он дает оценку скорости загрузки вашего сайта (а точнее оптимизации этой скорости) по стобальной шкале. 100 — это идеал, который недостижим, а вот 80-90 получить вполне реально, тем более, что сервис дает очень подробные рекомендации по исправлению выявленных недочетов.

    Анализ сайта в Google PageSpeed Insights

    Анализ сайта в Google PageSpeed Insights

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

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

    У меня, например, была проблема с настройкой gzip сжатия и с заданием времени кеширования статики (картинок, css файлов и скриптов) в браузерах пользователей, ибо у меня Апач работает в связке с nginx, а с ним я работать не умею. Пришлось писать в техподдержку Инфобокса с просьбой все настроить — сделали, и даже денежек не взяли (спасибо им!). Кстати, изначально они мне поставили время хранения кеша в 1 час, но Google PageSpeed Insights по-прежнему ругался:

    Использование кеша барузера для ускорения загрузки сайта

    Использование кеша барузера для ускорения загрузки сайтаПришлось покопаться в инструкции к этому онлайн сервису и вычитать там, что минимум нужно ставить 1 день хранения статики в кеше. Я попросил техподдержку хостинга поставить с запасом 1 неделю, что они и сделали. Теперича оценка чуток повысилась и шибко важных претензий к моему ресурсу у Гугла в плане скорости загрузки не имеется, что есть хорошо.
  4. Test my Site — новый сервис опять же от Гугла. В основном он делает акцент на оценку мобильной версии вашего сайта в том числе и по критерию его скорости загрузки:

    Test my Site - скорость загрузки мобильного сайта

    Test my Site - скорость загрузки мобильного сайтаПростенько и со вкусом, что называется. Можно подписаться на рассылку изменений.
  5. GTmetrix — опять таки «не мудрствуя лукаво» вводите Урл нужной страницы и чуток ждете окончания анализа. В результате вы получите отчет, сформированный на основе данных двух плагинов для браузеров — Page Speed (читайте о работе с ним ниже) и YSlow. Собственно, каким данным доверять и чьим рекомендациям следовать — решать вам.

    Как

    Как

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

  6. Ping Admin — аналогичный онлайн ресурс для измерения время ответа сервера с разных уголков нашей огромной планеты.Онлайн сервис Ping AdminОнлайн сервис Ping Admin
  7. Host Tracker — практически то же самое, только страны другие.
  8. ByteCheck — позволяет измерить значение TTFB (Time To First Byte) для вашего сайта, на который часто обращают внимание при оптимизации. Это время получения первого байта данных браузером с сервера. Чем выше значение TTFB, тем медленнее обработка ресурсов сервером, что есть плохо. Читайте советы по оптимизации загрузки сайтов.
  9. Load Impact — это не совсем про скорость, но тоже важный сервис. Он позволяет протестировать нагрузочную способность вашего сайта и то, падает ли при этом скорость загрузки страниц. Весьма полезная штука.
  10. Web Page Speed — онлайн-сервис с дизайном начала девяностых, но вполне себе такой информативный, если приспособитесь к отсутствию юзабилити. Внизу даются общие рекомендации по исправлению ситуации.

Так ли важно отслеживать скорость загрузки страниц?

Но вернемся от измерения скорости к поиску возможностей ее увеличения. В Гугл Вебмастере, о котором я писал тут, раньше работала экспериментальная вкладка «Эффективность сайта», где давалась оценка скорости загрузки сайта.

Проверка скорости загрузки сайта — как ее измерить онлайн и увеличить с помощью Page Speed Insights от Google

Проверка скорости загрузки сайта — как ее измерить онлайн и увеличить с помощью Page Speed Insights от Google

В общем-то ничего криминального в указанной там скорости загрузки нет, но вот то, что мой блог KtoNaNovenkogo.ru загружался медленнее, чем 84 процента всех web ресурсов в интернете — это уже звоночек, на который следовало бы отреагировать. Но раз Гугл думает, что по скорости мой блог является аутсайдером, то стоит всерьез отнестись к этой проблеме и вплотную заняться решением вопроса — как ее увеличить.

Собственно, ничего особенно придумывать и не пришлось, ибо Google сам подсказывает наиболее оптимальное решение. Точнее, он предлагает воспользоваться инструментом, который в свою очередь поможет понять, что именно нужно предпринять для того, чтобы ваш сайт немного (или много) ускорить. Я говорю об онлайн-сервисе Page Speed (раньше были еще и одноименные расширения для браузера FireFox и Хром, которыми я в основном и пользовался).

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

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

На главной странице PageSpeed даже предлагает установить модуль на свой сервер, если он работает под управлением Apache или Nginx (как раз мой случай):

PageSpeed can integrate with your Apache or Nginx

PageSpeed can integrate with your Apache or Nginx

Но я так и не понял, как это делается, ибо совсем не смыслю в администрировании серверов и никогда не работал с юникс подобными системами. Это намного сложнее, чем программу установить или плагин в WordPress залить. Другой уровень погружения. Хостера тоже не решился по этому поводу напрягать. В общем, сей модуль остался мною не испытан — возможно, что вы его уже попробовали и имеет место что сказать...

Вообще, в первый раз я использовал Page Speed в качестве расширения для браузера (сейчас оно, как я понял не фунциклирует). Раньше оно интегрировалось в инструменты для разработчиков в Фаерфоксе и в Хроме. Правда, попервости (несколько лет назад) я лишь мельком посмотрел какие советы он мне дает, и практически ничего не поняв решил, что это не для меня, после чего с легкой душой удалил плагин PageSpeed как не нужный и чуждый моему разуму элемент.

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

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

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

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

Page Speed — анализ скорости и советы по ее увеличению

P.S. Сейчас Page Speed можно использовать только онлайн и устанавливать его в браузер уже не требуется (во всяком случае с новыми версиями хрома этот плагин несовместим), хотя сути это не меняет.

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

Ускорьте загрузку своих страниц на всех устройствах в PageSpeed Insights

Ускорьте загрузку своих страниц на всех устройствах в PageSpeed Insights

Дождавшись результатов процесса проверки вы увидите окно подобное тому, что я уже приводил на скриншоте выше по тексту (в пункте 3 описаний онлайн сервисов по проверки скорости загрузки сайтов). Т.о. в результате вы увидите целый список претензий, которые этот онлайн сервис имеет к вашему ресурсу, а именно к скорости его загрузки. Пир этом он даст вам некоторые указания по оптимизации работы Web сервера в купе с используемым вами движком.

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

Пейдж Спид - исправить немедленно

Пейдж Спид - исправить немедленно

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

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

У меня первоначальная картина несколько лет назад (еще при использовании плагина — сейчас то же самое можно увидеть в http://gtmetrix.com/, ибо он испльзует АПИ PageSpeed) для https://ktonanovenkogo.ru была такой:

Проверка скорости загрузки сайта — как ее измерить онлайн и увеличить с помощью Page Speed Insights от Google

Проверка скорости загрузки сайта — как ее измерить онлайн и увеличить с помощью Page Speed Insights от Google

Я решил тогда начать с самого первого пункта «Leverage browser caching» (сейчас это называется «Используйте кеш браузера»), ибо по логике работы Page Speed, эти рекомендации должны привести к наибольшему ускорению моего блога.

Если нажать на спойлер рядом с этой надписью, то появится список различных файлов, которые не удовлетворяют оптимальным требованиям кэширования статических объектов (скрипты, CSS файлы, файлы изображений используемых на web странице) в браузерах пользователей (т.е. у читателей):

Проверка скорости загрузки сайта — как ее измерить онлайн и увеличить с помощью Page Speed Insights от Google

Проверка скорости загрузки сайта — как ее измерить онлайн и увеличить с помощью Page Speed Insights от Google

Т.е. PageSpeed Insights советует нам для увеличения скорости загрузки настроить оптимальным образом кэширование различных элементов web страниц в браузерах пользователей для того, чтобы при просмотре других эти статические элементы не подгружались бы заново с сервера. В теории все это звучит довольно запутано, ибо я понятия не имею о механизмах кэширования используемого браузерами (читайте про то, что такое кэш браузера и как его очистить).

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

Оптимизация кэширования в браузере и проверка его работы

Правда на моем текущем хостинге это не сработало, ибо у меня сейчас стоит связка Апача с nginx (настраивать надо последний, что за меня сделал хостер не ведомым мне способом). Но если у вас чистый Апач, то предложенный ниже метод может сработать.

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

Живет он обычно в корневой папке. Естественно, что все нижеописанное будет работать только на серверах под управлением Apache, но их, как правило, большинство. После подключения к своему ресурсу по FTP (FTP клиент FileZilla был описан мною тут), откройте корневую папку (обычно это либо PUBLIC_HTML, либо HTDOCS) и проверьте наличие в ней файла .htaccess.

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

Если .htaccess не видно, то попробуйте в программе FileZilla выбрать из верхнего меню пункты «Сервер» — «Принудительно отображать скрытые файлы». Если и после этого он в корне не проявился, то создайте у себя на компьютере пустой текстовый файл в любом удобном для вас редакторе (я пользуюсь Нотепад плюс плюс), назовите его как-нибудь и скопируйте в корень.

После этого переименуйте этот файл в .htaccess в программе FileZilla. Теперь нужно будет открыть его на редактирование и добавить в него приведенный ниже код. Но сначала чуток поясню.

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

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

<ifModule mod_headers.c> #кэшировать html и htm файлы на один день <FilesMatch "\.(html|htm)$"> Header set Cache-Control "max-age=43200" </FilesMatch> #кэшировать css, javascript и текстовые файлы на одну неделю <FilesMatch "\.(js|css|txt)$"> Header set Cache-Control "max-age=604800" </FilesMatch> #кэшировать флэш и изображения на месяц <FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$"> Header set Cache-Control "max-age=2592000" </FilesMatch> #отключить кэширование <FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$"> Header unset Cache-Control </FilesMatch> </IfModule>

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

Можно будет еще добавить блок кода, рассчитанного на модуль для mod_expires, где опять же используется проверка его наличия на вашем сервере, что гарантирует безопасность использования этого фрагмента кода:

<ifModule mod_expires.c> ExpiresActive On #по умолчанию кеш в 5 секунд ExpiresDefault "access plus 5 seconds" #кэшировать флэш и изображения на месяц ExpiresByType image/x-icon "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" #кэшировать css, javascript и текстовые файлы на одну неделю ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 604800 seconds" ExpiresByType application/javascript "access plus 604800 seconds" ExpiresByType application/x-javascript "access plus 604800 seconds" #кэшировать html и htm файлы на один день ExpiresByType text/html "access plus 43200 seconds" #кэшировать xml файлы на десять минут ExpiresByType application/xhtml+xml "access plus 600 seconds" </ifModule>

Комментарии опять же потом можно будет удалить.

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

  1. <IfModule mod_expires.c> ExpiresActive On ExpiresByType application/javascript "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" ExpiresByType text/css "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" </IfModule>
  2. <IfModule mod_headers.c> <FilesMatch .*\.(js|css)$> Header set Cache-control: private </FilesMatch> <FilesMatch .*\.(gif|jpg|png)$> Header set Cache-control: public </FilesMatch> </IfModule>
  3. <IfModule mod_setenvif.c> BrowserMatch "MSIE" force-no-vary BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary </IfModule>
  4. FileETag MTime Size <ifmodule mod_expires.c> <filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$"> ExpiresActive on ExpiresDefault "access plus 1 month" </filesmatch> </ifmodule>

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

Проверка скорости загрузки сайта — как ее измерить онлайн и увеличить с помощью Page Speed Insights от Google

Проверка скорости загрузки сайта — как ее измерить онлайн и увеличить с помощью Page Speed Insights от Google

Как видите, в моем случае «Используйте кеш браузера» уже не является критической недоработкой замедляющей загрузку, и значок рядом с этим замечанием сменился на оранжевый, но не на зеленый. К сожалению, повлиять на сторонние сервисы, откуда мой сайт подгружает статики (типа Янедкс, Гугла, Фидбернера и Аптулайка), я не в состоянии.

Что и требовалось доказать. Вот так вот играючи мы с вами разобрались с одной из самых существенных и весомых проблем найденных в Page Speed.

Как включить сжатие статических объектов на сервере

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

Включить сжатие в PageSpeed Insights

Включить сжатие в PageSpeed Insights

Используется при этом технология gzip, о который я уже писал. Если вы анализируете не напрямую через PageSpeed Insights, а посредством GTmetrix, то в области PageSpeed «Включить сжатие» называется «Enable gzip compression», а в YSlow — «Compress components with gzip».

Compress components with gzip в YSlow

Compress components with gzip в YSlow

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

Наиболее распространен модуль mod_deflate — с него и начнем. Мы опять же добавляем в код проверку наличия этого модуля, чтобы не получить 500 ошибку для всего сайта.

<ifModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript </ifModule>

Чуть менее популярным модулем является mod_gzip и для него код включения Gzip сжатия для нужных типов файлов будет выглядеть так:

<IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include mime ^text\.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image\.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule>

Собственно, пробуйте и проверяйте страницу в PageSpeed Insights после установки кода. Если проблема ушла, то считайте, что вам повезло. Мне же в силу наличия Апач с nginx все это не помогло (хостер сказал, что за статику отвечает nginx, при таком раскладе и настраивать надо именно его — как он это сделал мне не ведомо).

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Подборки по теме

Рубрика: Используем программы, Ускоряем загрузку сайта

ktonanovenkogo.ru

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

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

Duration 01:15:11

Открыть все курсы от webformyself

Инструменты для оптимизации скорости загрузки сайта - Полный список уроков

Развернуть / Свернуть
  • Урок 1. Обзор сервиса webpagetest. Инструкция 00:10:03
  • Урок 2. Параметры сервиса webpagetest. Часть 1 00:10:42
  • Урок 3. Параметры сервиса webpagetest. Часть 2 00:10:57
  • Урок 4. Параметры сервиса webpagetest. Часть 3 00:11:07
  • Урок 5. Обзор сервиса PageSpeed от google 00:09:34
  • Урок 6. Оптимизация изображений для сайта. Часть 1 00:04:19
  • Урок 7. Оптимизация изображений. Часть 2 00:04:44
  • Урок 8. Оптимизация CSS кода 00:05:47
  • Урок 9. Оптимизация JavaScript кода 00:07:58

Скорость загрузки сайта влияет на несколько вещей. Во-первых - это пользовательский фактор. Если пользователь долго ждет загрузки страницы, он чувствует дискомфорт и может покинуть страницу, так и не дождавшись ее загрузки. Если вы видите на глаз, что скорость загрузки сайта хромает, пора занятся его оптимизацией. Второй фактор - поисковая выдача. Если для вас пребывание в ТОП гугла важно (или получение хоть какого-то траффика с него), то вам стоит задуматся о оптимизации прямо сегодня, так как недавно гугл заявил, что скорость загрузки сайта будет влиять на его позиции в мобильной выдаче. На скорость загрузки влияет много параметров: начиная с настроек самого сервера, до самого кода сайта. В этом курсе мы поговорим о инструментах, которые помогут вам определить вашу скорость загрузки сайта, а также устранить или оптимизировать сайт для его лучшей загрузки.

Твоя оценка

Следи за последними обновлениями и новостями в наших пабликах facebook, или вступай в наш канал telegram.

Комментарии

coursehunters.net

Оптимизация скорости загрузки сайта | WordPress Mania

Привет, друзья! Оптимизация скорости загрузки сайта продолжается, Google рекомендует - мы подчиняемся и выполняем. В предыдущем посте мы с вами занимались автоматическим сжатием изображений в WordPress, а сегодня давайте посмотрим, какие предложения/рекомендации по оптимизации страниц от PageSpeed Insights мы ещё можем выполнить. Добиться показателей в 100% нам не по силам, но приблизиться к зелёной зоне или попасть в неё мы в состоянии. Хотя многое зависит от вашей темы/шаблона. Есть такие темы, что оптимизировать почти ничего не надо. Одни говорят, что шаблоны такие существуют, а другие говорят - что это фантастика.

Скорость загрузки сайта WordPressКак ускорить скорость загрузки сайта WordPress

Напомню вам, что я создал новый сайт, установил сложную тему Newspaper с дизайном Бизнес и теперь выполняю рекомендации Google по оптимизации скорости загрузки страниц (из за этого, снова затронута тема оптимизации сайта WordPress). После проделанной мной работе над сайтом - результаты есть (для мобильных 78, комп 84, было около 40) и есть к чему стремиться в дальнейшем. А теперь, давайте я расскажу вам, что можно сделать из рекомендаций PageSpeed Insights прямо сейчас, потратив на это пару минут.

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

Важно! Перед тем, как проверять свой сайт на скорость загрузки в PageSpeed Insights нужно убрать рекламу с сайта (после вернёте её назад), удалить не нужные плагины. После этого, можно тестировать свой веб-ресурс. Как выше написано, с картинками мы разобрались, хотя о них ещё будет сказано ниже, теперь перейдём к рекомендации - Сократите CSS:

Сократите код CSSСократите CSS

Как сократить код CSS?

Делается это очень легко и просто. PageSpeed Insights уже позаботился об этом - Примененные приемы оптимизации. Вам надо лишь "Скачать оптимизированные изображения, ресурсы JavaScript и CSS для этой страницы". Нажав на соответствующею ссылку -изображения, ресурсы JavaScript и CSS. Файлы загрузятся на ваш жесткий диск в архиве, с названием optimized_contents. Распакуйте архив и вы там найдёте нужные нам папки:

Папка CSSПапка с файлом CSS

Нас интересует в данный момент папка CSS, там оптимизированный файл style для вашего шаблона, который вы тестировали. Открываете файл style с помощью отличной программы Notepad++:

Оптимизированный код CSSГотовый оптимизированный код CSS

Оптимизированный код CSS это - удалены комментарии из CSS, новые и пустые строки, двойные пробелы, табуляции и так далее (на скриншоте сразу видно). Далее, вам остаётся теперь заменить стили шаблона на оптимизированные. Я делал эту операцию сразу в своей админке, легко и просто. В разделе - Внешний вид, нажимаем - Редактор. Всегда открывается файл style.css вашей темы, по крайней мере у меня всегда так. В примере взята тема Twenty Sixteen:

Таблица стилей (style.css)Twenty Sixteen: Таблица стилей (style.css)

Вот этот код нам нужно заменить на оптимизированный. Можете, если не любите рисковать, сначала сделать копию оригинала CSS, а потом заменить стили. Обновляете файл и снова проверяете сайт в PageSpeed Insights. Одно из предложений - Сократите CSS - исправлено:

Предложение Сократите CSS - исправлено

Что касается - скачанных оптимизированных изображений - папка image, то данным предложением можно воспользоваться, если картинки у вас маленькие. Если большие, то это не подойдёт. PageSpeed Insights их размер слишком уменьшает. Самый лучший вариант, это загружать фотки для статьи сразу оптимизированные/сжатые. Для этого, можно использовать программу Photoshop или специальные проги и сервисы (смотрите набор тут) и тогда нам не придётся устанавливать лишний плагин для сжатия картинок.

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

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

Понравилась статья? Поделись с друзьями!

wordpressmania.ru