- Данные и инструменты аналитики
- 1. Google Analytics
- 2. Информация о скорости страницы
- 3. GT Metrix
- Улучшение скорости страницы
- 1. Улучшите кеширование
- 2. Очистите ваш код
- 3. Оптимизируйте свои изображения
- 4. Используйте домен без файлов cookie
- 5. Рассмотрим CDN (сеть доставки контента)
- 6. Рассмотрим ваши сторонние услуги
Вероятно, неудивительно, что наша терпимость к медленной загрузке страниц довольно плохая. Мы ожидаем, что вещи будут загружаться в мгновение ока - на настольном компьютере или мобильном устройстве.
Медленные веб-страницы не помогают пользователю. Kiss Metrics процитировал исследования, проведенные Akamai и Gomez демонстрация того, что почти половина веб-пользователей ожидает загрузки сайта через 2 секунды или менее; и они, как правило, покидают сайт, который не загружался в течение 3 секунд.
Медленное время загрузки также не является идеальным с точки зрения SEO. Еще в 2010 году Google написал в своем блоге: «Мы включаем новый сигнал в наши алгоритмы ранжирования поиска: скорость сайта» , Это было дальше подтверждено Мэттом Каттсом ,
Кроме того, принимая во внимание алгоритм возврата Google к поиску , где возвраты к поисковой выдаче Google могут использоваться в качестве сигнала ранжирования, быстрое время загрузки страницы становится все более важным фактором SEO.
Короче говоря, быстрый идеален с точки зрения UX и SEO!
Давайте рассмотрим несколько простых методов, которые вы можете развернуть, чтобы измерить и улучшить время загрузки страницы.
Данные и инструменты аналитики
Существует ряд бесплатных инструментов, которые можно использовать для измерения показателей скорости сайта и диагностики проблем, а именно:
1. Google Analytics
Google Analytics предоставляет несколько отчетов, которые помогут вам отслеживать скорость сайта. Вы можете просматривать время загрузки страницы по браузеру и стране - последнее особенно полезно, если вы глобальный бренд.
Если вы технически настроены, Google предоставит более детальные данные о времени загрузки страницы, включая: поиск домена, соединение с сервером и время отклика сервера, в дополнение к фактическому времени страницы. Это поможет вам выявить узкие места в системе.
Google Analytics также предложит рекомендации по скорости страницы, которые загружаются в отчетах с помощью инструмента Page Speed Insights ниже.
2. Информация о скорости страницы
Page Speed Insights от Google измеряет скорость страницы на мобильных и настольных устройствах. Он выбирает URL дважды, один раз с мобильным пользовательским агентом и один раз с настольным пользовательским агентом.
Показатель Page Speed превышает 100, и Google рекомендует, чтобы показатель 85 или более означал, что страница работает хорошо.
В дополнение к техническим рекомендациям по всей вашей странице, PageSpeed Insights также предлагает рекомендации по увеличению времени загрузки в разы по сравнению с полной страницей. В связи с тем, что мобильное использование сегодня настолько широко распространено, предложения, предлагаемые выше, могут иметь большое значение и значительно улучшить взаимодействие.
3. GT Metrix
GTmetrix является абсолютным украшением инструмента, сочетающего в себе Page Speed Insights от Google и YSlow от Yahoo, для оценки эффективности загрузки вашего сайта.
Он содержит четкие практические рекомендации в очень эффективном и простом в использовании отчете. Попробуйте сами, и вы скоро поймете, как это здорово!
Улучшение скорости страницы
Отложив инструменты на мгновение, я выделил ниже некоторые из наиболее распространенных способов увеличения времени загрузки страницы. Этот список ни в коем случае не является исчерпывающим, но примеры могут помочь вам быстро заработать.
1. Улучшите кеширование
Когда вы просматриваете веб-страницу, ваш браузер должен загрузить все связанные файлы, будь то изображения или код. После загрузки эти файлы сохраняются в кеше браузера и будут использоваться снова, если вы вернетесь на ту же страницу.
Таким образом, существует простой принцип, когда дело доходит до кэширования: показывать файлы посетителям сайта только тогда, когда файл изменился или если это визит в первый раз. Во всех других случаях вы должны обслуживать файлы из локального кэша браузера.
Если вы правильно настроили заголовки кэша, это сработает и уменьшит время загрузки страницы. Для получения дополнительной информации, проверьте (не так) руководство для начинающих по заголовкам кэша ,
2. Очистите ваш код
Сокращение вашего кода HTML, CSS и JavaScript окажет положительное влияние на время загрузки страницы. Поскольку веб-страницы все больше и больше полагаются на длинный JS-код для обеспечения интерактивности и логики, длинный код может сделать вашу страницу довольно медленной. Очистка кода может включать в себя любое из следующего:
- Приведите в порядок подробный код, включая длинные комментарии разработчиков (но при необходимости сохраняйте эти комментарии на своем промежуточном сервере)
- Удалите встроенные CSS и JS и сделайте их внешними файлами (которые затем можно кэшировать)
- Используйте «отложенную загрузку», когда изображения загружаются только тогда, когда браузер запрашивает их, когда посетители прокручивают страницу вниз ( вот несколько примеров )
3. Оптимизируйте свои изображения
Самый очевидный способ повысить производительность вашей страницы - это улучшить способ оптимизации ваших изображений. Я видел слишком много примеров сайтов или блогов, управляемых контентом, с огромными несжатыми изображениями, загруженными на страницу. Если вы загружаете файлы PNG или JPG, сожмите их, используя программное обеспечение для редактирования фотографий. Часто будет достаточно 8-битного (а не 24-битного) PNG; или, если вы используете JPG, снизьте качество файлов JPG, чтобы оптимизировать размер файла. Я стремлюсь стремиться к 65/100.
Самое сексуальное, что нужно сделать, это использовать CSS спрайты что полезно, если у вас много изображений на одной странице (что соответствует многим потенциально длительным HTTP-запросам). С помощью CSS-спрайтов вы загружаете «одно изображение» и используете CSS, чтобы скрыть и показать определенную часть этого изображения. Аккуратно ах!
4. Используйте домен без файлов cookie
Этот немного технический, но довольно крутой. Концепция на самом деле довольно проста: не обслуживайте статический контент, например изображения и таблицы стилей, из домена, в котором установлены файлы cookie.
Проблема с cookie-файлами заключается в том, что как только сервер устанавливает cookie-файл для определенного домена, все последующие HTTP-запросы для этого домена должны включать cookie-файлы. Даже если сервер не использует cookie, как это обычно происходит со статическими компонентами, cookie все равно отправляется, что приводит к увеличению количества заголовков наших запросов бесполезным кодом.
Например, вы могли заметить, что Google обслуживает ресурсы, такие как изображения, с домена gstatic.com, а не с google.com, который в значительной степени зависит от файлов cookie.
Поэтому, если вы обслуживаете большое количество небольших файлов, таких как изображения, рассмотрите возможность создания отдельного домена без файлов cookie и их обслуживания из этого домена.
5. Рассмотрим CDN (сеть доставки контента)
Сеть доставки контента - это один из самых простых способов ускорить загрузку вашего сайта. Концепция относительно проста. Если ваш веб-сайт находится в Великобритании, и кто-то из США посещает его, данные должны пройти тысячи миль, прежде чем запрошенная страница и ее ресурсы смогут загружаться. Но если эти данные были зеркально отражены в США, то данные перемещаются на гораздо более короткое расстояние, что повышает скорость страницы.
Используя CDN, вы зеркалируете свой сайт локально, тем самым сокращая время загрузки страницы.
Это особенно полезно и важно, если у вас есть большая глобальная аудитория, обращающаяся к одному веб-сайту. Это должно стать достаточно очевидным, если посмотреть на время загрузки вашей страницы Google Analytics по странам, где вы можете заметить отставание от страны.
6. Рассмотрим ваши сторонние услуги
Использование сторонних сервисов на веб-страницах стало чрезвычайно распространенным явлением. Они могут включать в себя: виджеты для совместного использования в социальных сетях, программное обеспечение для веб-аналитики, код отслеживания показа рекламы или конверсии, встроенные мультимедиа (например, видео или документы), виджеты регистрации по электронной почте, виджеты в чате, список можно продолжить.
Хотя код выглядит достаточно безвредным, при объединении он увеличивает размер вашей веб-страницы и может замедлить вашу страницу, так как браузер должен соединяться с несколькими серверами.
Кроме того, когда сторонний сервер выходит из строя или замедляется, вы можете заметить задержку на вашем сайте. Если ваша веб-страница зависает, не каждый пользователь будет рассматривать нажатие кнопки обновления.
Хотя многие сторонние сервисы (такие как код отслеживания аналитики) являются жизненно важными для интеграции, может быть, стоит быть осторожным с накоплением сервисов.
