1. Оптимизируем скорость
загрузки страницы
Алиев. В.

2. Зачем это нужно вообще?
 Все любят скорость
 Лимитирован трафик
 Ограничение по скорости
 Роботы тоже любят скорость

3. Ну и как это сделать?

4. Это просто!

5. Настройка бэкенда (совсем чуть-чуть)
 nginx+apache (правильная настройка)
 Двухуровневая конфигурация веб-сервера Front-End и Back-End
Идеально написано тут
http://dev.1c-
bitrix.ru/learning/course/index.php?COURSE_ID=32&CHAPTER_ID=04900
 Используем Gzip- сжатие
 Различные акселераторы для PHP (APC, eAccelerator )
 Серверное кеширование (храним в memcached а лучше APC )

6. Настройка фронтенда (много-много)

7. 1. Уменьшаем количество HTTP-запросов

8. 2. Оптимизируем изображения
JPEG – отлично подходят для детализированых изображений с большим количеством
цветов, такие как фотографии.
PNG – ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.
Иструменты:
www.punypng.com
Smush.it
www.jpegmini.com
https://kraken.io/

9. 3. CSS мне в HEAD
Помещая подключение к css файлам в хедере страницы мы получаем
постепенный рендеринг страницы

10. 4. JS мне в ...
Помещая javascript-файлы вниз страницы мы позволяем браузеру загрузить
страницу с контентом в первую очередь, а уже потом начать загрузку javascript-
файлов.

11. 5. Минификация и Конкатенация
(JS и CSS )
У нас
 Some1.js
 Some2.js
 Some3.js
Нужно
 MegaSome.min.js

12. 6. CSS спрайты
Отлично подходят для UI
элементов

13. 7. Шрифты стандартные
.. либо гугл фонт (только нужные гарнитуры).

14. 8. Опять про изображения…
 Не масштабируйте изображения
 Все изображения должны иметь атрибуты width и height
 CSS3 вместо картинок
 Inline картинки data:[<MIME-type>][;charset=<encoding>][;base64],<data>

15. 9. Браузерное кеширование
Правильная настройка Apache и использование HTTP-заголовков Expires

16. 10. CND (Content Delivery Network)
Это множество веб-серверов, разнесенных географически для достижения
максимальной скорости отдачи контента клиенту.

17. 11. Убрать не нужное
 Мертвый CSS, JS

18. Как замерить результат оптимизации?
 http://gtmetrix.com/
 http://developers.google.com/speed/pagespeed/insights/
 http://tools.pingdom.com/fpt/
 http://www.webpagetest.org/

19. Спасибо за внимание 
Вопросы?