Иван Акулов про разработку

@iamakulov_channel Нравится 3

JS · React · веб-перформанс · разработка и архитектура
Твитер: https://twitter.com/iamakulov
Помогу с производительностью: https://3perf.com
По всем вопросам (рекламу не продаю): @iamakulov
Чатик канала: @iamakulov_channel_chat
Гео и язык канала
Россия, Русский
Категория
Технологии


Написать автору
Гео канала
Россия
Язык канала
Русский
Категория
Технологии
Добавлен в индекс
02.08.2017 13:27
реклама
Продажа рекламы на полном автопилоте!
TAGIO профессиональная рекламная платформа для админов
Нужна дешевая реклама в ТГ?
От 100Р за 1000 показов в чистых каналах в 2 клика.
Продавай как Про с TAGIO.pro!
1-я профессиональная рекламная платформа для админов!
3 106
подписчиков
~2k
охват 1 публикации
~759
дневной охват
~3
постов / нед.
63.8%
ERR %
2.7
индекс цитирования
Репосты и упоминания канала
19 упоминаний канала
1 упоминаний публикаций
36 репостов
James Akwuh
Вебня
The Arctic Fox Code Vault
Nothing but Coding
Гудят ссылки
Гудят ссылки
Вебня
Вебня
FSCP
Frontend Guild
Жабаскрипт
Frontend Info
Вебня
ФРОНТ И ЭНД
ФРОНТ И ЭНД
ТОП каналов Telegram
KyivJS
Печеняй!
Печеняй!
ФРОНТ И ЭНД
Вебня
ФРОНТ И ЭНД
HiPO
Frontend Doge
Frontend Doge
Heisen MINDS
Gambala.links
Gambala.links
Каналы, которые цитирует @iamakulov_channel
Вебня
James Akwuh
Канал Ильи Бирмана
Вебня
Вебня
Веб-стандарты
Жабаскрипт
Вебня
Вебня
Вебня
Frontend Weekend
Безос позвонит
TODO: Update the channel name
Remote IT (Inflow)
Родионов
Things I read
Things I read
Родионов
Grumpy Website
Родионов
Grumpy Website
Grumpy Website
Web Tip @ James Akwuh
Design & Productivity
Последние публикации
Удалённые
С упоминаниями
Репосты
​​«Окей, какие решения?»
— Либо не используйте файлы-реэкспорты вообще (иногда это ещё помогает избавиться от циклических зависимостей)
— Либо, если у вас webpack, попробуйте хак с sideEffects: false в папке с реэкспортами: https://twitter.com/wsokra/status/1331909789207638017
«А почему три-шейкинг не помогает?»
Три-шейкинг по-прежнему работает отлично — он удаляет все компоненты, которые не используются в приложении.

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

После того, как браузер загружает бандл, он должен выполнить его — и все модули в нём. Если у вас много модулей, это может занять много времени.

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

Это ухудшает Total Blocking Time и Time to Interactive.

Кейс. Тот же самый клиент удалил файл components/index.js. Это уменьшило время инициализации бандла с 400 до 340 мс.
Читать полностью
​​Файлы-реэкспорты плохи для перформанса — по двум причинам.

✂️ Из-за реэкспортов код-сплиттинг работает хуже

Когда вы импортируете компонент из файла с реэкспортами:

import { Button } from '../components/index.js'

вы импортируете не просто этот компонент, а весь файл components/index.js. Это значит, что вы импортируете всё, что импортирует этот файл (= все другие компоненты). И бандлите это всё в текущий чанк.

Пример. Допустим, у вас есть огромный компонент Icon. Этот компонент используется только в коде, который вы кодсплиттите import()-ом.

Кажется, что Icon должен тоже закодсплиттиться, да? Но этого не произойдёт. Главный чанк импортирует Button из components/index.js — и вместе с этим файлом импортирует и Icon. Из-за этого Icon остаётся в главном чанке.

Кейс. Один клиент, с которым я работал, удалил файл components/index.js и заменил всё прямыми импортами. Бандл уменьшился на 200 кб:
Читать полностью
​​Реэкспорты и перформанс

Так, давайте поговорим про файлы-реэкспорты — и почему они плохи для перформанса.

Файл-реэкспорт — это файл, который реэкспортирует что-то из других файлов. Частый пример — это когда у вас есть папка components/ с компонентами — и в ней лежит файл components/index.js, который экспортирует все компоненты из папки ↓
Читать полностью
Любимый фрагмент в докладе — про галереи на сайтах:

This brings me to unprogressive non-enhancement.

You take some structured content, which follows the vertical flow of the document in a way that everyone understands. Which people traverse easily by either dragging their scroll bar with their mouse, or operating the keyboard using the up and down keys, or using the spacebar.

What you do is you take that, and you
fucking well leave it alone.
Читать полностью
​​Writing Less Damned Code

Клёвый лёгкий доклад на выходные — про то, как делать хорошие приложения, пиша меньше кода: https://vimeo.com/190834530

Доклад рассказывает:
— что ARIA-атрибуты вам не нужны (если нужны, то вы, скорее всего, делаете что-то неправильно)
— как правильно (и как неправильно) верстать отзывчивые сайты
— что галереи и социокнопки — зло
— и как сделать SPA-приложение с нулём строчек JavaScript

В докладе шутки и немного матов (в общем, всё, как надо)

https://vimeo.com/190834530
Читать полностью
Теория и практика Core Web Vitals

26 ноября (чт) выступлю на HolyJS! Вместе с Элизабет Свини (Google) расскажу про Core Web Vitals:

Теория: Элизабет покажет, как CWV связаны с Lighthouse-скором, как этот скор считается и какие у Google планы по развитию CWV
Практика: Я на примере реального сайта покажу, какие штуки влияют на CWV и как их оптимизировать

Приходите :) https://holyjs-moscow.ru/2020/msk/talks/ymy2hqzhonwsav8slq7yx/

(А по ужасно длинному промокоду PerfPerfPerf2020JRG ещё и скидка ~10%)
Читать полностью
Перформанс-нюанс. Оказывается, браузеры не выполнят ни одного скрипта, пока не загрузят все стили страницы ↑

(Загрузка скриптов при этом не откладывается — только исполнение.)

(Источник — «CSS and Network Performance»)
Раунд 2! По рекомендации эйчара поднял оплату до $650/мес. Парт-тайм, ремоут и легкий менторинг тоже остаются в силе.

Если вы хотели заапплаиться, но $400 было слишком дёшево, попробуйте теперь :)
Ищу ассистента 🏔

Привет! Нестандартный пост: я ищу себе классного парт-тайм-ассистента.

— 50% рабочих задач: менеджить документы, пинговать клиентов, контролировать платежи

— 50% личных: курьеры, поездки, покупки, заказы

— Буду рад поменторить — рассказать всё, что знаю про карьеру в айти, фриланс, ИП/налоги и то, как делать собственный бизнес. (Ну а вы как раз увидите это всё вживую)

— Парт-тайм (до 20 часов в неделю), ремоут, $650/месяц

👉 https://www.notion.so/iamakulov/960da52be3b145af91fd2d53bc31daa1
Читать полностью
🙅 Не надо: использовать requestIdleCallback

requestIdleCallback() просит браузер выполнить какой-то код, когда браузер простаивает. Это может показаться идеальным инстументом, чтобы отложить загрузку аналитики. Но это не так.

requestIdleCallback срабатывает всего через 50-100 мс неактивности. 50-100 мс вполне могут выдаться свободными, пока приложение всё ещё инициализируется. В итоге third parties загрузятся слишком рано и заберут главный поток у приложения.
Читать полностью
​​🙅 Не надо: откладывать third party до первого взамодействия

Некоторые сайты откладывают аналитику/рекламу до первого тапа или скролла страницы. Мне кажется, это плохая идея. (Дисклеймер: на реальном проекте я это не проверял.)

Если вы будете грузить рекламу только по первому тапу, то, конечно, это улучшит ваш Lighthouse-счёт. Lighthouse не тапает на страницу, поэтому рекламу он просто не загрузит.

Но:
1) это не улучшит ощущения реальных пользователей. Для реальных пользователей реклама всё равно будет грузиться — а значит, для них сайт всё равно будет тормозить

2) это, скорее всего, не улучшит и SEO. Насколько я знаю, SEO-ранжирование опирается не на Lighthouse, а на Chrome UX Report. А данные Chrome UX Report собираются с реальных пользователей — c тех, у кого реклама загружается.
Читать полностью
​​6️⃣ Удалите с ненужных страниц

Если вы:
— показываете рекламу только на десктопе, а на мобильном прячете, или
— ретаргетите пользователей, которые зашли в корзину, а остальных не ретаргетите

то грузите скрипты рекламы/ретаргетинга только там, где они нужны.

Например, вот как можно настроить GTM, чтобы он загружал скрипт только в корзине:
Читать полностью
​​5️⃣ Замените сервер-сайд-тулом

У Cloudflare, Netlify и кучи других CDN-ов есть сервер-сайд-аналитика. В ней меньше данных, чем в Google Analytics — но если вам нужно просто считать просмотры страниц, её более чем достаточно.

Бонус: сервер-сайд-аналитика не блокируется adblock-ом.
​​4️⃣ Отложите до клика на нужную кнопку

Если у вас на сайте есть какой-то чат-виджет (типа Intercom), это виджет часто не нужен, пока пользователь не кликнет на кнопку чата. При этом виджет всё равно загружается в фоне и забирает на себя CPU-ресурсы.

Если у вас такой случай, загружайте виджет, только когда пользователь нажмёт на кнопку чата:
Читать полностью
​​3️⃣ Отложите до полной загрузки сайта

Бывает, что third-party-скрипт загружается раньше, чем приложение. Такой скрипт может начать выполнять много JS-а и забрать на себя главный поток страницы. Из-за этого приложению придётся дожидаться своей очереди.

Чтобы избежать этого, попробуйте загружать third parties после того, как приложение инициализируется. Например, если у вас Реакт, оберните их в useEffect:
Читать полностью
​​2️⃣ Оберните в таймер

Некоторые third parties можно спокойно загрузить позже — без потерь для бизнеса.

Например:

Маркетологам часто ок отложить загрузку Facebook Pixel на 10-20 секунд. (Facebook Pixel используется, чтобы показывать рекламу тем, кто побывал на сайте — и привести их на сайт снова.)

Посетители, которые закрыли сайт через 10 секунд, часто для такой рекламы неинтересны. Так что если Pixel не успеет их затрекать, бизнес ничего не потеряет.
Читать полностью
​​1️⃣ Проверьте, все ли third parties реально нужны (серьёзно)

Очень часто случается, что маркетинг добавляет какую-то аналитику, использует её неделю-месяц-полгода, а потом перестаёт. А аналитика остаётся.

Чтобы увидеть все third parties, пройдите в DevTools → Network, отфильтруйте по -domain:ваш-домен и посмотрите, есть ли что-то ненужное в колонке Domain:
Читать полностью