Поизводительность верстки: highload style

12
Оптимизация фронтенда сайта для highload проектов. www.turnkeye.ru

description

Оптимизация фронтенда сайта для highload проектов.

Transcript of Поизводительность верстки: highload style

Page 1: Поизводительность верстки: highload style

Оптимизация фронтенда сайта для highload проектов.

www.turnkeye.ru

Page 2: Поизводительность верстки: highload style

Как подготовить проект для высокой нагрузки,

оптимизируя только frontend?

* допустим сервер/php/mysql и прочее настроены и работают идеально

Page 3: Поизводительность верстки: highload style

Но минутку, это же “просто” верстка?

При чем здесь Highload?Highload относится только к

серверу...

Page 4: Поизводительность верстки: highload style

Откуда берется страница в браузере

Page 5: Поизводительность верстки: highload style

Абстрактные примеры

Page 6: Поизводительность верстки: highload style

Что можно оптимизировать (группы)- уменьшение общего объема передаваемых данных

- уменьшение количества запросов к серверу

- кеширование браузера

- оптимизировать рендериг страницы

Page 7: Поизводительность верстки: highload style

Уменьшение общего объема передаваемых данных

- gzip- minify css/js/html- optimize images

Google Pagespeed

Page 8: Поизводительность верстки: highload style

Уменьшение количества запросов к серверу

- CDN- combine JS / CSS- inline images in CSS / sprites- lazy loading

Page 9: Поизводительность верстки: highload style

кеширование браузера

Page 10: Поизводительность верстки: highload style

кеширование браузера

Page 11: Поизводительность верстки: highload style

подводные камни

- кеширование vs HTTPS- кривой контент клиента- CDN & gzip / expire date- CDN fonts - responsive design ?