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

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

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

GZIP

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)

Content Delivery Network (CDN)

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) Удалите ненужные шрифты

fonts

fonts

Если вы используете более чем два или три шрифта одновременно, вам, возможно, важно не переусердствовать с этим занятием. Ваш клиент или босс может любить красивые почерки шрифтов, но, если один шрифт используется только для одного названия, стоит ли загружать файл весом в 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. Что-то просто перевел, что-то изменил, что-то дополнил, что-то добавил, разукрасил изображениями. В итоге получился вот этот пост.

15 способов уменьшить вес страницы
9 votes, 5.00 avg. rating (99% score)

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

  1. Какой оптимальный размер одного изображения?, у нас на сайте https://conceptplus.com.ua/ очень много разных картинок и фото, уже на хостинге сайт больше 900 мб. Из предложенных сервисов дл сжатия какой лучше? (так чтоб качество картинки сильно не терялось. Спасибо.

  2. Каждый день в Николаеве и области проводятся множество мероприятий. Из-за отсутствия одного справочного интернет-портала подавляющее большинство николаевцев упускают много заманчивого в собственном городе. Интернет-сервис city-afisha.com — это редчайший проект города Николаева который призван урегулировать проблему информированности горожан. Портал охватывает максимальное количество событий и мероприятий в Николаеве и области.

    Откуда берутся мероприятия? Огромную часть мероприятий совершенно даром добавляют сами организаторы, так как они имеют интерес в возможных гостях. Таким образом, число охваченных мероприятий будет быстро возрастать, приближаясь к максимальному. Мы приложили немало усилий как для удобства поиска мероприятий, так и для размещения информации о них на city-afisha.com. На главной странице веб-сайта вы видите задуманые мероприятия от ближайшего к более позднему. Вы сможете подобрать в календаре нужную дату (период дат) и выяснить о событиях в этот конкретный день или найти мероприятия в интересующей категории.

    pogoda v nikolaeve

  3. У меня сайт интернет-магазин мобильных аксессуаров Stilbon.in.ua. Как оптимизировать его, чтоб он бил лучшим среди украинской аудитории?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *