В рейтинге участвует:

групп:

каналов:

Виртуальный сервер на SSD - недорого!

Аренда выделенных и виртуальных серверов (VDS/VPS), хостинг, аренда IP-адресов, администрирование, круглосуточная поддержка

qwarta.ru подробнее

Резервное копирование с проверкой на вирусы!!!

Удобный сервис создания резервных копий на любой сервер сети интернет. Отслеживайте изменения, проверяйте на вирусы. Надежно защитите свой бизнес!

go.backupland.com

Выбираете сервер? Любая конфигурация на заказ!

Аренда физических серверов любых конфигураций под любые запросы - 1С бухгалтерия, игровые сервера, нагруженные проекты, интернет-магазины!

qwarta.ru подробнее

Size: a a a

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

3319 membersпожаловаться на группу
2020 June 10
Иван Акулов про разработку
​​✏️ Кеширование одной строкой

Вот как настроить два самых частых случая:

Для API-запросов (ресурсы типа /api/user) — отключить вообще:

Cache-Control: private, no-store

— private отключит кеширование во всяких CDN-ах (Cloudflare и т.д.) и прокси-серверах (Nginx/Apache/Varnish и т.д.)
— no-store попросит браузер не сохранять API-ответ вообще — и каждый раз делать новый запрос

•••

Для статики с хешем в имени (ресурсы типа /static/bundle-ab3f67.js) — закешировать раз и навсегда:

Cache-Control: max-age=31556952, immutable

— max-age=31556952 включит кеширование на целый год
— immutable скажет браузеру, что ресурс перезагружать вообще никогда не нужно
источник
244320:00пожаловаться#1
Иван Акулов про разработку
​​⚛️ Facebook, Cloudinary и Cache-Control: immutable

А зачем вообще нужен immutable?

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

Но если вы версионируете всю статику, это бесполезно (и даже вредно). Поэтому в 2017 браузеры добавили поддержку Cache-Control: immutable, который это отключает.

— Вот кейс-стади Facebook про то, как они продвинули это нововведение: https://engineering.fb.com/web/this-browser-tweak-saved-60-of-requests-to-facebook/

— И статистика про эффективность от Cloudinary: https://twitter.com/colinbendell/status/1256218497941635072
источник
381520:00пожаловаться#2
2020 June 11
Иван Акулов про разработку
источник
244716:40пожаловаться#3
Иван Акулов про разработку
Экспресс-консалтинг 🚀

Последние три года я (долго и дорого) помогал с производительностью большим компаниям. Теперь я запускаю новый сервис: экспресс-консалтинг.

🕒 Выбираете время → оплачиваете карточкой → созваниваемся на 30-90 минут → обсуждаем любые вопросы → профит

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

💵 Стоимость — от $45 за получасовой колл и до бесконечности

→ https://3perf.com/consulting/
источник
320016:40пожаловаться#4
2020 June 16
Иван Акулов про разработку
​​CSS-хинт: если вы используете overflow: scroll, скорее всего, на самом деле вам нужен overflow: auto.

overflow: scroll означает «показывать скроллбары всегда». На macOS разницы не видно, потому что скроллбары там скрываются. Но на Windows это будет выглядеть вот так ↓

MDN · Демка
источник
281514:56пожаловаться#5
2020 June 19
Иван Акулов про разработку
Телеграм разблокировали в России — а это значит, что и IP 3perf.com теперь не блокируются нигде.

Так что ловите старые хорошие статьи, которые теперь точно можно прочитать:

🔥 Web Performance 101: 90 слайдов про основы веб-перформанса. Как оптимизировать JS, CSS, сеть, картинки и шрифты

✨ Кейс-стади про polished: разбираемся, почему import { A, B } from 'polished' генерирует более крупный вебпак-бандл, чем  import 'polished/A'; import 'polished/B'

🌟 preload, prefetch и другие теги link: полный обзор всех пяти тегов для предзагрузки. Как они ускоряют загрузку, когда их применять и в чём разница

⚡️ Как грузить полифиллы только там, где они нужны: три способа-однострочника
PerfPerfPerf
Web Performance 101: JS, CSS, HTTP, images & fonts
Learn how (and why) to make your app faster by optimizing JS, CSS, images/fonts and other things
источник
284502:16пожаловаться#6
2020 June 20
Иван Акулов про разработку
​​Module Federation

Тобиас Копперс (создатель webpack) опубликовал слайды про Module Federation.

Module Federation — это новая функция в webpack 5 (доступна с beta.16). Она помогает разбивать приложение на части и билдить их независимо. (Как DLLPlugin, но без его недостатков.)

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

👉 (JS Nation) Module Federation in webpack 5
источник
284213:00пожаловаться#7
Иван Акулов про разработку
Что ещё нового в бетах webpack 5 (по сравнению с webpack 4):

— Persistent Caching для ускорения сборки
— Поддержка Yarn PnP из коробки
— Улучшения три-шейкинга (+ три-шейкинг для CommonJS!)
— Top-level await в модулях
GitHub
webpack/changelog-v5
Temporary repo for the changelog for webpack 5. Contribute to webpack/changelog-v5 development by creating an account on GitHub.
источник
363713:00пожаловаться#8
2020 June 23
Иван Акулов про разработку
iamakulov_channel
webp в Safari

Если вы не используете webp из-за того, что он не поддерживается в Safari, то зря. Потому что есть целых два способа сделать так, чтобы все браузеры загружали webp, а Safari — jpeg/png.

1️⃣ Тег <picture>:

<picture>
  <source srcset="./image.webp" type="image/webp">
  <img src="./image.jpg" type="image/jpeg">
</picture>


↑ Такой код загрузит webp-файл везде, где он поддерживается (Chrome/Firefox) — и зафолбечится на jpeg-файл в остальных браузерах. (Больше про это)

2️⃣ CDN-ы

CDN-ы вроде Cloudflare или Cloudinary умеют конвертировать картинки в webp. Подключаете CDN — а он автоматически определяет, поддерживает ли браузер webp, и конвертирует картинку на лету. В Cloudflare это включается опцией Polish, в Cloudinary — параметром f_auto в урле.
⚡️ Новый Safari 14 добавит поддержку webp: https://twitter.com/jensimmons/status/1275171897244823553
Twitter
Jen Simmons
Safari 14 Beta Release Notes • Added WebP • Changed to derive  aspect ratio from size attributes • Added :is() • Added :where() • Safari no longer supports Flash • Added Safari Web Extensions • Added Webpage Translation (Beta) & much more: https://t.co/qO2Cy7rK4A
источник
430801:07пожаловаться#9
2020 June 28
Иван Акулов про разработку
Собрал полсотни советов по перформансу: https://twitter.com/iamakulov/status/1275769142809944064
источник
405822:32пожаловаться#10
2020 July 10
Иван Акулов про разработку
В эту субботу с Никитой Дубко, Полиной Гуртовой и Вадимом Макеевым обсужу самые свежие перф-анонсы с гуглового web.dev LIVE. Приходите :)

Завтра (сб 11 июля) · 12:30 по Мск

https://www.youtube.com/watch?v=5Ks7f-GD3r0
источник
375113:19пожаловаться#11
2020 July 15
Иван Акулов про разработку
​​awesome-webpack-perf обновился! ✨

Добавил пачку новых вебпак-инструментов для веб-перформанса, в том числе:
— esbuild-webpack-plugin
— CSS-in-JS-библиотеки без рантайма
— и новые инструменты для анализа бандла

https://github.com/iamakulov/awesome-webpack-perf
источник
331913:40пожаловаться#12
2020 July 19
Иван Акулов про разработку
📖 Тройка ссылок на воскресенье:

1️⃣ Как Википедия уменьшала JS-бойлерплейт с 36 до 28 кб: https://phabricator.wikimedia.org/phame/live/7/post/175/wikipedia_s_javascript_initialisation_on_a_budget/

Почему 28 кб? 14 кб — это тот объём данных, который сервер отправляет клиенту сразу же после установки соединения. (Больше про это. Ещё больше про это.) Ну а 28 кб — просто 14 кб × 2, красивая цифра.

2️⃣ webp vs jpeg vs avif: https://siipo.la/blog/is-webp-really-better-than-jpeg

Оказывается, если сжимать jpeg-файлы с помощью mozjpeg, то они не крупнее аналогичных webp-картинок.

3️⃣ Проблемы с HTTP/2-приоритизацией: https://blog.cloudflare.com/better-http-2-prioritization-for-a-faster-web/

Одна из фич HTTP/2 — это приоритизация запросов. Если браузеру нужно одновременно загрузить (важные) стили и (неважную) картинку, он может попросить сервер отдать стили быстрее. Cloudflare пишет, почему на практике это работает плохо.
источник
595715:32пожаловаться#13
2020 July 25
Иван Акулов про разработку
​​Мини-хинт: в Lighthouse есть спрятанные бета-аудиты. Они включаются флагом --preset=experimental.

Если запустить последний Lighthouse с этим флагом, то, вдобавок ко всему, он также покажет:
— модули, которые дублируются в бандле
— и полифиллы, которые вы загружаете, но которые в современных браузерах не нужны

(Работает, только если у вас включены соурс-мапы.)

Например, вот Reddit: lighthouse https://reddit.com --preset=experimental 👇
источник
295220:05пожаловаться#14
2020 July 30
Иван Акулов про разработку
​​The main thread is overworked & underpaid

В мобильной разработке есть понятие UI thread — главного потока приложения, который отвечает за всё (включая рисование UI). Чтобы UI рисовался быстро, всю логику из UI thread часто выносят в фоновые потоки.

Дас Сурма в своём докладе призывает перейти на такой же подход в веб-разработке. Если JS выполняется в главном потоке и тормозит страницу, то зачем держать его в этом потоке?

В докладе:
— event loop браузера
— веб-воркеры и абстракции над ними
— клёвый кейс-стади со слабыми телефонами

→ https://www.youtube.com/watch?v=7Rrv9qFMWNM
источник
261420:41пожаловаться#15
Иван Акулов про разработку
​​Самое интересное (для меня) открытие из этого доклада — это библиотека comlink.

Веб-воркеры сами по себе неудобные. Нельзя просто взять и унести функцию в отдельный поток — вы не сможете вызвать её просто так. Придётся городить каналы коммуникации с postMessage.

comlink это красиво прячет. Классы и функции остаются такими же — вам нужно только поставить await перед вызовом ↓

(библиотека · загрузчик для webpack)
источник
255720:41пожаловаться#16
Иван Акулов про разработку
(Ещё про потоки: https://t.me/iamakulov_channel/499)
Telegram
Иван Акулов про разработку
Фреймворки в веб-воркере

Веб поддерживает многопоточность (с помощью веб-воркеров) уже 10 лет. Тем не менее, весь JS, который мы пишем, по-прежнему обычно работает только в главном потоке. Из-за этого любые долгие операции блокируют всю страницу намертво.

Крутым решением было бы научить React, Vue, Svelte и т.п. работать из веб-воркеров — а в главном потоке оставить только обновление DOM. Шабхи Паникер из команды Chrome исследует этот подход (и другие) и пишет, почему сегодня это нереалистично: https://docs.google.com/document/d/1nu0EcVNC3jtmUVWL8Gs5eCj2p_984kamNhG2nS9gOC0/edit
источник
278720:41пожаловаться#17
2020 August 02
Иван Акулов про разработку
📖 Тройка ссылок на воскресенье:

1️⃣ Как link rel="prefetch" работает на практике: https://andydavies.me/blog/2020/07/08/rel-equals-prefetch-and-the-importance-of-effective-http-slash-2-prioritisation/

Тег <link rel="prefetch"> просит браузер загрузить что-то с минимальным приоритетом — то есть после того, как все важные запросы уже завершились.

Звучит хорошо, но на деле работает неидеально. (Как ни странно, не из-за браузеров, а из-за серверов.)

2️⃣ Почему Netlify отдаёт все ресурсы с Cache-Control: max-age=0: https://www.netlify.com/blog/2017/02/23/better-living-through-caching/

Не баг, а фича™.

3️⃣ HTML-страничка, которая загружала саму себя: https://dev.to/paulcalvano/investigating-duplicate-html-requests-on-a-page-load-2eog

Оказывается, когда браузер встречает тег с пустым URL — типа, <video src="#"> или background-image: url(' ') — он интерпретирует этот путь как относительный. И пытается загрузить текущую страницу ещё раз. От такого, конечно, плохо и клиенту, и серверу.
источник
310616:02пожаловаться#18
2020 August 11
Иван Акулов про разработку
​​«Мир, в котором IPv6 был хорошей идеей»

Клёвый лонгрид 2017 года про компьютерные сети и протоколы.

— Как развивался интернет и почему сейчас в сетевых протоколах сущий ад
— Как IPv6 должен был это всё решить (но не решил)
— Почему IPv4 никогда не уйдёт в прошлое
— И как QUIC/HTTP3, возможно, всё же поправит всю эту ситуацию

→ https://apenwarr.ca/log/20170810
источник
258820:00пожаловаться#19
Иван Акулов про разработку
Новые перформанс-фичи

А также пара новых фич из Chrome за последние недели:

1️⃣ В Chrome добавили поддержку CSS-свойства content-visibility. (Статья на web.dev.)

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

2️⃣ В DevTools появилась экспериментальная панель CSS Overview (нужно включить вручную).

Из интересного — панель показывает, какие CSS-свойства не нужны (и зря занимают место в стилях) ↓. Пока, правда, я увидел только кейсы с vertical-align — непонятно, будет ли что-то ещё.
источник
285020:18пожаловаться#20