#веб-производительность

Многие пишут, рекомендуют sitespeed.io. Спасибо большое! Это качественно и красиво упакованный пакет для автоматизированного тестирования и мониторинга производительности, добавил в список. Ну и лендинг у них классный!

Делюсь золотой шкатулочкой с инструментами для оптимизации веб-страниц:

1. Самый крутой, о котором мало кто знает: Webpagetest. Огненная функция в нем — filmstrip view, где можно по-кадрово отсмотреть, как загружается страница и разглядеть, какой скрипт или стиль виноват в долгой загрузке. Медитируем на него без остановки.

2. Самый простой: PageSpeed Insights, довольно жесткий инструмент от гугла, где быстрая главная медузы набирает 6/100. Мы с командой RAWG последние 2 недели приносили человеческие жертвоприношения на страницу игры и подняли её мобильный рейтинг с 6 до 46, а десктопный — с 40 до 92. Главная польза PSI — простые и понятные советы, часть из которых очень дорого реализовать, но всё по делу. Вообще, его отчеты — отличный учебник по современной оптимизации для веб-разработчика. Дополнительный бонус — исходный код движка PSI, Lighthose открытый, можно посмотреть, за что именно дают или снимают баллы.

3. Google Chrome. Нам нужны две функции — первая, это Lighthouse (движок PSI из предыдущего пункта). Вторая — возможность затормозить сеть (вкладка Network) и затормозить процессор (вкладка Timeline). Позволяет отследить проблемы, которые на быстром интернете и мощном процессоре не заметны.

4. GTMetrix, многофукциональный комбайн, вдобавок к стандартным метрикам оценивает использование CDN, SSL и много других мелочей.

5. sitespeed.io: крутой инструмент для автоматизированного тестирования (докер образ, легкая интеграция в дэшборд графаны), внутри комбинирует множество опенсорс-утилит.

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

Если я забыл что-то важное — маякните в личку @samatg или в чатик @ctodailychat, пожалуйста.

Да пребудет с вами сила оптимизации!

Google-2018:

1. Выпускаем новую версию Gmail, которая грузится в 7 раз дольше, чем предыдущая, скачивает 7 мегабайт по сети, тормозит на игровых компьютерах и не работает без интернета (прошлая версия работала).
2. Создаем сайт «web.dev», где учим всех разрабатывать быстрые сайты, способные работать без интернета.
3. Profit.

Что-то я всё про индустрию и совсем мало про технологии. Интересная статья про то, как The Outline (очень модное медиа) программируют свой сайт на Elixir. Вкратце — никаких фронтенд-фреймворков, генерируют html в Phoenix шаблонах, где нужно — пишут руками чуть-чуть джаваскрипта (для комментариев, например) и включают turbolinks. Страницы отдаются менее чем за 90 миллисекунд, за счет этого не нужен никакой CDN, можно делать динамический контент на каждого пользователя.

Вот такие технари нужны в медиа. Шебутные, желающие пробовать новое и при этом делающие реальный продукт, а не витающие в облаках.

Прям чувствуется воздух свободы в этой статье.

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

Мы переработали схему. Теперь, при первом открытии сайта показываются системные шрифты, а при всех следующих заходах — наши. Без каких-либо дерганий.

Оптимизация веба для скорости — бесконечно большая и интересная тема. Мы пока выбираем 80% процентов профита, достигаемые первыми 20% труда.

Если кто-нибудь поможет и объяснит, почему время от времени запрос становится Stalled (главная, на минуточку!) — буду очень благодарен.

Чувак долго вопил, что у BBC очень тормозной сайт и год назад ему дали возможность попробовать переделать главную. Наконец, она уже почти в продакшене. Вот пост-представление и можно посмотреть demo. В минимальной версии сотня запросов на более чем полмегабайта превратились в 3 запроса в 39KB. Внутри стандартные приемы + хардкор вроде preact'а. У Джозефа объяснение такое, что «у всех мобилы + много дешевых телефонов и плохого интернета в Индии».

Для Россиян — я бы не сбрасывал со счетов китайские андроиды и московский 3G 👹, так что для нас это всё тоже актуально.

Мы в Медузе давно бьемся за производительность и скорость рендеринга, но нам есть куда расти (то есть ужиматься), работаем дальше.