10 быстрых и простых советов для уменьшения размера страниц.

Средний размер веб-страниц за 2013 год вырос на 32% и достиг невероятных размеров 1.7 Mb с сотней HTTP запросов. Конечно, это средняя картина... Половина из общего числа сайтов будет больше. Ожирение веб-сайтов переросло в стадию ожирения и виновны в этом мы - web-разработчики.

Избыточный размер страниц неблагоприятно влияет на результаты работы сайта:

  1. Большой размер загрузки замедляет процесс просмотра. Далеко не каждый имеет широкополосный канал связи с Интернет. И тут не имеет значения на сколько хорош ваш сайт - пользователь не будет ждать.
  2. Мобильным доступом в Интернет пользуются все больше пользователей. По статистике сейчас почти каждый четвертый пользователь выходит в Интернет с мобильного устройства. На обычном 3G соединении 1.7Мб время до появления страницы на экране составит примерно 1 минуту. А как же Responsive Web Design? Почему сайты отказываются эффективно работать на этих устройствах?
  3. Алгоритмы проверки скорости загрузки страниц Google могут понизить ваш сайт в выдаче, что нанесет вред поисковой оптимизации сайта.
  4. Чем больше у вас коде - тем больше времени требуется, чтобы поддерживать и обновлять его.

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

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

1. Включите сжатие GZIP

Согласно W3thechs.com более половины сайтов не используют сжатие. Обычно это настройка сервера, которая должна быть включена на вашем сервере. Так же сжатие может быть настроено вручную самостоятельно.

2. Поощряйте браузерное кэширование

Если браузер может просто закэшировать файл, то ему не придется скачивать его снова. Это простое решение включает в себя установки соответствующих заголовков Expires header, Last-Modified date или Etag в HTTP заголовке.

Можно сконфигурировать сервер, чтобы делать это на автомате, например, для сервера Apache настройки файла .htaccess для кэширования всех картинок на месяц будут выглядеть так:

 

Для nginx это делается не сложнее. В настройках сайта нужно указать примерно так:

 

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

3. Используйте сеть доставки контента (Content Delivery Network (CDN))

Браузеры обычно выставляют ограничения от 4 до 8 одновременных активных HTTP запросов на домен. Если ваша страница имеет 96 подгружаемых элементов, то в лучшем случае вам понадобиться 12 комплектов по 8 запросов. Конечно, реально размеры файлов различаются, и именно так не происходит, но все равно ограничение остается в силе.

Загрузка, статичных файлов с другого домена эффективно увеличивает число HTTP запросов, которые браузер может выполнять одновременно. В дополнение, файлы с другого хоста могут быть предварительно закэшированы, так как использовались на другом сайте. Например, группа сайтов, может использовать какие либо js библиотеки, расположенные на специально выделенном домене. Кроме того, можно рассматривать выделенный домен для хостинга изображений. Кстати, нагруженные сайты могут отдавать статический контент с нескольких физических серверов, чтобы эффективно расширить канал отдачи данных.

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

4. Удаляйте неиспользуемые элементы

Сайты развиваются. Если вы больше не используете какой-либо витжет, то можно удалить его JavaScript и CSS. Если они располагаются в отдельных файлах, то все совсем просто. Если нет, то возможно придется воспользоваться специальными инструментами, например, Chrome’s Audit Developer Tool, JSLint, Dust-Me Selectors, CSS Usage, unused-css.com или же попробовать разработать что-то для себя самостоятельно для нахождения неиспользуемых кусков кода.

5. Объединяйте и уменьшайте CSS

В идеале достаточно одного файла CSS (хотя иногда требуется 2 файла, если вы используете RWD для поддержки старых версий IE). В тоже время целесообразным может быть просмотр ваших CSS файлов и удаление из них лишних пробелов, до выгрузки на сервер.

Препроцессоры, такие как Sass, LESS и Stylus, могут делать эту утомительную работу за вас. Существует множество инструментов позволяющих автоматизировать данный процесс.

Если вам кажется, что автоматизация - это слишком "много телодвижений", то просто откройте ваш текстовый редактор и объедините файлы в ручную.

Или можно сделать так:

для windows:

 

для mac/linux:

 

Полученный файл пропустите через CSS минимайзер, например, онлайн cssminifier.com, CSS Compressor & Minifier or CSS Compressor.

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

6. Объединяйте и уменьшайте JavaScript

В среднем страница загружает 18 отдельных файлов сценариев. Практичным является держать библиотеки, например, jQuery, в виде отдельных файлов, собственный код следует объединить с один файл и разместить на сервере в сжатом виде. Опять же в выполнении этих операций могут помочь инструменты, такие как YUI Compressor, Closure Compiler, The JavaScript CompressorRater. Однако, стоит быть осторожным, эти инструменты могут сломать ваш код, если он написан плохо. Но в любом случае объединение все js файлов повысит производительность страниц, так как будет меньше HTTP запросов.

И загружать js файлы стоит непосредственно перед закрытием тега body. В этом случае вы будете уверены, что сценарии не будут блокировать загрузку другого содержимого страницы во время загрузки сценариев.

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

Использование неправильного формата изображения раздувает ваши страницы.

В общем, важно руководствоваться следующий правилом:

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

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

Для преобразования изображений вам может потребоваться хороший графический пакет (много платных), но есть и свободно распространяемые варианты. Например, XnView, позволяет преобразовывать файлы в пакетном режиме. Не забывайте играть в настройками:

  • JPG - формат с потерями с качеством от 0 (плохо, меньший размер файла) до 100 (лучший, больше файла). Большинство изображений будет выглядеть нормально где-то между 30 и 70, но нужно поэкспериментировать, чтобы найти самые низкие допустимые значения.
  • PNG доступен в 256 и 24-битных цветовых разновидностей. Если вам не нужно прозрачности и может ограничить палитру, 256-цветная версия может сжимать лучше.

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

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

Размеры изображения не должны превышать максимальный размер их контейнера. Если шаблон имеет максимальную площадь 800 горизонтальных пикселей, изображению не нужно будет большую ширину. Тем не менее, тех, кто использует high-density/Retina дисплеи могут оценить двойную 1600 пикселей ширину изображения, но это все равно меньше, чем типичный выход камеры.

Изменение размера изображения оказывает существенное влияние на вес страницы. Сокращение размера изображения на 50% уменьшает общую площадь на 75% и это значительно уменьшает размер файла.

Кроме того, иногда требуется вывести маленькую картинку "preview", не стоит в контейнер для таких картинок вставлять полноразмерное изображение. Для каждой большой фотографии лучше создать маленький вариант для предварительного просмотра.

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

Даже если вы перешли в нужный формат и изменили размеры, можно уменьшить файлы изображений, используя инструменты для анализа и оптимизации графики. К ним относятся OptiPNG, PNGOUT, jpegtran и jpegoptim. Большинство из них может быть установлено в качестве автономных исполняемых файлов или интегрированы в процесс сборки. Кроме того, есть онлайн-инструменты, такие как Smush, могут выполнять работу в облаке.

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

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

Я подозреваю, что многие сайты могут уменьшить их размер страниц на 30-50% за несколько часов усилий от разработчика. Для среднего сайта, это экономия более 800Kb и это заметно ускорит страницы.

Комментарии (2)
  • Дмитрий с Буридо Среда 12 Март 2014
    Спасибо, явно полезные советы, хотя часть из них слишком сложна для меня с технической точки зрения.
  • admin Воскресенье 25 Май 2014

    Большинство советов как раз легко реализовать. В этом-то и фокус!

Добавить комментарий
Вам необходимо включить показ изображений в браузере для того чтобы увидеть код

Дайте нам знать, что вы - живой человек. Для нас это важно!
Кликните, если плохо видно

Прежде чем высказать свое мнение, прочитайте пожалуйста: правила

Рейтинг@Mail.ru