Быстрая загрузка, ускорение Вашего сайта

Данная стать я посвящена оптимизации сайта для более быстрой загрузки сайта в браузерах. Для ускорения Вашего сайта и более быстрой его загрузки необходимо будет оптимизировать его по 6-ти основным параметрам

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



1.Сервис Pingdom.com
http://tools.pingdom.com/

2.Сервис Webo.in
http://webo.in/

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

Далее переходим собственно к оптимизации :

1) Оптимизация изображений;
2) Форматы изображений;
3) Оптимизация CSS-файлов;
4) Использование слэша на конце ссылок;
5) Указание атрибутов Height и Width для всех изображений;
6) Уменьшение количества HTTP запросов.

Оптимизация изображений:

Широко известно, что время загрузки сайтов имеет огромное значение для пользователей Интернета. Если в эпоху dial-up (56K модемов) пользователь готов был ждать загрузки сайта полминуты, то сейчас, с приходом скоростных соединений, это время сократилось до 4 секунд – если за эти 4 секунды сайт не успевает загрузиться, пользователь с него уходит.

Известно, что неоптимизированные изображения тормозят процесс загрузки веб-сайтов в целом, веб-страниц в частности. Такие графические редакторы, как Adobe Photoshop и другие, имеют очень полезную функцию, называемую «Save for the web». Всегда пользуйтесь этой возможностью, предоставляемой графическими редакторами.

Если же Вы не пользуетесь никакими графическими редакторами, то специально для Вас в Интернете функционирует отличный инструмент оптимизации изображений. Этот инструмент автоматически оптимизирует изображения следующих форматов: GIF, PNG и JPEG, а также, по необходимости, конвертирует из одного формата в другой.

Форматы изображений:

Мы рассмотрели процесс оптимизации изображений. Чтобы при оптимизации изображений достичь наилучших результатов, нужно правильно выбрать формат изображений.

Выбор стоит между тремя форматами: GIF, PNG и JPEG. В зависимости от типа изображения и его характеристик мы и будем выбирать наиболее подходящий формат:

Формат JPEG (Joint Photographic Experts Group). Данный формат был создан для фотографий и других полноцветных изображений. Запомните, что при оптимизации изображений в данном формате для получения оптимальных результатов степень сжатия ставьте 50%.

Формат GIF (Graphics Interchange Format). Данный формат является, чуть ли не основным форматом изображений. Формат GIF славится малым размером файлов изображений. Изображения в формате JPEG содержат миллионы цветов, а изображения в формате GIF - не более 256. Формат GIF следует использовать для изображений с малым количеством цветов, таких как логотипы и различные кнопки. Помимо этого, формат GIF поддерживает анимацию.

Формат PNG (Portable Network Graphics). Данный формат был создан специально для Интернета с целью вытеснения формата GIF. Основное преимущество формата PNG – поддержка 24-битных цветов и прозрачности. Формат PNG следует использовать для простых изображений, содержащих более 256 цветов.

Оптимизация CSS-файлов:

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

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

Во-первых, найдите все разгруппированные записи в коде и объедините их в одну строку. Ниже приведены примеры:

Вместо:


Следует делать так:



Вместо:


Следует делать так:



Во-вторых, Вы также можете воспользоваться отличным инструментом оптимизации css-файлов CleanCSS . Данный инструмент объединит одинаковые селекторы, удалит бесполезные свойства и пробелы из кода.

Использование слэша на конце ссылок:

Когда сервер пытается открыть ссылку вида «http://www.domain.com/about», он должен «понять», какой файл или страница находится по данному адресу. Если же ссылка имеет вид «http://www.domain.com/about/» (добавлен «/» на конце ссылки), то сервер уже будет знать, что это за страница. Тем самым, уменьшается время загрузки сайта.

Ускорение загрузки сайта после добавления слэша на конец ссылок будет не астрономически огромным. Но если применить все рекомендации из серии статей «Ускорение загрузки Вашего сайта», то загрузка Вашего сайта заметно ускорится!

Указание атрибутов Height и Width для всех изображений:

Данный фактор является очень важным (!), но, к сожалению, упускается многими веб-мастерами. Когда Вы используете таблицы и изображения на веб-страницах, Вам следует указывать атрибуты height и width. Если браузер не найдёт данных атрибутов, ему понадобится время ан то, чтобы узнать размер изображения, загрузить само изображение и только после этого продолжить загружать веб-страницу. Ниже приведён пример кода, содержащего данные атрибуты:



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

Уменьшение количества HTTP запросов:

Каждый раз при открытии пользователем веб-страницы каждый объект (изображение, скрипт…) делает запросы к серверу. Этот процесс прибавляет секунды к времени загрузки сайта.

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

Во-вторых, убедитесь, что запросы к внешним файлам сведены к минимуму, например, вместо использования нескольких css-файлов, объедините их содержимое в одном единственном css-файле:

Вместо:


Следует делать так: