Раскрывая секреты SEO: представляем полное руководство по скорости веб-сайта

Скорость важна как для пользователей, так и для SEO: никто не хочет ждать несколько секунд, пока сайт загрузится. Пользователи скорее покинут ваш сайт и перейдут к конкуренту, чем будут тратить время на ожидание. Цитата «время — деньги» так же актуальна сейчас, как и сто лет назад, когда ее произнес Бенджамин Франклин. Время также имеет значение для Google. Скорость — один из факторов ранжирования Google. При прочих равных, чем быстрее сайт, тем выше рейтинг. И никто не станет спорить с тем, что в наше время наличие быстрого веб-сайта не является необходимостью. Возникает вопрос: как сделать свой сайт быстрее? Нашим приглашенным автором в этой книге «Раскрывая секреты SEO» является Томек Рудзки, руководитель отдела исследований и разработок в Elephate, победитель в номинации «Лучшее маленькое SEO-агентство» на European Search Awards 2018. Рудзи предлагает советы по ускорению вашего сайта и выигрышу.

Это подробное руководство по скорости веб-сайта состоит из трех статей. Прочтите следующие посты здесь: Полное руководство по скорости веб-сайта — часть 2 и Полное руководство по скорости веб-сайта — часть 3.

Бесплатное исследование скорости страницы

1. Время – деньги

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

• В Pinterest поняли, что сокращение предполагаемого времени ожидания привело к увеличению количества регистраций на 15% .
• BBC заметила, что на каждую дополнительную секунду загрузки их сайта уходит 10% пользователей.
• Компания DoubleClick от Google исследовала, что сокращение времени загрузки страницы с 19 (максимально!) до 5 секунд привело к снижению показателя отказов на 35 % и увеличению продолжительности сеансов на 70 %.
• Исследование Amazon показывает, что всего одна секунда замедления загрузки веб-сайта может привести к падению продаж на 1,6 миллиарда долларов в год.

Вы можете сказать: «Хорошо, но меня не интересуют Pinterest, BBC или Amazon; расскажи мне о МОЕМ бизнесе». Google создал отличный инструмент, который рассчитывает влияние скорости на потенциальный доход . Я заполнил инструмент примерными данными: среднее количество посетителей в месяц 1 000 000, коэффициент конверсии 3,26%, средняя стоимость заказа 82 доллара.

Вы можете спросить: «Томек, почему ты выбрал именно эти данные: коэффициент конверсии 3,26, а не 1%, 4% или даже 10%?» Хорошо, я получил данные от Statista. Согласно их отчетам , средняя стоимость онлайн-заказов в США в 4-м квартале 2017 года (в долларах США) составила 82. Более того, средний коэффициент конверсии составил 3,26.

Кажется, что снижение скорости загрузки страницы с 5 до 2,8 с может привести к увеличению дохода на 1,97 миллиона долларов в год. Звучит отлично!

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

2. Всегда думайте о мобильных пользователях

По данным Statcounter, в феврале 2018 года более 55% пользователей подключались к Интернету через мобильные устройства или планшеты — впечатляющая статистика!

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

• убедитесь, что ваш веб-сайт нормально работает на мобильных устройствах (например, если он адаптивный)
• сделать сайт очень быстрым.

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

3. Используйте GTMetrix

Существует отличный инструмент, который подскажет вам, что вы можете улучшить, чтобы сделать ваш сайт быстрее. Вы можете бесплатно проверить любой сайт. Вам не нужно быть владельцем веб-сайта, чтобы начать аудит (например, я проверял Giphy.com). Инструмент сочетает в себе как данные, так и подсказки от Google PageSpeed ​​Insights и Yahoo Slow.

Стоит потратить время, чтобы перейти на https://gtmetrix.com/ и ввести URL-адрес своего веб-сайта.

Вы можете увидеть список рекомендаций о том, как улучшить скорость вашего сайта, щелкнув вкладку «PageSpeed» или «YSlow».

На данный момент большая часть информации на этих вкладках может быть непонятна, потому что она слишком техническая. Это нормально. Рим не сразу строился. Я сделаю все возможное, чтобы вы начали. Существует интересный раздел под названием «Водопад», который точно показывает, когда ресурсы (файлы JS и CSS, файлы изображений) были загружены и загружены.

Я настоятельно рекомендую вам получить учетную запись GTMetrix (это бесплатно!). Зарегистрированные пользователи могут настроить тест и изменить браузер и местоположение сервера. Более того, после входа в систему вы можете включить опцию «создать видео». Видео вариант отличный. Он показывает, как долго пользователям придется ждать, пока они не увидят визуальные изменения на вашем сайте.

Но не сходите с ума с GTMetrix

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

Например, GTMetrix рекомендует настроить кэширование браузером ресурсов, хранящихся на сервере Google Analytics или Facebook. По правде говоря, эти ресурсы вне вашего контроля – вы ничего не можете сделать . Разработчики Google и Facebook решили, что по какой-то причине эти ресурсы не должны кешироваться в течение длительного периода времени.

Конечно, есть много инструментов, похожих на GTMetrix, таких как WebPageTest (который намного мощнее, чем GTMetrix). Однако я решил познакомить вас с GTMetrix по двум причинам:

1. GTMetrix более удобен для пользователя
2. WebPageTest не дает четких рекомендаций, что делать.

Хочу отметить еще один интересный инструмент — Google Lighthouse (если вы используете Chrome, он у вас уже установлен). Камила Сподимек из Elephate написала отличную статью о том, как SEO-специалисты могут извлечь выгоду из показателей производительности Google Lighthouse . Определенно хорошее чтение!

4. Используйте сжатие GZIP

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

Вы можете уменьшить размер своих текстовых файлов (например, HTML, SVG, CSS и JS), внедрив сжатие GZIP. Довольно часто сжатие GZIP экономит 70-80% размера ресурса без потери информации. Это действительно большое дело!

Посетите https://checkgzipcompression.com/ , чтобы проверить, сколько килобайт вы можете сэкономить (или уже сэкономили!), внедрив GZIP. В случае с Searchmetrics.com включен GZIP (это позволило сэкономить 83% размера страницы). Звучит отлично!

Однако будьте осторожны! Иногда веб-мастера допускают ошибку и сжимают все статические файлы, включая изображения JPEG, PNG и PDF-файлы. Позвольте мне процитировать документацию Yahoo Developer Network : «Файлы изображений и PDF не следует архивировать с помощью gzip, поскольку они уже сжаты. Попытка сжать их с помощью gzip не только тратит ресурсы процессора, но и потенциально может увеличить размер файла».

Если вы хотите сэкономить дополнительные килобайты, также рекомендуется минимизировать файлы HTML, JS и CSS .

5. Подавайте масштабированные изображения

Это факт, что сайт будет загружаться очень медленно (особенно на мобильных телефонах!) из-за большого количества изображений.

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

Во-первых, давайте поговорим о масштабировании изображений. Допустим, на странице десять миниатюр размером 220×220, но вы загрузили на сервер изображения размером 800×800. Должны ли вы предоставлять пользователям уже масштабированные изображения или заставить браузер масштабировать их «на лету»?

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

6. Сжимайте изображения

Теперь поговорим о сжатии изображений. Это еще одна техника, которая обязательна для современного Интернета.

Как правило, существует два типа сжатия изображений:

• Lossless (делает работу действительно хорошо, можете быть уверены, что качество не пострадает).

• Lossy (обычно делает изображение более легким, но, как следует из названия: вы теряете часть качества).

Возникает вопрос: какой тип сжатия лучше: без потерь или с потерями?

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

7. Не заставляйте своих мобильных посетителей загружать фотографии в формате Full HD!

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

Давайте рассмотрим пример Elephate.com . У нас есть довольно большая фотография (2600 × 1463 пикселей) сотрудников нашей компании в верхней части нашей домашней страницы (522 КБ).

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

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