Экономим трафик

Чем меньше объем скачиваемых из сети файлов, тем быстрее отображается страница в браузере. Особенно это заметно на мобильных устройствах.

Оптимизация всего подряд может отнять массу времени и сил. Часто оно того не стоит. Выделить главное поможет вкладка “Network” в Chrome Developer Tools. Смотрим какие ресурсы загружаются, каков их размер, затем отбираем самые “жирные” файлы и с них начинаем.

Рассмотрим, что можно предпринять.

Отключить все лишнее

Отключаем неиспользуемые CSS и JS библиотеки, шрифты и прочие ресурсы.

Использовать минифицированные версии библиотек

Например, при подключении Boostrap вместо ссылки https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css можно использовать ужатую версию с другим адресом https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css.

Аналогичный трюк можно провернуть с JavaScript, он тоже поддается минификации. Популярные библиотеки всегда можно скачать в сжатом варианте.

Сжать картинки

Сжимаем картинки под актуальное разрешение необходимое на сайте.

Здесь стоит учесть что на Retina-экранах — это новые MacBook Pro и IPad, а также новинки от других производителей — используется разрешение в два раза выше чем на обычном экране. Одному CSS пикселю соответствует два физических пикселя экрана. Например, такой блок:

<div style="height: 200px; width=300px;"></div>

Займет 200x300 пикселей на обычном экране и 400x600 пикселей на Retina-экране.

Чтобы показать фотографию 200x300 пикселей на экране с увеличенной плотностью пикселов необходимо загрузить фото размером 400x600 пикселей и уменьшить его, используя CSS-аттрибуты или HTML-параметры.

Подробнее тема разобрана в статье на Хабрахабр.

Использовать gzip сжатие на веб-сервере

Обычно это делает Nginx, у него хорошо получается. При необходимости задачу также можно возложить на Django.

Проверить сайт в YSlow

К рекомендациям YSlow стоит прислушаться.