15 способов уменьшить вес страницы

Технологии улучшаются и скорость интернета растет, а в веб-разработке (в частности мобильной) погоня за уменьшением веса страницы и за скоростью загрузки данных при медленном соединении продолжается. Так, сегодня речь пойдет о том, как можно уменьшить вес страницы, чтобы она быстренько попала к пользователю на девайс.


1) Активируйте GZIP

gzip (GNU Zip) — утилита сжатия и восстановления (декомпрессии) файлов, использующая алгоритм DEFLATE. Используется в основном в UNIX-системах, в ряде которых является стандартом де-факто для сжатия данных.

Когда клиент запрашивает через браузер страницу, на сервере данная страница сжимается с помощью gzip. В результате, размер страницы заметно сокращается, и после этого она отдаётся браузеру. Поскольку размер значительно меньше, то и загружается в браузере она намного быстрее. Браузер, получив сжатую страницу, начинает её распаковывать и выводить пользователю. Обратите внимание, что сжимается только текст. Все отдаваемые изображения, видео, музыка и прочая мультимедиа никак не сжимается.

В .htaccess прописываем следующее:

<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/css <IfModule mod_setenvif.c> BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html </IfModule> </IfModule> 

Теперь надо на все страницы сайта (если это движок, то, как правило, в index.php) надо добавить следующее:

ini_set('zlib.output_compression', 'On'); ini_set('zlib.output_compression_level', '1'); 

2) Включите кеширование на стороне браузера

Если браузер пользователя умеет кешировать файлы, то ему не обязательно каждый раз их загружать заново. Согласны?

В .htaccess прописываем следующее:

<IfModule mod_expires.c>  ExpiresActive On   <FilesMatch "\.(jpg|jpeg|png|gif|svg)$"> ExpiresDefault "access plus 1 month" </FilesMatch>   </IfModule> 

3) Используйте Content Delivery Network (CDN)

CDN, если переводить дословно, это сеть доставки контента (Content Delivery Network). Под словом контент в данном случае подразумеваются статические ресурсы, которые мы используем на сайте: JavaScript библиотеки, файлы каскадных стилей (CSS), изображения в форматах (PNG, JPEG, GIF), flash (SWF) файлы, архивы (ZIP, RAR и другие), документы и любые бинарные файлики.

А под словами Сеть доставки подразумевают набор серверов разнесенных географически. Файлы на таких серверах синхронизируются и при необходимости пользователя получить файл – сервера между собой решают, кто будет отдавать файл. Таким образом, идет баллансировка нагрузки и увеличение скорости отклика и скорости передачи файла конечному пользователю или клиенту.

4) Удалите неиспользуемые компоненты

Здесь всё просто. Если виджет, плагин или компонент не используется пользователем, то все его CSS и JavaScript не должны загружаться.

5) Объединяем CSS и JavaScript в один файл

Если CSS и JavaScript находятся в одном файле, то они загружаются единожды (меньше HTTP-запросов) и быстрее, если бы браузер загружал код из нескольких файлов.

6) Сжимайте JavaScript код

Для этого используем YUI Compressor, Closure Compiler или The JavaScript CompressorRater. Однако, вы должны быть осторожны, так как компрессоры JavaScript могут выдать на выходе неожиданный результат, если у вас плохой код — например где-то отсутствует запятая.

7) Используйте правильный формат изображений

Использование неправильного формата изображений может увеличить вес вашей страницы. В общем:

— использовать JPG для фотографий;
— использовать PNG для всего остального.

8) Изменяйте размер больших изображений

Размеры изображений не должны превышать максимальный размер их контейнера (блока, в котором они находятся). Если шаблон имеет максимальную ширину 800 пикселей, изображение не должно иметь ширину, шире этой.

Изменение размера изображения оказывает существенное влияние на вес страницы.

9) Сжимайте изображения

Идем дальше. Даже если вы перегнали изображения в нужный формат (см. пункт выше) и изменили их размеры, нужно сжать изображения. В этом помогут инструменты, которые анализируют и оптимизируют графику. К ним относятся OptiPNG, PNGOUT, ​​jpegtran и jpegoptim.

10) Удалите ненужные шрифты

Если вы используете более чем два или три шрифта одновременно, вам, возможно, важно не переусердствовать с этим занятием. Ваш клиент или босс может любить красивые почерки шрифтов, но, если один шрифт используется только для одного названия, стоит ли загружать файл весом в 200KB? Нет, не стоит.

11) Удалите кнопки социальных сетей

У вас есть кнопки шаринга в Facebook, Twitter, VK, Google+ и LinkedIn? Они могут занимать до нескольких сот килобайт. Задумайтесь стоит ли их добавлять.

12) Замените изображения на CSS3 эффекты

Вы используете нарезки изображений для создания градиентов, округлений границ и тени? Надеюсь, что нет — CSS3 делает такие методы излишними.

13) Замените JavaScript с эффектами и анимациями на аналоги в CSS3

В вашем JavaScript коде можно встретить такое $(«#x»).fade() или такое $(«#y»).slideDown()? Это было уместно несколько лет назад, но не теперь, когда есть возможность всё это сделать с помощью CSS3.

14) Может стоит использовать SVG?

SVG содержит точки, линии и формы, которые определены в качестве векторов, которые хранятся в XML формате. SVG идеально подходит для esponsive designs, так как он будет масштабироваться до нужного размера без потери качества. Размера файла SVG часто меньше, чем растровое изображение.

15) Используйте спрайты для изображений

Зачем? Сокращение числа HTTP-запросов. Чем их меньше, тем меньше нагрузка на сервер и тем быстрее загрузится сайт – всё просто.

.sprite {     width: 16px;     height: 16px;     background: url("sprite.png") 0 0 no-repeat; }  .sprite.help { background-position: 0 -16px; } .sprite.info { background-position: 0 -32px; } .sprite.user { background-position: 0 -48px; } 

---

За основу написания данного поста я брал статьи Quick and Easy Fixes to Reduce Page Weight и Tougher Tasks to Reduce Page Weight. Что-то просто перевел, что-то изменил, что-то дополнил, что-то добавил. В итоге получился вот этот пост.