Владельцы веб-страниц хотят оптимизировать ключевые возможности пользователей на своей веб-странице. Было введено множество инструментов для оптимизации и повышения качества веб-страницы. Эти инструменты могут использоваться любыми владельцами бизнеса, маркетологами или разработчиками для увеличения количественной оценки и удобства работы с сайтом, и они могут определить возможности для улучшения.
Core Web Vitals против Lighthouse
Разница между Core Web Vitals и Lighthouse заключается в том, что оба инструмента были введены Google, а три показателя, представленные Core Web Vitals, - это LCP (самая большая отрисовка содержимого), FID (отображение первого ввода), CLS (совокупный сдвиг макета) при включении. с другой стороны, у Google Lighthouse также есть три метрики, и две из них такие же, как у Core Web Vitals, а именно LCP (самая большая отрисовка контента), CLS (совокупный сдвиг макета), TBT (общее время блокировки).
Core Web Vitals был представлен Google в мае 2020 года. Это подмножество жизненно важных веб-сайтов, и оно применяется ко всем веб-страницам Google. И владельцы этих веб-страниц измеряют с помощью этого инструмента, а затем в соответствии с этим Google сортирует их.
Инструмент Lighthouse был представлен Google 19 мая 2020 года. Этот инструмент был создан для измерения основных показателей сети, а также для улучшения или оптимизации качества веб-страниц. Инструмент используется после ввода URL-адреса веб-страницы, затем он выполняет серию проверок, а затем оценивает веб-страницу с подробным отчетом об этом.
Таблица сравнения Core Web Vitals и Lighthouse
| Параметры сравнения | Core Web Vitals | Маяк |
| Что это? | Это подмножество жизненно важных показателей сети, которое применяется ко всем веб-страницам, измеряется всеми владельцами сайтов и отображается во всем Google. | Инструмент для улучшения качества веб-страницы |
| Метод работы | Показывает производительность веб-страницы на основе реальных данных об использовании (полевые данные) | Он генерирует серию проверок, а затем отображается подробный отчет с оценкой того, насколько хорошо страница работает. |
| Представлено в | Май 2020 г. | 19 мая, 2020 |
| Измеряется | Он измеряется инструментом Lighthouse, отчетом Chrome UX, Chrome DevTools, Search Console, PageSpeed Insights. | Для этого нет такого инструмента. |
| Метрики | LCP (самая большая полноформатная краска), FID (отображение первого ввода), CLS (совокупный сдвиг макета) | LCP (самая большая содержательная краска), CLS (совокупный сдвиг макета), TBT (общее время блокировки) |
Что такое Core Web Vitals?
Core Web Vitals можно определить как подмножество Web Vitals, которое применяется на веб-страницах, присутствующих на всем веб-сайте Google. Владельцы сайтов должны измерить эти веб-страницы, а затем они будут отображаться в Google. Этот инструмент был представлен в мае 2020 года, и этот инструмент фильтрует производительность веб-страницы на основе реальных данных об использовании или полевых данных.
Core Web Vitals можно измерить с помощью многих инструментов, и некоторые из них - инструмент Lighthouse, отчет Chrome UX, Chrome DevTools, Search Console и PageSpeed Insights. Текущие показатели инструмента сосредоточены на трех вещах, которые помогают улучшить взаимодействие с пользователем: загрузке (LCP), интерактивности (FID) и визуальной загрузке (CLS).
LCP или Largest Contentful Paint измеряет скорость загрузки веб-страницы, и в течение 2,5 секунд должна сработать LCP. FID или первый входной дисплей веб-страницы измеряют интерактивность, и страница должна иметь FID 100 миллисекунд или меньше. CLS или совокупный сдвиг макета страницы измеряют визуальную загрузку, и на странице должно быть не более 0,1 CLS. Считается, что веб-страница с пересечением всех показателей выше 75% попадает в правильную целевую аудиторию.
Что такое Маяк?
Lighthouse - это автоматизированный инструмент, представленный Google, который помогает улучшить качество веб-страницы. Это бесплатный инструмент, предоставляемый пользователям. Этот инструмент помогает получить представление о различных вещах, необходимых для улучшения качества веб-страницы, таких как общая производительность страницы, удобство использования для SEO, доступность веб-страницы, прогрессивные веб-приложения и лучшие практики.
Инструменты Lighthouse используют URL-адрес веб-страницы, которую необходимо улучшить, а затем проводят на ней серию проверок. Инструмент выставляет оценки на веб-странице, и создается подробный отчет о том, насколько хорошо страница работает. Кроме того, для Lighthouse нет инструмента измерения, в отличие от Core Web Vitals.
Инструмент Google Lighthouse также работает с тремя метриками, две из которых совпадают с метриками Core Web Vitals, а именно LCP, CLS и TBT. LCP (Largest Contentful Paint) измеряет время загрузки веб-страницы и должен набрать 2,5 секунды или ниже. CLS (Cumulative Layout Swift) измеряет визуальную загрузку веб-страницы и должен иметь оценку 0,10 или меньше. TBT (общее время блокировки) измеряет скорость отклика веб-страницы. Он связан с FID.
Основные различия между Core Web Vitals и Lighthouse
Вывод
Долгосрочный успех любого сайта или веб-страницы требует оптимизированного качества контента и других функций, которые обеспечивают здоровый трафик на веб-страницу. По той же причине Google создал и запустил множество инструментов для измерения общей производительности веб-страницы за последние годы. Некоторые опытные разработчики обнаружили, что с этими инструментами легко работать, в то время как некоторые из них также оценили их как сложные инструменты, с которыми нужно справиться.
Эти инструменты автоматически фильтруют контент и веб-страницу на основе показателей, которые были разработаны, чтобы очистить как можно больше, чтобы сделать веб-страницу полностью оптимизированной с точки зрения качества контента и других факторов. Есть четыре показателя, в которых два из них одинаковы для обоих инструментов (Core Web Vitals и Lighthouse), а один из них отличается в случае инструмента Lighthouse. Метрики - LCP, CLS, FID и TBT.
использованная литература
- https://www.itema-conference.com/wp-content/uploads/2021/04/ITEMA-2020_Conference-Proceedings_FINAL.pdf#page=25
- https://www.mdpi.com/0718-1876/16/5/77
- https://www.theseus.fi/bitstream/handle/10024/352102/Analyis%20of%20deploying%20a%20React%20PWA%20on%20Google%20Play%20Store%20using%20TWA_Yoseph%20Alemu_Final%20Version%20Alemu_Final%20Version%20 29.pdf? Sequence = 2
- https://staff.fnwi.uva.nl/a.s.z.belloum/MSctheses/MScthesis_Tjarco.pdf
