Разрешить предварительную загрузку страниц для повышения скорости браузера и поиска
Обновлено: 05.07.2024
Веб-дизайн и разработка — это постоянно активные усилия. Это не просто заканчивается, когда вы запускаете свой веб-сайт, потому что, конечно, такие проблемы, как медленная загрузка страниц, возникнут позже. Это именно то, на чем будет сосредоточено наше обсуждение.
Посмотрите эту вводную сессию, пока читаете статью:
Прежде чем мы начнем обсуждение, давайте проведем небольшой эксперимент. Перейдите на страницу своего бренда/компании и проведите тест скорости сайта. Сайт загружался почти мгновенно? Всего несколько секунд? Или это было – не дай бог – больше шести секунд?
Если у вас меньше четырех секунд, вот вам кибер-дай пять. Но если скорость загрузки вашей страницы намного выше, позвоните в свое SEO-агентство и попросите его провести тщательный технический SEO-аудит и повторно проверить элементы, которые могут замедлять загрузку.
В этом нетерпеливом и быстро меняющемся мире заставлять аудиторию ждать, пока загрузится ваш веб-сайт, — преступление. 40 % людей покидают веб-сайт, если скорость загрузки сайта превышает 3 секунды, а каждая секундная задержка производительности вашей страницы может привести к потере коэффициента конверсии на 7 %.
Это приводит не только к мгновенному эффекту, например, к потере возможностей продаж для тех, кто решил покинуть сайт, но и к тому, что высокий показатель отказов приведет к снижению рейтинга сайта, что отрицательно скажется на коэффициенте конверсии в будущем.
На этом кошмар не заканчивается, потому что боты Google тоже ненавидят ждать. С апреля 2010 года скорость вашего сайта является фактором ранжирования для Google. Это также важный фактор, когда речь идет о ранжировании в мобильном поиске.
Из-за растущего числа активных мобильных пользователей важно убедиться, что ваш веб-сайт оптимизирован для экранов мобильных устройств и поисковых запросов. Будет преуменьшением сказать, что скорость загрузки страницы должна быть частью вашего контрольного списка поисковой оптимизации.
Почему мой сайт загружается медленно?
Существуют различные причины, по которым загрузка веб-сайта занимает много времени. Вот список возможных причин медленной работы вашего сайта:
Со всеми этими вероятными причинами, с чего начать? Не волнуйтесь, мы рассмотрим их один за другим.
Но прежде чем приступать к устранению неполадок, чтобы оптимизировать скорость вашего веб-сайта, вам нужно сначала узнать, какое время загрузки вашей страницы считается хорошим.
Что такое хорошее время загрузки страницы?
По данным Google, оптимальное и идеальное время загрузки страницы – три секунды. Тем не менее, согласно недавним отчетам о сравнительном тестировании, многие сайты и близко не соответствуют этому уровню, поскольку для загрузки большинства из них требуется семь секунд.
Затем Google проанализировал 1 миллион целевых страниц мобильных объявлений в 213 странах и обнаружил, что для загрузки всего визуального содержимого в верхней части экрана 70 % страниц требуется более 7 секунд. Таким образом, хорошее время загрузки страницы может составлять в лучшем случае 3 секунды, а в крайнем случае – 7 секунд.
Почему скорость страницы важна в веб-дизайне и разработке?
Возможно, вам интересно, почему важна скорость страницы. Есть два фактора, которые, по нашему мнению, важны для скорости загрузки страницы: взаимодействие с пользователем и рейтинг страницы.
Согласно исследованию, проведенному Pingdom , веб-сайты с более длительным временем загрузки, как правило, имеют более высокий показатель отказов и меньшее среднее время пребывания на странице. Обе эти метрики напрямую связаны с пользовательским опытом, показывая, что посетителю не понравилось его/ее пребывание на вашем веб-сайте (мало времени на странице), поэтому они просто ушли (отказы). Кроме того, более длительное время загрузки также может негативно сказаться на конверсиях из-за неудовлетворенности пользователя.
Говорят, Google использует скорость страницы как один из сигналов, используемых его алгоритмом для ранжирования страниц. Низкая скорость страницы может означать, что веб-пауки могут сканировать меньше страниц, используя свой краулинговый бюджет, что может негативно повлиять на вашу индексацию. Исследование скорости страницы Moz показало, что Google измеряет время до первого байта, когда учитывает скорость страницы.
Если вы думаете, что скорость страницы была просто мифом, подумайте еще раз.
Советы по веб-дизайну и разработке: как повысить скорость страницы вашего веб-сайта
Поначалу повышение скорости вашего веб-сайта может быть ошеломляющим, но не волнуйтесь, мы были в такой же ситуации.
Несколько лет назад на нашем веб-сайте была проведена полная реконструкция. Мы сосредоточились на том, чтобы предоставить нашей аудитории лучший пользовательский опыт и привлекательные визуальные эффекты. Когда мы, наконец, запустили его, мы провели тест скорости веб-сайта Google и увидели, что пользователям требуется 18 секунд, чтобы увидеть наш веб-сайт. Душераздирающе.
Как надежное агентство цифрового маркетинга на Филиппинах, мы не хотели мириться с черепашьей скоростью загрузки страниц. Какая польза от потрясающих визуальных ресурсов, привлекательных копий и всех наших усилий на этом веб-сайте, если все уже расстроены, ожидая, пока все загрузится. Не входит в наши планы.
Вот как мы проверили и оптимизировали скорость страницы Propelrr:
Узнав, что у нашего веб-сайта низкая скорость страницы, мы решили начать проект по оптимизации скорости страницы. Мы собрали нашу команду веб-дизайнеров и разработчиков, а также специалистов по поисковой оптимизации, чтобы выработать стратегию решения этой проблемы.
Какие показатели скорости страницы мы используем?
Во-первых, мы начали с анализа эффективности на основе правильных показателей:
- Время до первого байта — количество времени, которое требуется браузеру для получения первого байта информации с сервера сайта;
- Первая отрисовка — сколько времени требуется, прежде чем пользователь увидит что-либо, кроме пустой страницы, например элемент цвета фона;
- Первая значимая отрисовка — сколько времени требуется, прежде чем пользователь увидит что-то важное для него, например изображение баннера или текст заголовка;
- Время взаимодействия – сколько времени до того, как пользователь, просматривающий сайт, сможет взаимодействовать с элементами сайта; и
- Каскад загрузки ресурсов — показатель времени, необходимого для передачи всех ресурсов веб-страницы с сервера в веб-браузер.
Это позволило нам определить возможности для улучшения и узнать, какие методы нам необходимо внедрить.
Какие инструменты тестирования производительности страницы нам следует использовать?
Чтобы узнать, как протестировать скорость загрузки веб-сайта и проверить эти ключевые показатели, вам помогут следующие инструменты:
Как улучшить скорость загрузки страницы
Чтобы оптимизировать скорость загрузки страниц веб-сайта, мы спланировали и применили следующую методологию:
1. Включить сжатие (через Gzip)
Когда браузер загружает ваш веб-сайт, он фактически сначала загружает ресурсы с сервера. Если у вас есть файлы размером более 150 байт, браузеру требуется больше времени для загрузки, что замедляет загрузку вашей страницы. При этом настоятельно рекомендуется сжимать файлы размером более 150 байт. Разработчики Apache могут легко сделать это, поместив следующий код в ваш файл .htaccess:
Для серверов Nginx отредактируйте основную конфигурацию вашего сервера Nginx, разместив следующий код, и перезагрузите Nginx, чтобы все изменения вступили в силу:
Включение сжатия больших файлов позволяет вашему сайту быстрее загружать ресурсы. Однако сжатие следует использовать только для файлов, отличных от изображений, поскольку это влияет на качество ваших изображений.
2. Оптимизация изображений
Использование оптимизации изображений на вашем веб-сайте увеличит время загрузки страницы. Оптимизация изображений также повысит рейтинг в поисковых системах.
Есть три рекомендации по оптимизации изображений на вашем веб-сайте для ускорения загрузки страницы.
<р>1. Использование прогрессивных изображений. Прогрессивный JPEG кодирует изображение в несколько сканирований. При первом сканировании полное изображение отображается в низком качестве, и для каждого последующего рендеринга качество изображения улучшается. <р>2. Подавайте изображения на основе медиа. Например, у вас может быть три разных изображения, предназначенных для настольных компьютеров, планшетов и мобильных устройств. Чтобы реализовать это правильно, вам нужно использовать тег изображения HTML5 и определить источники. Обратитесь к этому коду для примера:
3. Оптимизируйте доставку Javascript и CSS
Оптимизация доставки JavaScript и CSS важна, поскольку она также оптимизирует критический путь отрисовки. Критический путь рендеринга — это ряд событий, которые происходят в фоновом режиме до фактического отображения содержимого вашей веб-страницы.
Он определяет необходимые события, которые заставляют верхнюю часть вашей веб-страницы отображаться в вашем браузере. Оптимизация критического пути рендеринга может сократить время загрузки страницы на несколько очень важных секунд.
Как выполнить оптимизацию Javascript
Для этого необходимо уменьшить количество ресурсов JavaScript, загружаемых браузером, и свести к минимуму размер загружаемого кода JavaScript. Просто объедините все важные файлы библиотеки JavaScript (например, jQuery.js, zepto.js) в один файл JavaScript. Вы можете минимизировать этот файл, чтобы уменьшить размер загружаемого файла.
Для всех остальных сценариев JavaScript, которые не требуется загружать во время критического пути рендеринга, поместите их все внизу структуры HTML, непосредственно перед закрытием
< бр />
Чтобы сделать Интернет удобнее для всех, необходимо использовать все возможности для повышения производительности веб-сайта. В этой статье мы рассмотрим подсказки браузера, такие как prefetch и prerender, а также более новую директиву preload, чтобы увидеть, как они потенциально могут повысить производительность. Мы также принимаем во внимание, что это означает для синтетического и реального мониторинга браузера.
Что такое подсказка для браузера и как она помогает повысить производительность в Интернете?
Подсказки браузера (также называемые подсказками ресурсов и спекулятивной выборкой) не являются чем-то новым; Mozilla представила предварительную выборку в 2006 году в своем браузере Firefox. Подсказка браузера сообщает браузеру о возможных будущих переходах. Подсказки браузера позволяют браузеру использовать время простоя для извлечения или подготовки к извлечению ресурсов в ожидании следующего действия пользователя. Браузер решает, будет ли он обрабатывать подсказку, исходя из устройства пользователя, доступной пропускной способности и других переменных среды. Подсказки браузера имеют очень низкий приоритет, а иногда браузер полностью их игнорирует.
В эту статью мы включили наиболее часто используемые типы, но вы можете найти полный список возможных типов на W3Schools. Варианты подсказок браузера включают:
Предварительная выборка
Предварительная выборка — это предложение браузера, означающее, что URL-адрес является наиболее вероятной целью следующего перехода. Браузер, если он решит действовать в соответствии с подсказкой, помещает ответ в кеш устройства и не будет выполнять какую-либо обработку ответа. Например, в процессе оформления заказа пользователь находится на странице, где просматривает содержимое своей корзины. На следующей странице собрана информация о доставке и предпочтениях. Вы можете улучшить производительность страницы доставки, заставив браузер извлекать некоторые ресурсы, необходимые для страницы доставки, пока пользователь рассматривает свою корзину. Как только посетитель перейдет на страницу доставки, браузеру нужно будет только извлечь ранее полученные ресурсы из кеша браузера.
Предварительная обработка
Предварительная обработка аналогична предварительной выборке, за исключением того, что предварительная обработка извлекает всю страницу вместо назначенных ресурсов. Prerender указывает браузеру обработать контент и сохранить его в памяти устройства. При использовании предварительной визуализации вы хотите быть уверены, что посетитель перейдет на предварительно обработанную страницу; в противном случае вы перегружаете свой сервер и тратите впустую тарифный план и пропускную способность вашего посетителя.
Предварительная выборка DNS (dns-prefetch)
Предварительная выборка DNS работает так же, как и обычная предварительная выборка, но разрешает только DNS. Подсказка сообщает браузеру, что он должен разрешить DNS для будущей навигации пользователя. Выполнив этот необходимый круговорот раньше, вы сможете сэкономить драгоценное время, затрачиваемое на обработку переднего плана.
Предварительное подключение
Это продвигает предварительную выборку DNS немного дальше и сообщает браузеру, что нужно продолжить и разрешить DNS, установить TCP-подтверждение и согласование TLS (если есть) для следующего перехода пользователя.
Следующее и предыдущее
Если страница является частью серии страниц, например фотогалереи, статьи, занимающей несколько страниц, или каталога товаров с нумерацией страниц, подсказки "следующая" и "предыдущая" сообщают браузеру о возможной навигации пользователя в будущем. Кроме того, Google использует следующую и предыдущую для улучшения индексации страниц серии.
Предварительная загрузка или декларативная выборка
Подсказки браузера, как описано выше, сообщают браузеру, что следующей странице могут понадобиться эти ресурсы, но предварительная загрузка сообщает браузеру, что ему нужен ресурс для текущей страницы. Предварительная загрузка заставляет браузер извлекать ресурс как можно скорее, а не ждать, пока ресурс понадобится позже на странице. Например, ресурс может находиться не в HTML, а глубоко в файле CSS или скрипте, и ожидание загрузки файла CSS или скрипта, а затем извлечение ресурса тратит впустую драгоценное время загрузки.Директива preload заранее сообщает браузеру о ресурсе, чтобы он мог получить ресурс как можно скорее. Предварительная загрузка особенно полезна при использовании веб-шрифтов.
< /p>
Отмеченные преимущества использования предварительной загрузки
Эдди Османи, инженер Google, написал отличную статью о предварительной загрузке и сообщил о нескольких примерах использования, в которых директива предварительной загрузки значительно повысила производительность.
Использование подсказок браузера и предварительная загрузка на вашем сайте
Браузер устанавливает приоритет ссылки на основе атрибута отношения. Prefetch, prerender, preconnect, next и prev получают низкий приоритет, в то время как preload может иметь высокий приоритет в зависимости от атрибута ссылки предварительной загрузки as. Если атрибут «as» отсутствует, ресурс получает высокий приоритет, в то время как as=«script» может быть понижен до среднего или низкого приоритета. Существует множество возможных типов директив:
- as="аудио"
- as="видео"
- as="шрифт"
- as="сценарий"
- as="изображение"
Вы можете просмотреть полный список типов атрибутов "as" в рекомендации W3C Candidate Preload.
Как упоминалось ранее, браузерные подсказки (не предзагружаемые) обычно имеют очень низкий приоритет. Вы можете повысить вероятность того, что браузер распознает подсказку, установив атрибут «pr». Атрибут «pr» сообщает браузеру вероятность того, что ему понадобится ресурс, ранжируя его от 0 до 1. Например, приведенный ниже тег ссылки имеет 80%-ю вероятность того, что он понадобится для следующей навигации.
Как подсказки и директивы браузера влияют на мой мониторинг?
Вы можете задаться вопросом, как предварительная загрузка и подсказки браузера влияют на результаты мониторинга. Эффект, если он есть, зависит от типа монитора. Такие типы мониторов, как SSL, DNS и мониторы внешних серверов, никак не затрагиваются, поскольку они не используют веб-браузер, но ваш Мониторинг реальных пользователей и некоторый Синтетический мониторинг могут показать некоторые различия. Когда монитор использует настоящую технологию браузера, вся страница загружается в собственный браузер (Chrome, IE, Firefox, Phantom JS) с помощью контрольной точки точно так же, как это делают ваши реальные пользователи при доступе к вашему сайту, поэтому любые подсказки или директивы также будут обработаны. и может повлиять на производительность некоторых типов мониторов.
Подсказки для браузера
Поскольку подсказки браузера, такие как prefetch и dns-prefetch, не выполняются до тех пор, пока не загрузится текущая страница, ваши полноценные проверки страниц и мониторинг доступности не будут показывать каких-либо различий в производительности (это потому, что мы начинаем каждую синтетическую проверку с чистым кешем). Мониторы транзакций, охватывающие несколько страниц, могут демонстрировать улучшенную производительность после первоначального запроса навигации, если первая страница содержит подсказки браузера. Поскольку подсказки браузера — это всего лишь предложения, вы можете увидеть сдвиги в производительности в зависимости от того, решил ли браузер следовать предложению или нет.
Предварительная загрузка
Подсказка браузера необязательна для браузера, но директива предварительной загрузки — это не просто предложение для браузера, а требование, поэтому браузер должен следовать директиве для получения ресурса. Директива preload заставляет браузер извлекать ресурс асинхронно, в то время как он загружает остальную часть страницы, поэтому ваши реальные мониторы браузера, такие как Full Page Check и мониторы веб-приложений, надеюсь, увидят повышение производительности. Предварительно загруженный ресурс появится раньше в каскадном отчете Full Page Check. В приведенном ниже примере водопада ресурс 3 представляет собой файл сценария. Ресурсы 4 и 5 также являются файлами сценариев, но 4 и 5 используют директиву предварительной загрузки, а ресурс 3 — нет. Файлы сценариев блокируют рендеринг, что означает, что браузер ждет, пока ресурс завершит загрузку, прежде чем запрашивать следующий ресурс (обратите внимание, что ресурс 6 не запускается, пока не завершится ресурс 3). Поскольку ресурсы 4 и 5 используют директиву preload, браузер может загрузить их, пока обрабатывается предыдущий блокирующий рендеринг ресурс. Без директивы preload эти скрипты не будут загружаться до определенного момента и тоже станут элементами, блокирующими отрисовку.
А как насчет моего мониторинга реальных пользователей?
Real User Monitoring (RUM) работает на основе скрипта, расположенного на каждой отслеживаемой странице. Если пользователи входят на страницу напрямую, они не получат преимуществ от каких-либо подсказок браузера, но увидят улучшения, основанные на директивах предварительной загрузки. Оказавшись на вашем сайте и если последующая страница также включена RUM и использует ресурсы, определенные на текущей странице пользователя, пользователь должен увидеть улучшения, и эти улучшения производительности повлияют на ваши результаты мониторинга реальных пользователей.Поскольку Uptrends объединяет ваши данные об эффективности, в ваших отчетах будут отображаться результаты эффективности для каждого посетителя страницы, а не только для тех, кто пришел со страниц с подсказками браузера для этой страницы.
Примечание о предварительном рендеринге
При выполнении предварительной выборки ресурс извлекается и сохраняется в кеше браузера, но браузер не обрабатывает ресурс до тех пор, пока он ему не понадобится. Для подсказки предварительной обработки браузер загружает и полностью обрабатывает страницу, а затем сохраняет всю страницу в кэше. Microsoft описывает этот процесс как открытие страницы в скрытой вкладке браузера со всеми загруженными ресурсами, созданным DOM, макетом страницы, примененным CSS и выполненным JavaScript. Если пользователь переходит на предварительно обработанную страницу, отображается скрытая страница, и пользователю кажется, что она загрузилась мгновенно. Мгновенная загрузка хороша для конечного пользователя, но если вы используете предварительную визуализацию на странице, которая использует аналитику, и пользователь фактически никогда не переходит на предварительно обработанную страницу, ваши аналитические отчеты все равно могут зарегистрировать просмотр страницы, поскольку файл сценария был выполнен как часть процесс пререндеринга. Хотя предварительная обработка имеет ограниченную поддержку браузера (см. таблицу ниже), если ваши посетители используют браузер, поддерживающий предварительную визуализацию, и браузер выбирает выполнение предварительной обработки, в ваших отчетах будет отображаться просмотр страницы.
Заключительные мысли
Подсказки для браузера, если их использовать ответственно, — это мощный способ улучшить взаимодействие пользователей с вашим сайтом. Вам нужно тщательно рассмотреть варианты, чтобы не злоупотреблять пропускной способностью и тарифным планом пользователя, и вы не хотите создавать чрезмерную нагрузку на свои серверы. У Сержио Гомеса, разработчика Google, есть отличная статья о подсказках для браузера, в которой содержится множество дополнительных советов и предостережений, которые вы должны учитывать, прежде чем использовать некоторые из этих оптимизаций в своем коде.
Вы увидите прирост производительности для предварительной загрузки в каскадных отчетах "Проверка всей страницы", а посетители вашего сайта увидят улучшения, которые могут сделать подсказки браузера, когда они просматривают ваш сайт. В конце концов, именно качество пути пользователя удерживает его на вашем сайте и заставляет возвращаться. Улучшите их путешествие с помощью директив предварительной загрузки и подсказок браузера и обеспечьте быстрое и успешное путешествие с помощью мониторинга от Uptrends. С Uptrends вы узнаете момент, когда на вашем веб-сайте, веб-службе или API возникнет проблема. Раннее предупреждение с помощью многочисленных опций оповещений Uptrends может помочь вам свести к минимуму простои, сохранить производительность и сделать ваших пользователей счастливыми.
Скорость страницы имеет значение! Если ваша страница загружается медленно, это влияет на удобство пользователей, показатель отказов, эффективность поиска и доход.
Скорость сайта уже давно является фактором ранжирования Google. Патент Google на скорость сайта был выдан 4 февраля 2014 года. После того, как основное внимание было уделено времени загрузки страниц на настольных компьютерах, в 2018 году скорость мобильных страниц стала фактором ранжирования в рамках обновлений Google Speed Update.
Ведущая поисковая система планирует завершить переход на индексирование в первую очередь для мобильных устройств к марту 2021 года. Поэтому как никогда важно уделять пристальное внимание скорости загрузки мобильной страницы. Но не верьте мне на слово. Вот что думает Google…
Сайты, которые загружаются быстро, показывают лучшие результаты по целому ряду маркетинговых и SEO-показателей, независимо от того, смотрите ли вы на обычные результаты поиска, взаимодействие с сайтом, коэффициент конверсии, показатель отказов, отказы или лояльность.
Согласно исследованиям Google и Deloitte, увеличение скорости загрузки страницы на 0,1 секунды может повысить коэффициент конверсии на 8%.
53% пользователей отказываются от просмотра после 3-секундной задержки на мобильных устройствах
На более быстрых сайтах продолжительность сеанса увеличивается на 70 %
Показатели отказов на быстрых веб-сайтах в среднем на 35 % ниже
Другое исследование Google показало, что 53 % веб-пользователей покидают сайты с задержкой более трех секунд на мобильных устройствах. При сравнении более быстрых мобильных веб-сайтов с более медленными сайтами в исследовании, более быстрые сайты показали, что средняя продолжительность сеанса была на 70% больше, а показатель отказов был на 35% ниже. Более быстрые мобильные сайты приносили почти вдвое больше дохода, чем сайты, загрузка которых занимала больше времени.
Ускоренная загрузка страниц дает серьезные преимущества, когда речь идет о повышении производительности веб-сайта, в том числе о большем количестве просмотров страниц, более высоких коэффициентах конверсии и большем доходе.
Google Core Web Vitals (CWV)
Web Vitals — это инициатива Google, которая предоставляет рекомендации по качественным сигналам, указывающим на "отличное" впечатление от сайта.
Core Web Vitals — это подмножество Web Vitals.Каждый из Core Web Vitals представляет один элемент взаимодействия с пользователем. Каждая метрика может быть измерена на любой активной веб-странице («Мониторинг реальных пользователей») и обеспечивает ориентированные на пользователя результаты, связанные со временем загрузки страницы и доступностью страницы. Кроме того, Google заявил, что Core Web Vitals со временем станет естественным фактором ранжирования.
Ожидайте, что конкретные Google Core Web Vitals будут развиваться и меняться со временем. Однако на момент написания этой статьи Google в основном сосредоточился на следующих трех показателях взаимодействия с пользователем:
-
: измеряет производительность загрузки и должен произойти в течение 2,5 секунд после начала загрузки страницы. : измеряет время до интерактивности и должно быть менее 100 миллисекунд. : Измеряет визуальную стабильность и должен быть меньше 0,1.
Если вы хотите полностью ознакомиться с исследованиями и методологией, лежащими в основе Google Core Web Vitals, прочитайте статью Google «Определение пороговых значений показателей Core Web Vitals». В статье рассматриваются другие важные показатели скорости страницы, такие как время до первого байта (TTFB) и первая отрисовка содержимого (FCP), которые помогают выявить проблемы, связанные с медленным временем отклика сервера или ресурсами, блокирующими отрисовку.
Как сократить время загрузки страницы
8. Очистите свою медиатеку
Вполне вероятно, что со временем ваша медиатека загромождается старыми или неиспользуемыми изображениями. Это просто засоряет ваш сайт. Очистите свою медиатеку, удалив ненужные изображения и другие медиафайлы, чтобы сократить среднее время загрузки страницы.
9. Очистите базу данных
Как и ваша медиатека, ваша база данных может со временем раздуваться из-за неиспользуемой информации, такой как фотографии, файлы и т. д.
Оптимизация базы данных — это процесс выявления и удаления ненужных данных и неиспользуемого контента из вашей базы данных. В свою очередь, это помогает вашему серверу веб-хостинга более эффективно получать запрашиваемую информацию.
10. Удалите JavaScript, блокирующий рендеринг
Когда ваши веб-страницы загружаются в браузере, вызов отправляется каждому сценарию, часто по другим URL-адресам. Эта очередь сценариев должна быть завершена и очищена до того, как страница станет видимой для пользователя. Файлы JavaScript, блокирующие отрисовку, становятся серьезным препятствием в этих очередях, так как их загрузка может занять некоторое время, блокируя отрисовку основного контента на странице в течение этого времени.
По умолчанию веб-браузеры загружают ресурсы в порядке их появления в HTML. Иногда, когда ресурсы требуют много вычислительных ресурсов на устройстве пользователя, они могут вызвать существенную задержку визуального рендеринга страницы. Однако многие из этих скриптов не нужны для первоначального просмотра веб-страницы. Во многих случаях было бы нормально, если бы эти скрипты запускались после загрузки страницы.
Чтобы решить эту проблему, настройте асинхронную загрузку JavaScript, блокирующего рендеринг, или удалите неиспользуемые или неважные скрипты (или неиспользуемые части ресурсов JavaScript).
11. Используйте заголовки с истекающим сроком действия
Заголовки Expires сокращают количество загрузок сервера для повышения скорости страницы.
12. Избегайте переадресации URL
Перенаправление URL – это инструкция или метод, который автоматически переводит пользователя с одного URL на другой. Существуют разные способы реализации редиректа. Перенаправление 301 — это метод, используемый для сохранения SEO-ценности страницы переадресации. Но независимо от типа редиректа, этот процесс замедляет скорость вашей страницы, так как для перехода от одного файла к другому требуется время. Поэтому по возможности старайтесь избегать или минимизировать количество переадресаций URL.
8 инструментов для тестирования времени загрузки страницы
Не то чтобы вы знали основы оптимизации скорости веб-сайта, вам потребуются правильные инструменты.
Чтобы проверить время загрузки ваших веб-страниц, используйте один из следующих бесплатных онлайн-инструментов. Многие из этих инструментов анализа скорости страницы также имеют платные версии. Однако наш обзор сосредоточен на их бесплатных предложениях, где требуется только URL-адрес.
Тест скорости веб-сайта Pingdom
Тест скорости веб-сайта Pingdom – это комплексный инструмент для тестирования времени загрузки страницы. Вы можете использовать бесплатную версию для проверки времени загрузки страницы с семи серверов в разных местах по всему миру, чтобы изучить семь различных состояний файлового запроса браузера.
Тест веб-страницы
WebPagetest — это инструмент, который находится в активной разработке на GitHub. Его также можно загрузить, если вы хотите запустить свой собственный экземпляр. Вы можете проверить время загрузки страницы из десятков мест по всему миру. Кроме того, вы можете выполнять сравнение страниц со страницами.
Google PageSpeed Insights
Google PageSpeed Insights – это основной инструмент Google для оценки скорости страницы на мобильных устройствах и компьютерах соответственно. Бесплатный инструмент также предоставляет разбивку производительности страницы на основе основных веб-показателей Google.
Маяк
Lighthouse – это инструмент с открытым исходным кодом, который используется для аудита производительности веб-страниц, доступности, прогрессивных веб-приложений, SEO и многого другого. Google рекомендует использовать рабочий процесс Chrome DevTools, а не расширение Chrome, поскольку рабочий процесс DevTools позволяет тестировать аутентифицированные страницы и локальные сайты.
GTmetrix
GTmetrix использует Google PageSpeed Insights и YSlow! чтобы оценить время загрузки вашей страницы в тестовом месте в Ванкувере, Канада, с помощью Chrome (настольный компьютер). Одной из уникальных особенностей GTmetrix является возможность сравнивать производительность страницы с предыдущими тестами той же страницы.
BrowserStack SpeedLab
BrowserStack SpeedLab уникален среди этого набора инструментов для тестирования времени загрузки страниц, поскольку он измеряет время загрузки в различных браузерах и на разных устройствах. Он измеряет скорость веб-сайта в облаке реальных устройств BrowserStack для повышения точности.
Тест скорости веб-сайта Dotcom-Monitor
Тест скорости веб-сайта Dotcom-Monitor позволяет одновременно проверить скорость веб-страницы в 25 разных местах, а также дает возможность выбрать браузер. Инструмент возвращает результаты не только для первого, но и для второго посещения.
Бесплатный тест скорости сайта Uptrends
Бесплатный тест скорости веб-сайта Uptrends включает в себя варианты тестирования в 11 местах. Кроме того, вы можете выбрать браузер, регулирование пропускной способности, размер экрана (настольный компьютер) и устройство (мобильное устройство).
Корпоративное SEO для крупных брендов Научитесь доминировать в своей категории товаров или услуг в обычном поиске. Давай поговорим
По данным Google, веб-сайты должны загружаться менее чем за две секунды.
Половина всех мобильных пользователей будет ждать всего три секунды, прежде чем покинуть веб-сайт.
Скорость загрузки страницы – это не единственный показатель. Вместо этого это комбинация нескольких факторов, которые количественно определяют, насколько быстро страница выглядит и воспринимается пользователем. К ним относятся:
Максимальная отрисовка содержимого (LCP), которая измеряет производительность загрузки и должна произойти в течение 2,5 секунд с момента первой загрузки страницы.
Задержка первого ввода (FID), которая измеряет время до интерактивности, и должно быть менее 100 миллисекунд.
Если загрузка вашего сайта занимает несколько дополнительных секунд, это отрицательно скажется на вашей способности привлекать посетителей и совершать продажи.
От этого никуда не деться.
Это означает, что наличие быстрого сайта необходимо не только для высокого рейтинга в Google, но и для поддержания высокой чистой прибыли.
Как оптимизация скорости сайта влияет на конверсию
Медленные сайты убивают конверсии. И никогда не сможет восстановиться.
На самом деле, 47 % потребителей ожидают, что веб-сайты будут загружаться две секунды или меньше, а 40 % покинут страницу, загрузку которой занимает три или более секунд.
Если ваш сайт загружается более трех секунд, вы теряете почти половину своих посетителей еще до того, как они переходят на ваш сайт.
Да, вы правильно прочитали.
Это само по себе является огромным ударом по вашим потенциальным конверсиям.
Для посетителей, которые решили остаться, медленное время загрузки может помешать им вернуться в будущем. В ходе одного опроса 79 % клиентов заявили, что не вернутся на сайт с низкой эффективностью.
В том же опросе 52 % покупателей заявили, что быстрая загрузка страниц важна для их лояльности к сайту, а 44 % заявили, что рассказывают своим друзьям о плохом опыте работы с сайтом.
Этот опрос также показал, что задержка в одну секунду может снизить удовлетворенность клиентов примерно на 16%.
Один из лучших примеров – увеличение числа конверсий и доходов Walmart после увеличения скорости сайта.
В ходе первоначального анализа они обнаружили, что посетители, которые совершили конверсию, получили страницы, которые загружались в два раза быстрее, чем посетители, которые не совершили конверсию.
Это показало, что чем быстрее страница, тем больше вероятность того, что посетитель совершит покупку.
По завершении оптимизации скорости веб-сайта Walmart сообщил о следующих результатах:
- Каждая секунда повышения скорости сайта увеличивала количество конверсий на 2 %.
- На каждые 100 мс улучшения они увеличивали дополнительный доход на 1 %.
В другом исследовании взаимосвязь между временем загрузки и коэффициентом конверсии показала снижение коэффициента конверсии на 25 % всего за одну дополнительную секунду времени загрузки.
Очевидно, что увеличение скорости вашего сайта даже на одну секунду может значительно повлиять на количество конверсий.
Как скорость вашего сайта влияет на видимость
Теперь, когда Google учитывает скорость при ранжировании сайтов, время загрузки также может влиять на то, насколько легко пользователи смогут вас найти.
Это особенно актуально сейчас, когда компания внедряет мобильный индекс.
Вы слышали об этом, верно?
С декабря 2017 года поисковая система начала ранжировать все результаты поиска на основе мобильных версий страниц.
Впервые в 2015 году количество поисковых запросов с мобильных устройств превзошло количество поисковых запросов с настольных компьютеров, и их доля в общем поиске продолжает расти.
Это означает, что в интересах Google предоставлять результаты поиска пользователям мобильных устройств. Они не хотят направлять своих пользователей на сайты, которые не будут загружаться или плохо работать на их устройствах.
В результате удобство работы с мобильными устройствами теперь будет играть важную роль в рейтинге поиска — даже в результатах поиска на компьютере.
Это полная противоположность тому, как индекс работал раньше.
Пользовательский опыт долгое время был одним из факторов ранжирования, но до этого изменения учитывалось только взаимодействие с компьютером. Таким образом, даже если сайт неудобен для мобильных устройств, у него все равно есть шанс подняться в рейтинге на первой странице.
Это уже не так.
Теперь страницы индексируются и ранжируются на основе удобства, которое они предоставляют мобильным пользователям.
Поэтому, если вы хотите сохранить (или улучшить) свой рейтинг и видимость, важно знать, как сократить время загрузки веб-сайта. У вас должен быть сайт, обеспечивающий быстрое и простое взаимодействие с пользователем в любом браузере и на любом размере экрана.
Почему мой сайт работает медленно?
Вы провели тест скорости сайта и обнаружили, что время его загрузки довольно медленное. (Если вы не знаете, как провести тест скорости сайта, я объясню позже в этом посте).
Причин задержки загрузки вашего сайта может быть несколько. Это может быть что угодно: от времени загрузки сервера до размера изображения и количества переадресаций.
Это означает, что есть целый ряд шагов, которые вы можете предпринять, чтобы повысить скорость страницы. Мы рассмотрим 20 из них. Но прежде чем приступать к устранению неполадок, чтобы повысить производительность веб-сайта, вам нужно к чему-то стремиться.
Давайте посмотрим, что считается хорошим временем загрузки, чтобы вам было к чему стремиться.
Что такое хорошее время загрузки страницы?
Прежде чем вы начнете работать над скоростью своего сайта, рекомендуется поставить перед собой цель добиться желаемого результата.
Это может быть сложно, если вы не уверены, какова приемлемая скорость страницы.
По данным Google, лучше всего использовать три секунды. К сожалению, согласно недавнему данным сравнительного отчета, большинство сайтов далеки от этого.
Проанализировав 900 000 целевых страниц мобильных объявлений в 126 странах, Google обнаружил, что на 70 % проанализированных страниц для отображения визуального контента в верхней части страницы требовалось почти семь секунд.
Из всех отраслей, которые они включили, ни в одной из них среднее значение даже не приблизилось к рекомендуемому лучшему показателю в три секунды.
Среднее время, необходимое для полной загрузки мобильной целевой страницы, составляет 22 секунды, но 53 % посещений прекращаются, если загрузка мобильного сайта занимает более трех секунд.
Кроме того, по мере того, как время загрузки страницы увеличивается с одной до десяти секунд, вероятность отказа мобильного пользователя увеличивается на 123%.
Это означает, что владельцам сайтов в целом предстоит много работы, чтобы привести свои сайты в соответствие с требованиями Google.
Но, с другой стороны, это также означает, что если вы приложите усилия, чтобы довести скорость своего сайта до приемлемого уровня, вы значительно опередите конкурентов с точки зрения пользовательского опыта.
Совершенствуя свой сайт, вы можете использовать рекомендации и контрольные показатели Google, чтобы ставить цели и измерять эффективность.
В конце концов, Google, крупнейшая поисковая система в мире, может оказать большое влияние на ваш успех. Так что использовать их стандарты в качестве ваших стандартов никогда не будет плохой идеей.
Как ускорить работу вашего сайта в 2019 году
Существует множество факторов, влияющих на то, как долго загружается каждая страница на вашем сайте, поэтому есть много различных шагов, которые вы можете предпринять, чтобы увеличить скорость и улучшить взаимодействие с пользователем.
В этом посте мы рассмотрим более 20 советов и рекомендаций, которые помогут сократить время загрузки и повысить производительность сайта.
И если это число кажется огромным — не волнуйтесь.
Несмотря на то, что все эти советы могут помочь вам повысить скорость вашего сайта, вам не обязательно выполнять их все сегодня.
На самом деле, если вы работали над скоростью своего сайта в прошлом, возможно, ваш сайт уже соответствует некоторым из этих рекомендаций.
Имея это в виду, приступим.
По данным Yahoo, 80 % времени загрузки веб-страницы тратится на загрузку различных частей страницы, таких как изображения, таблицы стилей и скрипты.
Первый шаг к минимизации ваших запросов — выяснить, сколько в настоящее время делает ваш сайт, чтобы использовать его в качестве эталона.
Щелкните правой кнопкой мыши страницу, которую хотите проанализировать, и нажмите «Проверить», затем перейдите на вкладку «Сеть». (Если вы не видите вкладку «Сеть», вам может потребоваться развернуть боковую панель инструментов разработчика, перетащив левую границу влево.)
В столбце "Имя" показаны все файлы на странице, в столбце "Размер" показан размер каждого файла, а в столбце "Время" показано, сколько времени требуется для загрузки каждого файла.
В левом нижнем углу вы также увидите общее количество запросов, сделанных сайтом.
Уменьшение этого количества запросов ускорит работу вашего сайта, просмотрит ваши файлы и выяснит, не являются ли они ненужными.
Вы можете ничего не заметить сразу, но некоторые из них, вероятно, являются первыми кандидатами на объединение, к чему мы перейдем на следующих этапах.
2. Уменьшайте и объединяйте файлы
Теперь, когда вы знаете, сколько запросов делает ваш сайт, вы можете приступить к работе над уменьшением этого числа. Лучше всего начать с файлов HTML, CSS и JavaScript.
Это чрезвычайно важные файлы, так как они определяют внешний вид вашего сайта.
Они также увеличивают количество запросов, которые ваш сайт делает каждый раз, когда пользователь посещает его.
Вы можете уменьшить это число, "минифицировав" и объединив файлы. Это уменьшает размер каждого файла, а также общее количество файлов.
Это особенно важно, если вы используете шаблонный конструктор сайтов. Они упрощают создание веб-сайта, но иногда создают беспорядочный код, который может значительно замедлить работу сайта.
Минимизация файла включает удаление ненужного форматирования, пробелов и кода.
Поскольку каждый ненужный фрагмент кода увеличивает размер вашей страницы, важно исключить лишние пробелы, разрывы строк и отступы. Это гарантирует, что ваши страницы будут максимально компактными.
Объединение файлов — это именно то, на что это похоже. Если на вашем сайте используется несколько файлов CSS и JavaScript, вы можете объединить их в один.
Существует несколько способов минимизации и объединения файлов, и если ваш сайт работает на WordPress, плагины, такие как WP Rocket, значительно упростят этот процесс.
Если у вас установлен этот плагин, перейдите на вкладку «Статические файлы» и отметьте файлы, которые вы хотите минимизировать и объединить.
Это могут быть файлы HTML, CSS и JavaScript, а также шрифты Google.
Затем нажмите «Сохранить изменения», чтобы завершить процесс. Вы можете перезагрузить страницу и снова просмотреть Инструменты разработчика, чтобы увидеть, как повлияли ваши изменения.
3. Использовать асинхронную загрузку файлов CSS и JavaScript
После того как вы уменьшите и объедините некоторые файлы, вы также сможете оптимизировать их загрузку на своих страницах.
Скрипты, такие как CSS и JavaScript, можно загружать двумя способами: синхронно или асинхронно.
Если ваши сценарии загружаются синхронно, они загружаются по одному в том порядке, в котором они появляются на странице. С другой стороны, если ваши скрипты загружаются асинхронно, некоторые из них будут загружаться одновременно.
Асинхронная загрузка файлов может ускорить ваши страницы, потому что когда браузер загружает страницу, она перемещается сверху вниз.
Если он доберется до файла CSS или JavaScript, который не является асинхронным, он прекратит загрузку, пока не загрузит этот конкретный файл полностью. Если бы тот же файл был асинхронным, браузер мог бы одновременно загружать другие элементы на странице.
Используя ту же вкладку «Статические файлы» плагина WP Rocket, установите флажок «Блокирующий рендеринг CSS/JS».
Нажмите "Сохранить изменения", затем проверьте свой сайт, чтобы убедиться, что все загружается правильно.
4. Отложить загрузку JavaScript
Отложить загрузку файла означает предотвратить его загрузку до тех пор, пока не загрузятся другие элементы. Если вы откладываете большие файлы, такие как JavaScript, вы гарантируете, что остальная часть вашего контента может загружаться без задержки.
Если у вас есть сайт WordPress, вы можете использовать упомянутый выше подключаемый модуль WP Rocket, чтобы легко включить отложенную загрузку JavaScript. Просто установите флажок "Отложенная загрузка файлов JS", и все готово.
Если у вас есть HTML-сайт, вам нужно будет вызвать внешний файл JavaScript непосредственно перед
Читайте также: