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

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

В данной статье рассмотрим, как «посадить сайт на диету» не давая ему тонны кода и подгружаемого контента.

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

 1. Gzip

gzip – друг ваш. С его помощью можно сжать всю текстовую составляющую еще на сервере, до отправки в браузер. Тем самым гораздо уменьшив оббьем информации передаваемой через интернет. Браузер, с той же легкостью, распакует и отобразит на экране пользователя. Например, в случаи с Apache делается это достаточно просто, нужно лишь добавить строки в .htaccess:

AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript

 2.  Визуальная составляющая

Спрайты: один файл картинки – 10 элементов дизайна. Тем самым сократите количество загружаемых файлов (Мы ведь помним, что браузер не может загружать бесконечное количество файлов одновременно). Оставляйте минимум места между элементами в картинке и удаляйте все ненужные метаданные из файлов картинок, которые не как не используются браузером, но влияют на скорость загрузки. Использовать спрайты достаточно легко

.sprite {
width: 10px;
height: 10px;
background: url("style.png") 0 0 no-repeat;}
.sprite.home {
background-position: 0 -10px; }

Также используете масштабирование картинок рационально. Если на сайте используется картинка размером 100х100px не нужно подгружать её размером 1900х1200px и масштабировать её в коде <img width="100" height="100" src="logo.jpg" >- так только тратится время на загрузку картинки.и сжимайте их до беспредела, например, с помощью ImageOptim, OptiPNG, PNGOUTи т.п. или заменяйте изображения на CSS3 эффекты, в некоторых случаях они могут полноценно заменить анимированные изображения, javaанимации или просто картинки. В этот же пункт хочется отметить про удаление лишних шрифтов, не стоит использовать больше 2х шрифтов на одном сайте, они занимают немало места, поэтому не злоупотребляйте этим, также есть утилиты, которые могут обрезать файл шрифта, оставив только те знаки, которые вам необходимы.

3. Оптимизируйте работу с jQuery

  • Во-первых, используйте последнюю версию, ведь разработчики трудятся над улучшение кода, а следовательно делают его быстрее и, возможно, легче. 
  • Во-вторых, не используйте jQuery на простых задачах, даже если функционал, для её выполнения есть в библиотеке, вполне возможно, что простой JavaScript затратит меньше ресурсов и сделает, всё тоже самое быстрее. 
  • Да и сам JavaScript в добавок сжимайте, например, с помощью The JavaScript CompressorRater или YUI Compressor, только будьте внимательны, если у вас плохой код компрессоры могут выдать непредсказуемый результат.
  • Объединяйте все JS в один файл, это улучшит скорость загрузки и уменьшит оббьем данных.

4. Чистите Код

Избавьтесь от всего лишнего в коде. Любые комментарии кода – это хорошо, для вас. Но, по факту: вы нагружаете css, html, JavaScript-файлы лишним объёмом данных, удалите все комментарии, пробелы, отступы и т.п. Браузер и без всего этого отлично читает и обрабатывает код. Также удалите все не используемые компоненты, если пользователь не использует их, то и не нужно их подгружать в css, JavaScript и т.д. Так же можно почистить код с помощью специальных утилит, например для CSS это можно сделать с помощью программы "Prepros". Не забывайте что каждый, уделенный символ это -8бит для вашего сайта. Так бит за битом вы сделайте ваш сайт очень легким и быстрым.

5. Используйте кэширование в браузере

Как бы ни был легок ваш сайт, не стоит пренебрегать кэширование. С его помощью можно уменьшить подгружаемую часть сайта до минимума. В предыдущей статье «10 способов сделать ваш сайт быстрее» мы рассказывали о том, как можно продлить время хранения кэша в браузере на необходимый Вам промежуток времени и особенности обновления файлов при таком продлении.

Надеемся, что наша статья помогла вам снизить размер страниц. И сэкономить гигабайты трафика. Оставляйте свои вопросы и пожелания в комментариях под статьей.
devicehit.ru


Теги: сайт на диету уменьшение веса страцы

Читайте также по теме статьи «5 способов уменьшить размер страницы»:


Актуально