2. Что можно оптимизировать?
Время загрузки Скорость работы
страницы интерфейсов
Уменьшение размера Взаимодействия с DOM
данных JS сценарии
Уменьшение числа ...
запросов
...
Стр 2 из 376
8. Оптимизация изображений
JPEG:
- формат с потерей качества
- уменьшаем цвета
- чистим мусор (шум)
- В Photoshop сохраняем в качестве от 51 до 95
Прогрессивный <img> JPEG (Firefox, Chrome, Opera, IE9+)
10. Оптимизация изображений
Такие разные PNG:
1. PNG-24
- доступна вся цветовая палитра
- возможен любой уровень прозрачности
2. PNG-8
- палитра 256 цветов
- прозрачность или 0% или 100%
3. PNG-8 с альфа-прозрачностью
- палитра 256 цветов
- возможен любой уровень прозрачности
14. Оптимизация CSS
1. Все внешние таблицы стилей в head (в идеале 1 css)
2. Минимизация css (CSSMin, Minify, YUI-compressor, CSS Minifier,
CSS Tidy)
3. Gzip cжатие css ( ~ 70-80% )
15. Оптимизация JavaScript
1. Все внешние js скрипты перед </body>, а лучше в постзагрузку
(в идеале 1 js файл)
2. Минимизация js (JSMin, JavaScript Minifier, Dojo ShrinkSafe aka
Rhino, YUI Compressor, Closure Compiler)
3. Gzip cжатие JavaScript ( ~ 60-70% )
Время загрузки = Время скачивания + Время исполнения
16. Оптимизация JavaScript
Если включен gzip лучше не использовать Dean Edwards Packer
SIZE (KB) GZIP(KB)
jq.uncompressed.js 277.9 92.6
jq.compressed.js 92.6 32.7
jq.closure-compiler-whitespace.js 142.2 41.0
jq.closure-compiler-simple.js 93.5 33.7
jq.packer.js 75.5 36.3
18. Кэширование
При первом посещении сайта ресурсы еще не в кэше
Небольшой размер кэша у мобильных браузеров:
- iOS Safari не имеет дискового кэша
- у Android кэш ограничен 20Мб
Фоновая предзагрузка в кэш
19. Кэширование
Простое кэширование:
Etag: "d8432-1851f-4d83418c05700" (Server->Browser)
If-None-Match: "d8432-1851f-4d83418c05700" (Browser->Server)
Last-Modified: Mon, 18 Mar 2013 14:49:32 GMT (Server->Browser)
If-Modified-Since: Mon, 18 Mar 2013 14:49:32 GMT (Browser->Server)
Ответ: 200 OK или 304 Not Modified
30. Организация загрузки
Этап 1: Основная загрузка (html, css, images, js)
1. доставка контента и оформления
2. загрузка только необходимого функционала
- порядок загрузки элементов
Этап 2: Постзагрузка / Загрузка по запросу
1. дополнительный функционал, доп. изображения
2. сторонние виджеты
3. кэширование дополнительных ресурсов