My presentation on wep purple meetup, about web perfomance, and about it media lifestyle

1. Web Performance и не только

2. Почему я об этом рассказываю?
• Я тот парень, что ускорил штук 10 сайтов.
• Я тот парень, что любит их ускорять.
• Я тот парень, что любит рассказывать истории.

3. О чем не расскажу
• О супер новинках. Не успеваешь изучать, а они уже
устаревают
• О распределенных системах.
• О бэкенде (но чуть-чуть расскажу)

4. Тестовый проект: входные данные
• Время загрузки страницы 8.3s
• YSlow 64%
• PageSpeed 85%
• Google Desktop 69
• Google Mobile 60

5. Тестовый проект: результат

6. Тестовый проект: результат

7. Пора! Импортозамещение!

8. Успех

9. Смешное
• Дональд Трамп, из стран первого мира который нанимает
людей из Пакистана
• ПакистанГуру был здесь
• Нюансы, если интересно

10. Зачем ускорять?
•Быстрей работает. Удобно.
•Что-то там про британских ученых, которые
посчитали что ежели сайт открывается дольше
3 секунд, то всё плохо.
•Гугл официально признал что скорость
открытия сайта это фактор ранжирования в
поиске. Чем ниже тем выше.
•Это приятно.

11. Основа
• Меньше запросов
• Быстрее ответ сервера
• Меньше доменов
• Жми картинки

12. CDN
•Что это? Зачем?
•Какие есть?
•Cloudflare
•KeyCDN
•Какие есть аналоги в России?
•Мегафон
•Айри

13. Cloudflare
+Бесплатная базовая версия
+Сертификат SSL нахаляву
+DDOS защита
+Работа с выключенным сайтом
‐ Блокировка в рос реестре по IP адресу
‐ Заграница. Потеря в каждом запросе 10мс. 100 реквестов ~ 1
секунда. Но за счет отдачи статики количество запросов
уменьшается.

14. Меньше запросов
• CSS
• JS
• Sprite / Inline‐картинки
• Шрифты
• Сервер

15. CSS
• Объединяем CSS
• Минифицируем
• Убиваем все @import
• Все эти гугл шрифты в топку
• https://github.com/typekit/webfontloader async font loader
• Шрифты в base62‐encoded
• Меньше, еще меньше запросов
• Минифицированный CSS после первого экрана. Киллер фича.
• Придется залезть в бэкенд, поцаны.
• https://developers.google.com/web/fundamentals/performance/critical‐rendering‐
path/page‐speed‐rules‐and‐recommendations

16. JS
• Объединяем
• Минифицируем
• Не блокируем
• Async
• Вниз страницы
• http://www.feedthebot.com/pagespeed/defer‐loading‐javascript.html
• Сам не знаю, но молва идет:
• requirejs

17. JS

18. Как минифицировать и
комбинировать?
• Руками
• Сборщиками
• Средствами CMS/плагинами/своим кодом
• Через CDN

19. Картинки
• Абсолютное зло
• Меньше лучше, жмем, удаляем альфа‐каналы в PNG
• Гугл по умолчанию предлагает плоху версию сжатых картинок
• http://scottjehl.github.io/picturefill/
• Не генерьте их на лету (‐:

20. Не используйте CDN для популярных
библиотек
• Используйте голову
• Это самый частый совет
• В результате я видел 15 CDN у одного чудака
• Jquerry
• Bootstrap
• Font‐awesome
• Google‐fonts
• Etc
Все они с SSL то есть дополнительно жмут руки.
Все они требуют Resolve процедуры. Не надо так.

21. CDN/поддомен для статики
• Зачем?
• Параллельные запросы. HTTP/1.1 на браузеры накладываются
ограничения на количество одновременно загружаемых компонентов
сайта. Не более 2‐х компонентов с одного хоста
• Как проще всего?
• Символическая ссылка
• Особенности
• Куки‐фри

22. Что хорошо для DOM
• Не сжимайте картинки через CSS
• Указывайте width и height картинок
• AJAX для всякой фигни
• Меньше элементов (пример про лошадок)
• Шутки от word
• <a></a><span></span> Привет wysiwyg

23. Предупредительный выстрел
Prefetch, Preconnect

24. Настройка сервера
• У нас же про фронтенд 
• Включите GZIP
• Включите кэширование браузером
Придется покопаться в apache .htaccess или конфигах nginx. Ну или
где вы там копаетесь на IIS.

25. Средства диагностики
• https://gtmetrix.com/
• https://developers.google.com/speed/pagespeed/insights/
• Консоль хрома/лисы/ie (лал)
• Не доверяйте этим пацанам безоговорочно
• Пример с джери-китчен (css в шапке)
• Пример с картинками от гугла
• Пример с AJAX.

26. Chrome debugger

27. Сразу видны проблемы. Удобно

28. HTTP/2
• Combine, minify, sprite, domain sharding. Офигенно.
• Обязательно SSL. Сервисы типа https://letsencrypt.org/
• Все нормальные CDN поддерживают.
• 71% браузеров. Привет IE.

29. HTTP/2 — пример внедрения

30. HTTP/2
• https://httpd.apache.org/docs/2.4/mod/mod_http2.html
• https://www.nginx.com/blog/nginx-1-9-5/
• http://blogs.iis.net/davidso/http2
• https://www.smashingmagazine.com/2016/02/getting-ready-for-
http2/

31. Новая фигня
• BPG
• http://eek.stfi.re/why-bpg-will-replace-gifs-and-not-only
• Webpack
• http://blog.tighten.co/unpacking-webpack

32. AJAX штуки. Еще раз.
• Пример про яблоки.
• Пример про проект на AJAX.

33. Почти закончил
• Velocity Conference
• https://www.smashingmagazine.com/tag/performance/
• Гугл
• Гугл. Результаты поиска.

34. Перфоманс но не веб
• Почему я?
• У меня недавно это спросили, и я очень долго отвечал.
• Это некий лингвистический трюк.

35. Задайте себе 1 вопрос:
Что будет если моя компания закроется?

36. Блог
• О чем?
• Когда?
• Зачем?
• Это всё очевидно.
• Я не хочу быть кэпом.
• Это то что останется после меня.
• Пример хантинга и блога.
• Пример халтуры и блога.
• Пример необычной халтуры и блога.

37. Контент не король

38. Но контент тоже важен
• О чем писать?
• О работе
• Об опыте
• О странных задачах, которые были решены
• Нужен режим «думания» определенный. Когда ты повсюду
видишь темы для блога.
• Только натренировать. Повсюду примеры плохого сервиса. Плохих
интерфейсов.
• Странные историй. Странный маркетинг. Странная жизнь.

39. Что делать дальше?
• Что мотивирует вести блог?

40. Нюансы
• Что демотивирует?
• Универсальные ответы.
• Регулярность.
• От чего то придется отказаться. Расставашки всегда грустняшки.
• Пишите человеческим языком.
• Представьте что вы это рассказываете своему дружку
программисту.
• Если пишите сложное, то представьте вместо дружка маму.
• Думайте как программист/дизайнер. Делайте тексты
спроектированными. Тестируйте.

41. Как научиться писать как господь?
• Просто писать. Это как с кодом.
• Совет Ганди:
• Сначала они тебя не замечают;
• Потом смеются над тобой, затем;
• …
• Затем они продолжают смеяться над тобой
• …
• Смеются суки.
• …
• Вы продаете ссылки с блога на сапе по 100 рублей за шткуку.
Success!

42. Что дало мне?
• Куча экспертизы в разных делах.
• Нет лучше учебы, чем попытка описать свой опыт.
• Заказы. Притом самые жирные всегда через блог. Аналитика и
калтрекинг рулит.
• Странные заказы.
• Деньги.
• Слава.
• Женщины.
• Два выступления на рязанском митапе (!)
• Оплата моего труда как синьёра-помидора, хотя я джуниор
• Я больше не джуниор (на самом деле нет)
• Я стал коучом (коучером?).

43. Кроме блога?
• Комьюнити.
• Чтобы стать Буддой надо делать вид что ты Будда.
• Мой пример с этим митапом.
• Что будет потом.
• Выступления.
• Срач.
• Пример моих срач проектов.
• Пример результатов.

44. Теперь всё
•Давайте пойдем на афтепати уже!