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

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

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 секунд, затем возвращаются в поиск.

Ссылка на статью: http://blog.getgoodrank.ru/vremya-zagruzki-sajta-vliyanie-na-nastroenie-polzovatelej/

Проверка скорости сайта через Google PageSpeed

Для того чтобы проверить проблемы с проектом переходим на главную страницу инструмента https://developers.google.com/speed/pagespeed/:

Рисунок 2 – Работа в Google PageSpeed

1. Нажимаем кнопку “Run Insights” для того чтобы перейти на страницу анализа нашего сайта.

Переходим на страницу где видно:

1. Поле для ввода ссылки (URL-страницы) на анализируемую нами страницу;
2. После того как ввели URL страницы нажимаем кнопку анализировать;

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

Рисунок 3 – Скорость загрузки страницы для мобильный устройств

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

Оптимальная скорость загрузки по рекомендации от Google

Каждая рекомендация имеет индикатор приоритета, соответствующий ее важности: Скорость загрузки должна быть в зеленой зоне, примерно от 85 баллов. Ссылка: https://developers.google.com/speed/docs/insights/about?hl=ru  Исследования Amazon показали, что даже при относительно благополучной ситуации с сайтом (при быстрой загрузке на проводном интернете и современном компьютере), задержки в загрузке могут приводить к потерям аудитории и снижению конверсии. Например, при проведении эксперимента, в котором выяснила, что каждые 100 мс (0,1 с) задержки приводят к снижению продаж на 1%. Вкладка “Для компьютеров” показывает проблемы и рекомендации.

Рисунок 4 – Проверка скорости загрузки страниц для компьютеров

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

Рисунок 5 – Как скачать оптимизированную страницу по Google Page Speed

После применения всех рекомендаций, скорость загрузки вашего сайта, улучшится и оценка со стороны инструмента улучшится. Однако, иногда необходим более детальный анализ который позволит узнать на каком моменте загрузки страницы возникает проблема. Для этого воспользуемся бесплатным инструментом webpagetest.org. Сервис, который показывает поэтапную загрузку элементов на странице. Заходим на главную страницу сервиса:

Рисунок 6 – Как проверить загрузку страниц в WebPageTest

1. Вводим URL нашей страницы;
2. Выбираем локацию откуда будет идти проверка сайта (в нашем случае это Варшава, Польша);
3. Браузер – Google Chrome;
4. Нажимаем “Start Test”;

Получаем результат:

Рисунок 7 – Пример отчета WebPageTest

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

Рисунок 8 – Поэтапная скорость загрузки элементов страницы Web Page Speed

Для более детального анализа, есть таблица “Request Details”:

1. Указан URL на элемент;
2. Указан тип контента;
3. Указано время потраченное на загрузку элемента;
4. Указан вес каждого элемента страницы в килобайтах.

2. Поиск проблемных элементов на сайте

Из проблемных элементов на странице в таблице может отобразиться следующие:

Рисунок 9 – Элементы сайта которые долгое грузятся и отдают 404 код

1. элементы которые отдают 404 код;
2. картинки (.jpg) и анимации(.gif);

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

3. Ленивая скорость загрузки изображений на сайте

Ленивая скорость загрузки изображений означает, что картинки подгружаются по мере скроллинга страницы вниз, это значит что если пользователь не прокрутит страницу до конца, то изображения в нижней части не будут загружаться. Этот метод прокрутки подходит для сайта с большим количеством изображений. Данный метод прокрутки следует использовать в случае если на сайте используется отображение контента или передача функционала пользователю через JS, загрузка DOM имеет значение. На сайте с большим количеством больших изображений ленивая загрузка (асинхронная загрузка) может стать решающим фактором того, останется пользователь или нет. Большинство изображений при ленивой загрузке, начнут грузиться после прокрутки сайта до того места как сайт не попадет в viewport. Если пользователь никогда не докрутит страницу до этой точки, изображения не будут загружены. Таким образом мы сэкономим трафик большинству пользователей, и они будут вам благодарны.

4. Сжатие картинок при помощи сервисов

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

Алгоритмы при использовании сжатия картинок:

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

Рисунок 11 – Пример сжатия без потерь. Количество символов, идущих подряд, определяется число, после символа.

5. Бесплатные сервисы для сжатия изображений

Для сжатия картинок используем сервисы:

1. Optimizilla – http://optimizilla.com/ru/;
2. Kraken – https://kraken.io/;

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

Сервис Optimizilla

1. Для сжатия при помощи инструмента Optimizilla нужно перейти на сайт инструмента и нажать кнопку “загрузить”:

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

Рисунок 13 – Сжатие картинки без потери качества при помощи Optimizilla

После загрузки изображения Вы увидете:

1. Исходный вес изображения;
2. Сжатый вес изображения;
3. Процентное сохранения качества изображения;

На данном скриншоте видно, что при сохранении 87% качества у нас изображение уменьшилось на 57 КБ, однако можем снизить качество до 70%,  где отличия по качеству будет не заметно:

Рисунок 14 – Настройка сжатия картинки при помощи сервиса Optimizilla

1. Выбрали качество 70%, вес изображения – 78 КБ, что на 58% меньше исходного. Нажимаем кнопку “Сохр.” качаем изображение на наш компьютер и заливаем оптимизированное изображение.

Сервис Kraken

1. Заходим на главную страницу сервиса:

Рисунок 15 – Сервис для сжатия картинок Kraken

1. Выбираем “Try Free Web Interface” и попадаем на страницу:

Рисунок 16 – Рабочая область Kraken.io

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

Рисунок 17 – Режимы работы в Kraken.io

1. Использование сжатие при помощи мода “Lossy” исходное изображение 181.69KB – сжалось до 130.39KB сжатие на 60.77KB;
2. Использование сжатия при помощи мода “Lossless”: исходное изображение 181.69KB – уменьшил вес изображения до 160KB, экономия веса изображения 21.69KB;
3. Сжатия при помощи “Expert” кастомных настроек: исходное изображение 181.69KB – поставили качество 50% вес стал 64.42KB, сохранили 117.28KB.

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

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 версия : https://amp.theguardian.com/us-news/2017/oct/03/las-vegas-shooting-girlfriend-marilou-danley-person-of-interest-sheriff

Оригинал: https://www.theguardian.com/us-news/2017/oct/03/las-vegas-shooting-girlfriend-marilou-danley-person-of-interest-sheriff

Пример 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.

Оригинал: https://www.theguardian.com/us-news/2017/oct/03/las-vegas-shooting-girlfriend-marilou-danley-person-of-interest-sheriff

<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 выбрать “Поведение” —> “Скорость загрузки сайта” —> “Обзор” На данном графике видно по дням как меняется средняя загрузка страниц на вашем сайте. Под графиком указана более детальная информация по скорости загрузки вашего сайта:

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

В первую очередь обращаем внимание на скорость загрузки в разных браузерах и стараемся оптимизировать в них. Далее обращаем внимание на скорость загрузки страниц сайта, чтобы выявить самые проблемные и устранить на них ошибки. Для этого переходим в “Поведение” —> “Скорость загрузки сайта” —> “Ускорение загрузки” После перехода на данную страницу мы видим:

1. Поле где указан URL страницы;
2. Поле сколько данную страницу просматривают;
3. Среднее время загрузки страницы;
4. Рекомендации по оптимизации данной страницы;
5. Оценка страницы по Google PageSpeed;

Стоит обратить внимание на колонку “Среднее время загрузки страницы” отсортировать от большего к меньшему, таким образом мы найдем проблемные страницы и сможем понять как лучше их оптимизировать. Если у вас не большой сайт, либо вам нужно решить проблемы с определенными страницами и вы не знаете как, кликаем на “Предложения PageSpeed” и нас перекинет на страницу Google PageSpeed, где будут указаны рекомендации по оптимизации скорости данной страницы.

Бонус!

Есть хороший сервис по названием Pingdom. Который по функционалу не уступает WebPageSpeed, различие в том что тестировать можно только из 4 стран: У сервиса много своих оценок скорости сайта, также он сравнивает скорость загрузки вашего сайт с сайтами которые ранее тестировались в сервисе: Более детально вы можете ознакомиться на самом сайте: https://tools.pingdom.com/  

Выводы

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