- Оригинальный адрес:Как работает Google Pagespeed: улучшите свои результаты и рейтинг в поисковых системах
- Оригинальный автор:Ben Schwarz
- Перевод с:Программа перевода самородков
- Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…
- Переводчик:Jerry-FD
- Корректор:weberpan,Endone
В этой статье мы раскроем самый важный метод расчета показателя скорости страницы PageSpeed.
Нет никаких сомнений в том, что скорость загрузки страницы стала ключевым фактором в повышении доходов и снижении уровня убытков. Поскольку Google уже включил скорость загрузки страницы в число факторов, влияющих на ее поисковый рейтинг, теперь все больше предприятий и организаций сосредоточены на повышении производительности страницы.
в прошлом годуGoogle внесла две существенные поправки в свой алгоритм ранжирования в поиске.:
- Март,Результаты поиска ранжируются на основе мобильной версии страницы., заменив предыдущую настольную версию.
- Июль, алгоритм ранжирования SEOОбновлено для увеличения скорости загрузки страницы как фактора, влияющего на ее поисковый рейтинг, например рейтинг мобильной страницы.и рейтинг объявления.
Благодаря этим изменениям мы можем сделать два вывода:
- Скорость загрузки мобильной страницы повлияет на рейтинг SEO всего вашего сайта.
- Если ваша страница загружается медленно, показатель качества объявления снизится, аРеклама будет дороже.
Гугл говорит:
Более быстрая загрузка не только улучшает наш опыт; последние данные показывают, что ускорение загрузки страниц также снижает эксплуатационные расходы. Как и мы, наши пользователи ценят скорость — вот почему мы решили учитывать скорость страницы в наших расчетах поискового рейтинга.
Чтобы понять, как эти изменения влияют на производительность страницы, нам необходимо освоить эти основы.PageSpeed 5.0Это подрывное изменение по сравнению с предыдущей версией. Теперь у Маяка иCrUXПредоставление технической поддержки (отчеты об опыте использования Chrome).
В этом обновлении используется новый алгоритм подсчета очков, который еще больше усложнит получение высокого балла PageSpeed.
Что изменилось в PageSpeed 5.0?
До версии 5.0 PageSpeed давал набор рекомендаций для тестируемых страниц. Если на странице есть большие несжатые изображения, PageSpeed порекомендует сжать изображения. В другом примере, если Cache-Headers отсутствует, будет рекомендовано добавить его.
Эти рекомендации связаны с некоторымиМетодические рекомендацииСоответственно, если следовать этим рекомендациям,Скорее всегоЭто улучшит производительность вашей страницы, но это только поверхностно, он не будет анализировать пользовательский опыт загрузки и рендеринга страниц в реальных сценариях.
В PageSpeed 5.0 страница загружается в реальный браузер Chrome под контролем Lighthouse. Маяк, полученный из браузера, записывает показатели, эти показатели закладываются в модель подсчета очков при расчете общей производительности шоу в последнюю минуту. В зависимости от баллов даются рекомендации по оптимизации индекса.
和 PageSpeed 类似，Lighthouse 也有一个性能分。在 PageSpeed 5.0 中，性能分直接从 Lighthouse 里获取。 такТеперь показатель скорости PageSpeed такой же, как показатель производительности Lighthouse.
Теперь, когда мы знаем, откуда берется показатель PageSpeed, давайте подробнее рассмотрим, как он рассчитывается и как мы можем эффективно повысить производительность наших страниц.
Что такое Google Lighthouse?
Lighthouse— проект с открытым исходным кодом, управляемый отличной командой из Google Chrome. За последние несколько лет он постепенно стал бесплатным инструментом анализа производительности.
Lighthouse использует протокол удаленной отладки Chrome для получения информации о сетевых запросах, расчета производительности JavaScript, оценки уровней доступности и расчета показателей времени, ориентированных на пользователя, таких какПервая содержательная краска,Время интерактиваи индикаторы скорости.
Если вы хотите понять общую архитектуру Lighthouse, см.руководство.
Как Lighthouse рассчитывает показатели производительности
При тестировании производительности Lighthouse фокусируется на том, что видит и испытывает пользователь, регистрируя множество показателей.
Шесть приведенных ниже показателей составляют основную часть оценки производительности. они есть:
- Время до интерактивности (TTI)
- Индекс скорости Индекс скорости
- Первая содержательная краска (FCP)
- Время простоя первого процессора Время простоя первого процессора
- Первая значимая краска (FMP)
- Расчетная задержка ввода
Lighthouse применяет модель оценки от 0 до 100 для этих показателей. Этот процесс собирает 75-й и 90-й процентили мобильныхHTTP-файл, затем введите в对数正太分布Функция (Примечание корректора: в этом случае, пока данные о производительности ниже 25% мобильной онлайн-страницы, то есть рейтинг ниже 75%, дается 0 баллов, и пока оценка выше 95% мобильной страницы, это должны быть полные отметки).
Расчетные данные на основе алгоритмов и интерактивного времени, мы можем обнаружить, что если страница становится «интерактивной» через 2,1 секунды, то ее метрика интерактивного времени составляет 92/100.
Когда каждый показатель оценивается, ему присваивается вес, и после корректировки веса будет рассчитываться общая оценка производительности страницы. Правила взвешивания следующие:
| показатель | Веса |
|---|---|
| Время взаимодействия (TTI) | 5 |
| индикатор скорости | 4 |
| время отрисовки первого контента | 3 |
| Время простоя первого процессора | 2 |
| первый действительный розыгрыш | 1 |
| Расчетное время задержки ввода | 0 |
Эти веса зависят от того, насколько каждая метрика влияет на взаимодействие с мобильным пользователем.
В будущем эти веса могут быть дополнительно оптимизированы с учетом наблюдений пользователей из отчета об опыте использования Chrome.
Вам может быть интересно, как именно вес каждой из этих метрик влияет на общий балл. Маяк командаСоздан полезный табличный калькулятор Google.Чтобы уточнить конкретные детали:
Используя приведенный выше пример, если бы мы изменили время взаимодействия с 5 секунд до 17 секунд (глобальное среднее значение TTI для мобильных устройств), наша оценка упала бы до 56% (56 из 100).
Однако, если бы мы изменили время отрисовки первого контента на 17 секунд, наша оценка составила бы 62%.
Время до взаимодействия (TTI) — это показатель, который больше всего влияет на вашу оценку производительности.
Итак, чтобы получить высокий балл на PageSpeed, вамсамый нужныйзаключается в снижении ТТИ.
Мечник ТТИ
В целом, есть два важных фактора, которые сильно влияют на TTI:
- Общий размер кода JavaScript, переданного на страницу
- Время выполнения JavaScript в основном потоке
нашинтерактивное времяВ статье подробно объясняется, как работает TTI, но если вам нужна быстрая несложная оптимизация, мы рекомендуем:
Уменьшить общий размер JavaScript
Насколько это возможно, удалите бесполезный код JavaScript или передавайте только тот код, который будет выполняться на текущей странице. Это может означать удаление старых полифилов или попытку использовать более мелкие, новые сторонние библиотеки.
Что вам нужно помнить, так этоJavaScript тратитНе только время, необходимое для его загрузки. Браузер должен распаковать, разобрать, скомпилировать и затем выполнить его, что требует значительного количества времени, особенно на мобильных устройствах.
Эффективными мерами по уменьшению общего размера скриптов вашей страницы являются:
- Проверьте и удалите полифиллы, которые не нужны вашим пользователям.
- Выясните, сколько времени занимает каждая сторонняя библиотека JavaScript. использоватьwebpack-bundle-analyserилиsource-map-explorerвизуализировать их размеры.
- Современные инструменты JavaScript (например, webpack) могут разбивать большие приложения JavaScript на множество небольших пакетов, которые динамически загружаются по мере просмотра пользователем. Это называетсяcode splitting,Так и будетВеликолепно оптимизированный TTI.
- Сервисные работники кэшируют проанализированный и скомпилированный байт-код. Если вы правильно используете эту функцию, пользователю нужно только один раз потратить потерю времени, вызванную синтаксическим анализом и компиляцией кода, а затем результат будет оптимизирован для кеша.
Мониторинг интерактивного времени
Чтобы лучше продемонстрировать различия в пользовательском опыте, мы рекомендуем использовать системы мониторинга (такие какCalibre), который проверяет минимальный рейтинг страницы на двух разных устройствах: быстром настольном устройстве и умеренно быстром мобильном устройстве.
Таким образом, вы можете получить как наилучшие, так и наихудшие данные, с которыми могут столкнуться ваши пользователи. Пришло время понять, что ваши пользователи не используют такие мощные устройства, как ваши.
Углубленный анализ
Чтобы получить наилучшие результаты при анализе производительности JavaScript, протестируйте свою страницу на намеренно более медленном мобильном устройстве. Если у вас есть старый телефон в вашем ящике, вы найдете целый новый мир.
Модуль аппаратной эмуляции Chrome DevTools может стать хорошей заменой реальным устройствам для тестирования, мы написали подробныйРуководство по профилированиючтобы помочь вам начать учиться анализировать производительность во время выполнения.
А как насчет других показателей?
Метрики скорости, время до первой отрисовки контента и первая действительная отрисовка — все это метрики, основанные на отрисовке браузера. Их влияющие факторы схожи и часто могут быть оптимизированы одновременно.
Очевидно, оптимизировать эти показатели было бы относительно легко, так как они рассчитываются путем записи скорости рендеринга страницы. Эти показатели можно оптимизировать, тщательно следуя рекомендациям Lighthouse по сравнительному анализу производительности.
Если вы еще не загружаете шрифты или не оптимизируете критические запросы, вот несколько хороших мест для начала. наши статьи,критический запрос, в котором подробно описывается, как браузер отправляет запросы на вашу страницу и отображает ключевые ресурсы.
Оптимизируйте процесс отслеживания
Недавние обновления Google для Search Console, Lighthouse и PageSpeed Insights уникальны для анализа производительности вашей страницы в верхней части страницы, но для команд, которым необходимо отслеживать свои страницы, чтобы улучшить производительность страницы, это сложно.
Непрерывный мониторинг производительностиМожно гарантировать оптимизацию скорости, и команда сразу узнает, когда страница снова станет плохой. Искусственное тестирование внесет в результаты большое количество непредсказуемых переменных, а тестирование в разных областях и на разном оборудовании практически невозможно без профессиональной лабораторной среды.
Скорость стала ключевым фактором, влияющим на SEO-рейтинг, тем более что около 50% трафика страниц теперь приходится на мобильные устройства.
Чтобы избежать падения рейтинга, убедитесь, что вы используете последнюю версию пакета профилирования для отслеживания ключевых страниц (ха, мы создалиCalibreБыть вашим партнером по повышению производительности. Он основан на Маяке. Он используется многими командами со всего мира каждый день).
Статьи по Теме
- About Time to Interactive
- How to optimise the performance of a JavaScript application
- Lighthouse Performance score Calculator
Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.
Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.