Repeater-zone.ru

ПК Репитер
1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

PHP-framework for landing pages

С помощью сервиса PageSpeed Insights можно быстро выявить проблемные зоны сайта, которые мешают занять высокие позиции в поисковом рейтинге.

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

Пример анализа PageSpeed Insights

Сервис проверки скорости загрузки сайта от Гугла

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

Вы уже сталкивались со страшилками о падении медленных сайтов в глазах поисковиков? Сколько же исследований проведено на эту тему! Результаты плачевные: если ваш проект загружается дольше [числов секундах], злой посетитель с криками и визгами убежит, так ничего и не купив. Как правило, специалисты ссылаются на какие-либо источники, но это не точно.

Кто проводит исследования

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

Несколько лет назад Google решил, что так жить нельзя и начал поголовно проверять скорость загрузки сайтов и наличие адаптации под мобильники. Результаты напугали владельцев сайтов, однако, страшного не произошло. Затем Google сообщил о внедрении Mobile First Index. Так называется новый подход в ранжировании страниц с учетом скорости загрузки и наличия мобильной версии.

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

Google

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

«Низкая скорость загрузки — негативный фактор ранжирования в Google». Сложно утверждать, если ты не Гугл.

«Если сайт загружается дольше трех секунд, 53% пользователей покинут его». Если 3 секунды мы наблюдаем белый экран или?

«У мобильной страницы, скорость которой снизилась с 1 до 10 секунд, показатель отказа вырос на 123%». Здесь сообщается, что конверсия скачет в диапазоне от двух до пяти секунд. Разница в 9 раз!
Этот пункт очень ситуативен. Пользователи мобильного интернета могут ожидать всего: туннель, помехи, удаленность, глюки сети и так далее. Поэтому, как правило, отношение более лояльное. 10 секунд смотреть на белый экран, увы, унылое зрелище.

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

SOASTA

«Каждая секунда задержки мобильной страницы снижает конверсию на 20%». Скажите это Фейсбуку.

Что-то проанализировав, SOASTA сообщает: скорость загрузки сайта влияет на конверсию. Цифры такие: страницы с высокой конверсией среднем быстрее «обычных» на 26%. Результаты исследования на чужом языке от 2017 года.

Search Engine Land

«Самые популярные сайты с большим трафиком не соответствуют критериям Google».

И таких сайтов немало. Гугловцы не могут просто взять и «опустить» популярные сайты, т.к. скорость загрузки — фактор не первостепенной важности. Если сайт интересен и полезен, его загрузки будут ждать сколько угодно долго.

В этом исследовании проверили 1000 самых популярных сайтов с помощью PageSpeed.
Стало известно, что 2% мобильных сайтов получили 100 из 100 баллов. Сто баллов? При нынешних попугаях этого сервиса их не получит даже пустая html-страница 😉
На версиях для пк всего 4% набрали 90 баллов.
Средний показатель составил 55 баллов, средняя скорость загрузки страницы — 11 секунд. Это частично подвергает сомнению утверждение «53% пользователей покидают сайт. «

User Interface Engineering

«Если пользователи жалуются на скорость загрузки, то на самом деле проблема в другом».

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

WP Faster

«Скорость загрузки не входит в восьмерку главных показателей эффективности сайта».

Несложно проверить: найдите сайты в топ 3 по любым запросам и проверьте их скорость.

В 2018 году продолжает держать позиции упор на юзабилити. Пусть грузится дольше, зато плавно и не дергается.

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

Кто прав? Уже пора бояться?

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

Читать еще:  Как очистить список часто посещаемых страниц в Мозиле

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

Лендинги и промо — монстры графики. Если требуется представить новый продукт во всех красках, без графики, видео, анимаций не обойтись. Это будет грузиться долго, но красиво. Странцы розыгрышей призов тоже будут посещать постоянно.

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

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

Нужно ли ускорять мой сайт?

Да, не помешает. Если ваш проект действительно долго грузится и содержит какие-либо существенные недоработки. Например, вы можете уменьшить вес картинок на сайте, сжать и объединить скрипты, включить GZIP и т.д.
Наличие мобильной версии — точно плюс. В эпоху удобных сайтов она жизненно необходима. Просто подумайте о том, что мобильным интернетом пользуется более половины населения РФ.

Что рекомендует Google?

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

  • Убедиться в наличии всего важного на мобильной версии. Вырезайте лишнее, оставляйте самое важное.
  • Структурированные данные следует использовать на любой версии сайта.
  • Мета-данные обязательны для обеих версий сайта.
  • Можно применять разные rel=canonical и rel=alternate для каждой версии.

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

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

Можно выделить 5 основных причин, которые замедляют работу сайта. Разберемся, что делать с каждой из них.

1. Страницы большого размера

Чтобы сократить объем данных, передаваемых в браузер пользователя, используйте сжатие GZIP. Это позволит уменьшить размер веб-файлов на 70% без ухудшения их качества. Проверить, доступен ли этот метод сжатия для вашего сайта, можно с помощью сервиса GiftOfSpeed или GTmetrix.

2. «Тяжелые» изображения

Изображения большого размера и разрешения значительно тормозят загрузку страницы. Чтобы этого избежать, используйте JPEG картинки вместо PNG — они весят в 5 раз меньше, не уступая при этом в качестве. Уменьшить размер изображения вы можете с помощью любого онлайн-оптимизатора: Optimizilla, Compressor, Imagify, TinyPNG и т.д. Или, например, можно прогнать картинку через Photoshop и сохранить ее в специальном формате, предназначенном для веб-сайтов. Главное — не переусердствовать и найти золотую середину между качеством и размером файла.

3. Много запросов от браузера

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

  • Удалить лишние изображения, JS-файлы, коды сторонних сервисов.
  • Объединить несколько небольших элементов (иконки, кнопки) в один CSS-спрайт с помощью CSS Sprites generator, CssSpritegen, Spritebox или любого другого генератора.
  • Использовать кэширование. Каждый раз, когда человек заходит на сайт, его браузер загружает все веб-файлы с сервера. Если включить кэширование, браузер сохранит данные на компьютер пользователя и при повторных визитах будет загружать их уже оттуда. Вы можете подобрать себе кэш-плагин для ускорения работы сайта в зависимости от того, какая у вас CMS. Например, для WordPress подойдут WP Super Cache, W3 Total Cache, Hyper Cache.
Читать еще:  Скачать DVDFab Virtual Drive бесплатно на компьютер

4. Перегруженный код JavaScript и CSS

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

  • Сократить название функций и почистить код с помощью специальных сервисов, например: JavaScript/CSS/HTML Compressor, CSS Compressor, JSCompress.
  • Разместите CSS-файлы в самом начале страницы — так она будет отображаться постепенно, по компонентам.
  • Вынесите JS-файлы в конец страницы. Благодаря этому браузер будет сначала загружать контент страницы, а и уже потом скрипты.

5. Большое расстояние между сервером и пользователем

Чем дальше от компьютера находится сервер вашего хостинг-провайдера, тем медленнее загружается сайт. «Сократить» это расстояние помогут сети доставки контента CDN: Amazon CloudFront, Incapsula, Akamai и другие. Когда человек заходит на сайт, CDN загружает веб-файлы со своего сервера, находящегося ближе всего к пользователю. Эта схема прекрасно иллюстрирует принцип работы CDN-сетей:

6. Медленный хостинг

Если вы попробовали все описанные выше советы, а скорость сайта оставляет желать лучшего, проверьте время ответа сервера. Например, это можно сделать в отчете Google Analytics «Скорость загрузки сайта» → «Обзор»:

Среднее время ответа сервера в Google Analytics

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

Pingdom

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

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

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

Сервис собирает статистику скорости за период времени и предоставляет подробный отчет об ошибках. Тип проверки можете выбрать сами: HTTP(S), TCP port, Ping, DNS, UDP, SMTP, POP3 and IMAP.

Самый большой минус Pingdom — то, что сервис платный. Цены начинаются с $9,95 в месяц.

Плюсы и минусы

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

  • быстрый способ определить уровень производительности сайта;
  • выяснить конкретные показатели скорости загрузки можно при помощи Netpeak Spider, который анализирует параметры загрузки контента и ответ сервера;
  • обновленный интерфейс содержит разделы «Диагностика» и «Оптимизация», в в которых собраны возможные проблемы, а также пути их решения;
  • возможность оценить качество работы каждой из страниц сайта по отдельности;
  • для сайтов на Word Press есть дополнительная удобная функция в разделе «Оптимизация» есть прямые ссылки на Кодекс Word Press, а также каталог готовых плагинов.
  • скорость загрузки сайта проверяется преимущественно в режиме имитации, а не для браузера реального пользователя;
  • многие показатели, которые нужны для получения максимальных 100 баллов не обязательно нужны для оптимизации.

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

Метрики, сконцентрированные на пользователе

Сам обновленный алгоритм Lighthouse 6.0 представили год назад. Это автоматизированный инструмент для измерения качества веб-страниц. Он поддерживает многие сервисы Google, в том числе PageSpeed Insights.

Его метрики, которые скоро станут факторами ранжирования, в Google называют User-Centric Performance Metrics, то есть сконцентрированные на пользователе. Потому что они сфокусированы не на загрузке страницы, а на том, как пользователь воспринимает эту загрузку.

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

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

Возьмем два сайта:

разница в восприятии загрузки

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

Читать еще:  Где скачать драйвера для принтера Canon PIXMA MP140

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

Google выделяет несколько ключевых элементов в процессе загрузки:

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

Главные метрики от Google

Используя эти знания компания выработала ряд метрик:

    . «Время до первого байта» репортит время, необходимое браузеру для получения первого байта контента страницы.
    Больше об этой метрике, и как ее оптимизировать читайте в статье. . «Первое полное отображение». Эта метрика измеряет время от старта загрузки до момента, когда пользователь видит хоть что-то. . «Наибольшее полное отображение». Время до полного отображения наибольшего элемента на странице. . «Сдвиг шаблона» определяет суммарный сдвиг объектов на странице (при загрузке и после). . «Задержка первого ввода» измеряет время от первого действия пользователя до момента, когда браузер способен начать обрабатывать это действие. . «Общее время блокирования», в течение которого long tasks (задачи длительнее 50 мс) блокируют главный поток и влияют на юзабилити страницы. TBT измеряет, что происходит между FCP и TTI. . «Время до интерактивности» показывает, сколько времени проходит до момента полной интерактивности. . «Индекс скорости» измеряет, как быстро контент визуально отображается во время загрузки экрана.

И Google замеряет их вместе с load event, чтобы оценить поведение страницы при загрузке.

Три метрики выделены в группу Core Web Vitals и будут использоваться в ранжировании:

  • LCP;
  • FID;
  • CLS.

Но на процесс загрузки нужно смотреть в целом, а не только оптимизировать метрики Web Vitals. И вот почему.

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

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

  • большие картинки на сайте. Если у вас на страницах сайта есть большие картинки, которые долго загружаются, то это может очень сильно снижать скорость загрузки. Старайтесь, чтобы размер одной картинки не превышал 70 Кб;
  • медленная скорость работы сервера, то есть плохой хостинг. В этом случае надо найти более быстрого хостинг-провайдера. Какого хостинг-провайдера выбрать, я писал в статье: Мой рейтинг лучших хостингов и их официальная статистика;
  • медленная работа базы данных. Необходимо периодически оптимизировать и чистить базу данных вашего блога.

На самом деле причин медленной работы вашего сайта огромное множество и узнать их все вам как раз и помогут сервисы, про которые я писал ранее: webpagetest.org, Google Pagespeed Insights. К сожалению, оба эти сервиса только на английском языке.

Google Pagespeed Insights

Google Pagespeed Insights дает подробные рекомендации по увеличению скорости вашего сайта и он интегрирован в Гугл Аналитикс. Его вы можете найти в отчете ПОВЕДЕНИЕ > Скорость загрузки сайт > Ускорение загрузки . Этот отчет дает информацию по улучшению каждой страницы сайта, переадресовывая вас на Google Pagespeed Insights.

Webpagetest.org

Google Pagespeed Insights очень хороший отчет и им надо обязательно пользоваться, но мне больше нравится webpagetest.org. Запускать этот отчет можно для любого европейского города, потому что измерение скорости загрузки сайта для России сейчас почему-то недоступно, а раньше можно было измерять скорость загрузки в Москве. Этот отчет раскладывает скорость загрузки сайта на мельчайшие элементы и очень наглядно представляет их в таком виде:

Отчет о скорости загрузки сайта webpagetest.org

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

голоса
Рейтинг статьи
Ссылка на основную публикацию
ВсеИнструменты
Adblock
detector