Defront — про фронтенд-разработку и не только
5.36K subscribers
21 photos
1.09K links
Ламповый канал про фронтенд и не только. Всё самое полезное для опытных web-разработчиков

Обсуждение постов @defrontchat

Также советую канал @webnya
Download Telegram
DebugBear проанализировал влияние тысячи популярных расширений Chrome на производительность страниц и поделился результатами исследования — "2020 Chrome Extension Performance Report".

Наибольшую задержку рендеринга страницы (более 300мс) вызывают расширения Clever, Gramarly, Cash Back For Shopping. Наибольшее влияние на TTI оказывают расширения, Evernote Web Clipper, Grammarly, Avira Password Manager — они блокируют основной поток выполнения более чем на 400 мс. Интересен анализ блокировщиков рекламы. DuckDuckGo Privacy Essentials на большом новостном сайте уменьшает использование CPU с 31 секунды до 1.6 секунд. Но есть другие блокировщики, которые очень сильно увеличивают потребление CPU. Advertising Terminator тратит почти 25 секунд времени CPU на анализ страниц.

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

Интересное исследование. Очень рекомендую почитать, если разрабатываете расширения для браузеров.

#chrome #research #performance

https://www.debugbear.com/blog/2020-chrome-extension-performance-report
Йоханнес Бойс опубликовал итоги анализа производительности большого числа сайтов — "Core Web Vitals – Wix vs. WordPress, Shopify vs. Shopware – What’s fastest?".

В исследование попали 18 миллионов доменов со статистикой о используемых технологиях (CMS, CDN, языки программирования и т.п.) и данными по разным типам устройств. Из самого интересного. Среди CMS самые лучшие метрики производительности показали Jimdo и Typo3. Медленнее всех оказался WIX, на предпоследнем месте находится Wordpress. Только 70% проанализированных AMP-страниц удовлетворяют хорошим показателям Web Vitals. Используемые языки программирования не влияют на метрики производительности. Очень медленными оказались сайты, которые используют Angular.

Интересное исследование. Обязательно посмотрите, если интересуетесь темой производительности.

#research #performance

https://www.sistrix.com/blog/core-web-vitals-wix-vs-wordpress-shopify-vs-shopware-whats-fastest
Барри Поллард — автор книги "HTTP/2 in Action" и один из авторов "Web Almanac" — проанализировал данные Lighthouse из HTTP Archive и поделился своими находками — "What do Lighthouse Scores look like across the web?".

Всего лишь 10% сайтов были оценены больше 80 в категории производительности. Медианное значение оценки — 31. Это означает, что большинство сайтов неоптимизировано, и, скорее всего, работают медленно. Наиболее низкая оценка метрик приходится на Largest Contentful Paint (LCP) и Time to Interactive (TTI) — всего лишь 21% сайтов получили хорошую оценку по этим метрикам.

Лучше всего сайты показывают себя в категориях Accessibility и SEO. Хорошие оценки Accessibility объясняются набором типов проверок в Lighthouse. Нужно понимать, что в категории Accessibility оценка не говорит о том, что сайт доступен (можно написать недоступную страницу с оценкой 100), оценка говорит о том, что сайт следует основным советам для улучшения доступности.

Интересное исследование. Рекомендую почитать, чтобы получить больше понимания об оценках в Lighthouse.

#performance #a11y #research

https://www.tunetheweb.com/blog/what-do-lighthouse-scores-look-like-across-the-web/
В блоге Catchjs была опубликована статья про анализ производительности миллиона сайтов — "We rendered a million web pages to find out what makes the web slow".

В исследовании оценивается влияние на производительность разных факторов: используемая версия HTTP, количество запросов на странице, используемые библиотеки и т.п.

Для меня самым интересным показался анализ JS-библиотек. Список библиотек, которые встречаются чаще всего: на первом месте стоит jQuery, на втором — Google Analytics, на третьем — Google Ads. Список библиотек, которые больше всего влияют на TTI: jQuery, Froogaloop, WooCommerce, Swiper, Visual Composer prettyPhoto. Список библиотек, которые больше всего влияют на время полной загрузки страницы: Baidu Statistics, Amazon Publisher Services, jQuery, VK Open API, Zopim.

Интересная статья. Рекомендую всем, кто интересуется темой производительности.

#performance #research

https://catchjs.com/Blog/PerformanceInTheWild
Йонас Штреле рассказал о новом подходе для фингерпринтинга пользователей, который работает во всех браузерах, включая инкогнито.

В этом методе для идентификации пользователей используются фавиконки. Сначала на сервере подготавливается набор путей с уникальными фавиконками. Каждому пути соответствует один бит идентификатора пользователя, например для четырёхбитного идентификтатора они могут выглядеть так: ['/a', '/b', '/c', '/d'] -> 1111. При посещении сайта, пользователю присваивается уникальный идентификатор, например "3" (0011 в двоичном виде) и запускается серия редиректов для тех путей, на которые приходится единица идентификатора (['/c', '/d']), с каждым редиректом браузер запрашивает уникальную для данного роута фавиконку и сохраняет её в favicone cache (F-Cache). При повторном посещении сайта, пользователь снова прогоняется через серию редиректов в этот раз по всем путям; сервер тем временем восстанавливает идентификатор пользователя, наблюдая за тем, какие фавиконки были загружены.

У этого подхода фингерпринтинга есть проблема — скорость установки и чтения такой "куки". В моих экспериментах На установку и чтение 15-битного идентификатора ушло около 10 секунд. В оригинальной статье написано, что при хороших сетевых условиях для установки и чтения 34-битного идентификатора (17 миллиардов записей) требуется восемь секунд.

#privacy #research

https://supercookie.me/workwise
https://github.com/jonasstrehle/supercookie
Улучшилась ли скорость веба благодаря Web Vitals?

Барри Поллард проанализировал влияние метрик Web Vitals на производительность веба в целом — "Have Core Web Vitals made the web faster?".

Внедрение метрик Core Web Vitals (CWV) по данным Google дало положительный эффект. По сравнению с прошлыми годами количество сайтов, удовлетворяющих CWV, увеличилось более чем на 20%. Однако Барри пишет о том, что сложно судить о динамике изменения метрик, если их определения претерпели значительные изменения. Именно это произошло с метриками LCP и CLS.

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

Барри пишет про то, что ответ на вопрос лежит где-то посередине. Нельзя категорично утверждать, что благодаря CWV скорость веба улучшилась. Но введение CWV заставило владельцев крупных сайтов инвестировать ресурсы в улучшение производительности. Также крупные игроки (Wordpress, Wix) стали более серьёзно относиться к производительности, после того как Google объявил о том, что алгоритм ранжирования поиска будет учитывать метрики CWV.

#performance #research

https://calendar.perfplanet.com/2021/have-core-web-vitals-made-the-web-faster/
👍1
Самые интересные факты из веб-альманаха 2021

Стефан Джудис рассказал о наиболее интересных фактах из веб-альманаха 2021 года — "Highlights of the Web Almanac 2021".

Каждый год майнтейнеры HTTP Archive и активные участники сообщества составляют веб-альманах — слепок текущего состояния веба на базе исследования более восьми миллионов популярных сайтов. В этом году в веб-альманахе было опубликовано 24 главы про HTTP, HTML, CSS, JS, приватность, производительность и т.п.

Из интересного:
— jQuery используется на 84% сайтов, React — на 8%;
— Wordpress обслуживает 33% просканированных сайтов;
— 94% сайтов используют по крайней мере один сторонний ресурс; подавляющее большинство от сервисов Google;
— если на странице подключается виджет youtube, медианное время блокирования главного потока составляет 1,6 секунд;
— 16% страниц используют бессодержательные названия ссылок: "click here", "read", "more" и т.п.;
— 22% сайтов поставляется с HSTS (HTTP Strict Transport Security);
— на 20% сайтов нет определения атрибута lang.

#web #research

https://www.stefanjudis.com/blog/highlights-from-the-web-almanac-2021/
👍1