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

Как улучшить первую содержательную и значимую краску

0
Want create site? Find Free WordPress Themes and plugins.

Вы должны включить такие метрики, как First Contentful Paint и First Meaningful Paint, в свою оценку эффективности, чтобы измерить эффективность вашего сайта с точки зрения вашего пользователя. Оба расскажут вам больше о том, как ваш сайт ведет себя в дикой природе, чтобы вы могли оптимизировать вещи, которые действительно улучшат работу вашего пользователя.

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

Что такое First Content Paint (FCP)?

First Content Paint, или FCP, представляет собой показатель производительности, который измеряет, сколько времени прошло, прежде чем браузер начнет отображать первые элементы сайта.

Обычно первые элементы рисования контента в WordPress являются элементами заголовка, поэтому посетитель сначала увидит логотип сайта или навигационное меню.

Вот пример первой содержательной краски, как обычно выглядит. Мы все еще ждем показа контента.

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

Что означает «Первая значимая краска»?

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

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

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

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

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

Другое содержимое, например изображения, может быть отложено до тех пор, пока оно не понадобится посетителю.

Использование Google PageSpeed ​​Insights для поиска первой краски содержимого и первой значимой краски

Как First Contentful Paint, так и First Meaningful Paint известны как ориентированные на пользователя показатели производительности. Google поощряет сайты, которые обеспечивают лучший пользовательский опыт с более высоким рейтингом поиска . Поскольку Google хочет призвать владельцев сайтов оптимизировать свои сайты для пользователей, FCP и FMP являются двумя показателями, которые измеряются в Google PageSpeed ​​Insights.

С ноября 2018 года Google PageSpeed ​​Insights начала использовать инструмент с открытым исходным кодом под названием Lighthouse,чтобы имитировать, как ваш сайт загружается для посетителей. Lighthouse возвращает 6 метрик в разделе « Лабораторные данные », которые дают полную картину эффективности вашего сайта:

  • Первая содержательная краска
  • Индекс скорости
  • Время в интерактив
  • Первая значимая краска
  • Первый процессор простаивает
  • Расчетная задержка ввода

Первая краска содержимого и Первая значимая краска представляют собой метрики, основанные на времени, которые измеряются в секундах. Чтобы добиться положительного результата в глазах Google, вы хотите, чтобы как FMP, так и FCP были меньше секунды.

5 рекомендаций по сокращению времени рисования для вашего сайта WordPress и улучшению оценки Inspeed PageSpeed

Когда вы запускаете Google PageSpeed ​​Insights, Google предоставляет вам индивидуальные предложения о том, как вы можете исправить свой сайт. Выполнение теста – лучший способ узнать, насколько ваш сайт не работает.

Наша цель с первыми четырьмя рекомендациями – улучшить First Contentful Paint за счет ускорения времени, необходимого для загрузки ресурсов и устранения препятствий, мешающих браузеру регистрировать контент DOM. Последнее предложение – улучшить первую значимую краску.

Мы собираемся вникнуть в некоторые подробности, но если вам нужно простое решение, Hummingbird может помочь. Попробуйте Hummingbird Pro бесплатно в течение 30 дней и посмотрите, как это повлияет на ваш сайт. Версия 2.0 теперь доступна для наших участников с новым сканером, который включает рекомендации Lighthouse.

Contentful Paint, Значимая краска и исправления одним щелчком теперь включены в Hummingbird Pro.

А для наших бесплатных пользователей WordPress.org Hummingbird вы можете ожидать увидеть новый сканер где-то на следующей неделе … или перейти на Pro и получить его сейчас;)

1. «Минимизируйте количество внешних таблиц стилей и сценариев, блокирующих рендеринг, от которых зависит страница»

Что такое блокировка рендера? Когда посетитель загружает веб-страницу, все, что мешает визуализации DOM, называется блокировкой рендеринга. Это кодовые препятствия, которые браузер должен сначала обработать, прежде чем он сможет сделать что-то еще.

Иногда они важны. Ваши CSS-файлы, например, блокируют рендеринг, но они очень важны.

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

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

2. «Используйте HTTP-кеширование для ускорения повторных посещений»

Кэширование – это надежный способ повысить скорость сайта для ваших посетителей, храня ресурсы в кеше для быстрого поиска. Есть несколько видов кешей.

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

Недавно мы сравнили Hummingbird с другими популярными плагинами для кэширования, и Hummingbird оптимизировал их все.

3. «Сократите и сожмите текстовые ресурсы, чтобы ускорить время их загрузки»

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

Есть два способа сделать это:

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

Сжатие ваших файлов
Сжатие ваших файлов похоже на процесс сжатия ваших изображений . В процессе сжатия компрессор обнаруживает шаблоны и дубликаты в текстовом файле и кодирует их намного эффективнее.

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

4. «Делайте меньше JavaScript-работы при загрузке страницы»

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

Это также не помогает, когда код JavaScript объединен в один огромный файл. Я знаю, что это кажется нелогичным, но создание одного большого файла не влияет на производительность.

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

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

5. «Оптимизация пути критического рендеринга для достижения более быстрого первого осмысленного рисования»

Критический путь рендеринга относится ко всем активам, которые браузер должен отобразить, чтобы ответить на текущий запрос посетителя. Вы хотите расставить приоритеты для активов, которые наиболее важны сейчас, и загрузить их как можно быстрее 

Это как путешествие. Если вам нужно прийти на встречу вовремя и вы опаздываете, это, вероятно, не лучшее время для выполнения быстрых поручений или осмотра достопримечательностей. Сделай это после!

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

Иметь ввиду

Когда вы начинаете оптимизировать свой сайт, важно помнить, что результаты, возвращаемые Google PageSpeed ​​Insights, представляют только одну перспективу. Это симулированные результаты, но они не полностью отражают реальность.

Посетители, которые посещают ваш сайт на дрянных устройствах в плохом мобильном соединении, будут испытывать FCP и FMP, которые намного дольше. Все больше причин, чтобы продолжать улучшаться, даже если вы получаете  идеальные 100 .

Ваша цель всегда должна состоять в том, чтобы оптимизировать ваш сайт для реальных пользователей, а не для золотой звезды;)

Резюме

First Contentful Paint и First Meaningful Paint – это ориентированные на пользователя метрики, которые могут многое рассказать о том, как долго ваши посетители ждут контента. Оба должны быть меньше секунды для лучшего пользовательского опыта. Вы можете узнать, как ваш сайт получил оценку с помощью Google PageSpeed ​​Insights.

Если ваш сайт работает слишком медленно, лучший способ сократить время для первого рисования – это минимизировать ресурсы, блокирующие рендеринг, использовать HTTP-кэширование, минимизировать и сжимать текстовые ресурсы, меньше работать с JavaScript и оптимизировать критический путь рендеринга. Если вы не уверены в том, что вам нужно сделать, запуск теста Google PageSpeed ​​Insights даст вам целевые предложения для вашего сайта.

Исправное устройство  – это залог высокой работоспособности и функциональности. Закажите  ремонт Doogee в нашем сервисном центре и получите свое устройство уже через час с гарантией в 1 год. 
Did you find apk for android? You can find new Free Android Games and apps.
Вы можете написать отзыв

Оставить отзыв

VebPro - Интернет-магазин цифровых товаров
Вход / Регистрация временно отключены
Сравнить товары
  • Всего (0)
Сравнить
0