
1. Проверка и оптимизация по Google PageSpeed
Google PageSpeed считался до недавних пор, одним из важных показателей при ранжировании сайта. Однако, он никогда не учитывался, но стоит отметить, что низкая скорость загрузки вашего сайта увеличивает Bounce Rate (процент отказов) из-за этого ваш сайт начинает терять позиции и проседает трафик. Google PageSpeed указывает на проблемы, которые присутствуют на сайте. Исправив их и улучшив скорость загрузки вашего сайта пользователь не будет уходить с сайта из-за долгого ожидания. Статистика с блога getgoodrank:
Рисунок 1 – Статистика ожидания загрузки страницы
- 3% пользователей заявили, что готовы ждать полной загрузки сайта около 1 секунды;
- 15% пользователей ожидают загрузки сайта в течение 16-20 секунд;
- 16% пользователей ждут около 5 секунд;
- 16% готовы ждать загрузку 11-15 секунд;
- 20% пользователей готовы ждать более 20 секунд, пока сайт загрузится;
- 30% пользователей ждут загрузку не более 6-10 секунд, затем возвращаются в поиск.
Проверка скорости сайта через Google PageSpeed
Для того чтобы проверить проблемы с проектом переходим на главную страницу инструмента https://developers.google.com/speed/pagespeed/:
Рисунок 2 – Работа в Google PageSpeed
- Нажимаем кнопку “Run Insights” для того чтобы перейти на страницу анализа нашего сайта.
- Поле для ввода ссылки (URL-страницы) на анализируемую нами страницу;
- После того как ввели URL страницы нажимаем кнопку анализировать;

Рисунок 3 – Скорость загрузки страницы для мобильный устройств
- Отображает скорость загрузки мобильных страниц и рекомендации по их оптимизации;
- Вкладка отображает проблемы и скорость загрузки для компьютеров, также содержит оценку по 100 бальной шкале;
- Оценка ставится по 100 бальной шкале. Допустимая скорость – от 70 баллов, в данном случае 49;
- Указаны рекомендации от Google как можно исправить проблемы на данной странице;
Оптимальная скорость загрузки по рекомендации от Google
Каждая рекомендация имеет индикатор приоритета, соответствующий ее важности:

Рисунок 4 – Проверка скорости загрузки страниц для компьютеров
Также можно сразу скачать исправленный код и сжатые изображения для увеличения скорости:
Рисунок 5 – Как скачать оптимизированную страницу по Google Page Speed
После применения всех рекомендаций, скорость загрузки вашего сайта, улучшится и оценка со стороны инструмента улучшится. Однако, иногда необходим более детальный анализ который позволит узнать на каком моменте загрузки страницы возникает проблема. Для этого воспользуемся бесплатным инструментом webpagetest.org. Сервис, который показывает поэтапную загрузку элементов на странице. Заходим на главную страницу сервиса:
Рисунок 6 – Как проверить загрузку страниц в WebPageTest
- Вводим URL нашей страницы;
- Выбираем локацию откуда будет идти проверка сайта (в нашем случае это Варшава, Польша);
- Браузер – Google Chrome;
- Нажимаем “Start Test”;

Рисунок 7 – Пример отчета WebPageTest
Из данной таблицы видно, что на главной странице подгружалось 224 элемента, для каждого элемента указано время загрузки в ms.
Рисунок 8 – Поэтапная скорость загрузки элементов страницы Web Page Speed
Для более детального анализа, есть таблица “Request Details”:- Указан URL на элемент;
- Указан тип контента;
- Указано время потраченное на загрузку элемента;
- Указан вес каждого элемента страницы в килобайтах.
2. Поиск проблемных элементов на сайте
Из проблемных элементов на странице в таблице может отобразиться следующие:
Рисунок 9 – Элементы сайта которые долгое грузятся и отдают 404 код
- элементы которые отдают 404 код;
- картинки (.jpg) и анимации(.gif);
3. Ленивая скорость загрузки изображений на сайте
Ленивая скорость загрузки изображений означает, что картинки подгружаются по мере скроллинга страницы вниз, это значит что если пользователь не прокрутит страницу до конца, то изображения в нижней части не будут загружаться. Этот метод прокрутки подходит для сайта с большим количеством изображений. Данный метод прокрутки следует использовать в случае если на сайте используется отображение контента или передача функционала пользователю через JS, загрузка DOM имеет значение. На сайте с большим количеством больших изображений ленивая загрузка (асинхронная загрузка) может стать решающим фактором того, останется пользователь или нет. Большинство изображений при ленивой загрузке, начнут грузиться после прокрутки сайта до того места как сайт не попадет в viewport. Если пользователь никогда не докрутит страницу до этой точки, изображения не будут загружены. Таким образом мы сэкономим трафик большинству пользователей, и они будут вам благодарны.4. Сжатие картинок при помощи сервисов
Обычно при загрузке картинок на сайт не обращают внимания на размер изображения, его оптимизацию и вес. В наше время не все используют безлимитный интернет на мобильном телефоне. Выделяют обычно от 1 до 5 гигабайт мобильного интернета за фиксированную сумму, отсюда можно сделать вывод, что не все пользователи захотят заходить к вам на сайт и ждать долгой загрузки больших изображения. Для решения этой проблемы можно воспользоваться бесплатными сервисами сжатия изображений с минимальными потерями качества. Алгоритмы сервисов не искажают изображение для человеческого глаза, однако, значительно меняют сам вес картинок.Алгоритмы при использовании сжатия картинок:

Рисунок 10 – Пример сжатия с потерей данных. Значения округляются до ближайшего числа, кратного 10.

5. Бесплатные сервисы для сжатия изображений
Для сжатия картинок используем сервисы:- Optimizilla – http://optimizilla.com/ru/;
- Kraken – https://kraken.io/;
Сервис Optimizilla
- Для сжатия при помощи инструмента Optimizilla нужно перейти на сайт инструмента и нажать кнопку “загрузить”:

Рисунок 12 – Бесплатный сервис для оптимизации картинок Optimizilla

Рисунок 13 – Сжатие картинки без потери качества при помощи Optimizilla
После загрузки изображения Вы увидете:- Исходный вес изображения;
- Сжатый вес изображения;
- Процентное сохранения качества изображения;

Рисунок 14 – Настройка сжатия картинки при помощи сервиса Optimizilla
- Выбрали качество 70%, вес изображения – 78 КБ, что на 58% меньше исходного. Нажимаем кнопку “Сохр.” качаем изображение на наш компьютер и заливаем оптимизированное изображение.
Сервис Kraken
- Заходим на главную страницу сервиса:

Рисунок 15 – Сервис для сжатия картинок Kraken
- Выбираем “Try Free Web Interface” и попадаем на страницу:

Рисунок 16 – Рабочая область Kraken.io
- Указываем каким методом будет происходить сжатие изображение;
- Поля для загрузки нашего изображения в сервис;

Рисунок 17 – Режимы работы в Kraken.io
- Использование сжатие при помощи мода “Lossy” исходное изображение 181.69KB – сжалось до 130.39KB сжатие на 60.77KB;
- Использование сжатия при помощи мода “Lossless”: исходное изображение 181.69KB – уменьшил вес изображения до 160KB, экономия веса изображения 21.69KB;
- Сжатия при помощи “Expert” кастомных настроек: исходное изображение 181.69KB – поставили качество 50% вес стал 64.42KB, сохранили 117.28KB.
6. Кеш браузера для ускорения сайта
Заметно увеличили скорость загрузки сайта, осталось разобраться с использованием кэша для браузера. Когда пользователь заходит на ваш сайт в первый раз, все файлы с сайта скачиваются на его компьютер, а при следующем заходе на сайт файлы будут подгружаться с его компьютера, а не с хостинга или сервера. Осуществляется это при помощи кода который прописывается в файле .htaccess. Также для каждого типа файла который будет хранится на компьютере юзера определенное время и по истечению срока эти файлы будут обновлятся на компьютере пользователя.TTFB – Time to first byte.
TTFB (Time to first byte) – показатель времени, необходимое серверу, чтобы обработать запрос и отправить ответ браузеру. Например, при запросе php-страницы ее обрабатывает специальный интерпретатор, соединяет с базой данных и только потом отправляется ответ. Прежде всего, на это время влияют настройки сервера, оптимизация кода сайта, CMS и базы данных. Также влияние оказывает расстояние клиента от сервера и количество маршрутов, которое проходит пакет с данными. Чем дальше клиент от сервера, тем дольше пакет будет до него идти. Например, если клиент находится в Москве, а сервер с сайтом в Папуа-Новой Гвинее, ответ займёт больше времени, нежели если бы сайт находился в Москве. Оптимальным значением считается загрузка до 300мс.LiteSpeed web server для ускорения сайтов.
Давайте рассмотрим в чем преимущества LiteSpeed для пользователя:- LiteSpeed эффективно противодействует DDoS-атакам и сокращает время отклика сайта в 4 раза.
- Позволяет большему количеству пользователей одновременно находиться на сайте.
- Позволяет использовать IPv6-сеть как вместо, так и наравне с IPv4.
- Более эффективно работает с PHP SAPI, что существенно упрощает написание и внедрение программ и скриптов, написанных на PHP.
- Уменьшается нагрузка на сервер по CPU, а также использование ОЗУ, благодаря чему сервер работает быстрее, что благотворно сказывается на работе сайтов клиентов.
- Поддерживает весь функционал Apache и Cloudlinux: .htaccess, modsec, php per directory, custom php options, cagefs и т.д.
- Увеличивает скорость кэширования данных благодаря LiteSpeed Cache, что увеличивает производительность сайта.
Добавляем в конец файла htaccess строку: RewriteRule cacheable/(.*.php)?$ - [L,E=cache-control:max-age=120]
7. AMP страницы
В наше время, как выше сказано, большое количество посетителей заходит на сайт с мобильного телефона. Для этого Google добавил сервис AMP Google, у сайтов которые внедрили AMP страницы появляется преимущество, перед теми у которых их нет.
Рисунок 18 – Пример мобильной выдачи по запросу новости дня
Как видно в приоритете у Google для мобильных устройств — выдача новостей с AMP разметкой. Наш сайт сохраняется на серверах Google, имеет облегченный вес и загружается не более 1 секунды. Для внедрения АМР разметки используйте официальные рекомендации.Пример разметки на основе сайта Theguardian.com
Статья:
Пример AMP разметки:
1) Начало кода:
<!doctype html> <html AMP>;
2) Указываем кодировку текста:
<meta charset="utf-8";
3) Подключение AMP JS библиотеки:
<script async src="https://cdn.ampproject.org/v0.js"></script> - указывается перед закрывающим тегом </head>;
4) Указываем Title статьи, пример:
<title>Hello, AMPs</title>; <title>Las Vegas shooter's girlfriend returns to US as police reveal details of his planning | US news | The Guardian</title>;
5) Указываем оригинальную ссылку статьи в <rel= “canonical”/>:
Пример:
<link rel="canonical" href="https://www.theguardian.com/us-news/2017/oct/03/las-vegas-shooting-girlfriend-marilou-danley-person-of-interest-sheriff"/>
6) Ширина и высота устройства – оставляем без изменений:
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
7) Разметка по schema.org:
Разметка организации с ссылкой на сайт, а также профили во всех соц.сетях (Facebook, Twitter, Google plus и youtube). Для отображения указан логотип и размер 152х152 пикселя.<script data-schema="Organization" type="application/ld+json">{"name":"The Guardian", "url":"http://www.theguardian.com/","logo": "https://assets.guim.co.uk/images/favicons/451963ac2e23633472bf48e2856d3f04/152x152.png","sameAs":["https://www.facebook.com/theguardian", "https://twitter.com/guardian","https://plus.google.com/+theGuardian","https://www.youtube.com/user/TheGuardian"], "@type":"Organization", "@context":"https://schema.org"} </script>Разметка “WebPage” в ней указывают оригинал статьи без AMP.
<script data-schema="WebPage" type="application/ld+json">{"@id":"https://www.theguardian.com/us-news/2017/oct/03/las-vegas-shooting-girlfriend-marilou-danley-person-of-interest-sheriff";"potentialAction":{"@type":"ViewAction";"target":"android-app://com.guardian/https/www.theguardian.com/us-news/2017/oct/03/las-vegas-shooting-girlfriend-marilou-danley-person-of-interest-sheriff"};"@type":"WebPage";"@context":"http://schema.org"};</script>
8) Style amp-boilerplate остается без изменений:
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes-amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
Оставляем без изменений.
9) H1 – указываем наш заголовок H1.
8. CDN для ускорения загрузки сайта пользователю
Что такое CDN и для чего он нужен
CDN – полное название content delivery network (сеть доставки контента). Обычно под этим понятием подразумевают сеть серверов которые находятся по всему миру, за счет чего они ускоряют отдачу или доставку вашего контента конечному пользователю.
Рисунок 19 – Как устроена работа сети доставки контента.
Под “контентом” чаще всего подразумевают изображения,видео и статические элементы веб-сайтов (не требующие выполнения кода на сервере или запросов в базу данных, такие как css/js).
Рисунок 20 – Пример передачи данных пользователю при помощи CDN
9. Проверка скорости загрузки в Google Analytics
После выполнения всех рекомендаций ждем пару дней чтобы данные в Google Analytics обновились и смотрим есть ли улучшения скорости загрузки сайта. Для этого нужно зайди в Google Analytics выбрать “Поведение” —> “Скорость загрузки сайта” —> “Обзор”

- Скорость загрузки из разных браузеров;
- Скорость загрузки по странам;
- Скорость загрузки постранично;

- Поле где указан URL страницы;
- Поле сколько данную страницу просматривают;
- Среднее время загрузки страницы;
- Рекомендации по оптимизации данной страницы;
- Оценка страницы по Google PageSpeed;
Бонус!
Есть хороший сервис по названием Pingdom. Который по функционалу не уступает WebPageSpeed, различие в том что тестировать можно только из 4 стран:
