На данный момент скорость загрузки страниц влияет на многие показатели. От скорости зависит задержится посетитель на вашем сайте или не дождется и перейдет на другой. Да и поисковые системы, на данный момент при ранжировании, тоже обращают внимание на скорость загрузки страниц вашего сайта.
На SEO оптимизацию этот показатель тоже влияет. Вывод – от скорости загрузки страниц зависит количество пользователей, а от них уже и ваш доход. В связи с этим хочется дать несколько не сложных советов, для тех, кто только начинает свою деятельность на этом поприще. Гениальных идей вы конечно не найдете но несколько полезных рекомендаций никому не помешают.
Уменьшение HTTP-запросов. Загрузка компонентов: скриптов, фотографий, флеш, файлов CSS, занимает около 80% всей загрузки страницы. Увеличить скорость загрузки можно с помощью уменьшения загружаемых компонентов одновременно. Советую, что бы браузер одновременно загружал не более двух компонентов.
Таким образом уменьшив количество одновременных запросов посылаемых серверу, увеличиваем скорость загрузки страницы. У большинства читателей возникает вопрос. Как это сделать без ущерба для дизайна страницы? Этого можно достичь разными способами:
1. Воспользовавшись CSS-спрайтом. CSS-спрайт – изображение состоящее из нескольких фрагментов. То есть картинка состоит из нескольких небольших. Они в свою очередь используются в нужный момент, с помощью background-image и background-position.
2. Использование Inline-картинок. Inline-картинки с помощью URL-схемы data внедряются непосредственно в страницу. Но при этом увеличиваются объемы HTML-документа. Можно внедрять Inline-картинки в таблицы стилей, в результате также уменьшится количество запросов. Нужно заметить при такой схеме размеры HTML не изменятся.
3. Соединение файлов в один. Это возможно в случае если на странице подключается несколько CSS или JS файлов, их можно объединить. Сделать это несложно, а результатом будет опять-таки уменьшение количества запросов на сервер.
Размещайте CSS файлы в самом начале страницы. Вся суть состоит в том, что разместив подключение к CSS файлам в хедере вы добиваетесь поэтапного рендеринга страниц. При этом вся страница грузится постепенно: заглавие, лого, навигация и так далее. Визуально это положительно влияет на пользователей, он видит процесс загрузки страницы наглядно. Посетителю не нужно смотреть в пустой экран.
При ситуации когда CSS файлы находятся в низу страницы, рендерить страницу постепенно большинство браузеров не могут. Некоторые элементы страницы после загрузки могут изменяться, браузер в свою очередь не хочет их прорисовывать. Поэтому CSS файлы лучше размещать в секции HEAD.
Javascript лучше разместить в конец страницы. Это даст возможность браузеру, страницу на котором находится контент загружать первой, а после этого уже javascript-файлы. При наличии на сайте нескольких таких файлов нежелательно заставлять посетителей ждать пока все загрузится, пользователям это не очень нравится. Для избегания этого нужно размещать javascript-файлы в конце страницы. Js файлы блокируют одновременную загрузку. Лучшим вариантом загрузки является не больше двух компонентов параллельно.
При использовании внешних javascript-файлов блокируется одновременная загрузка. Запомните, когда рисунки для вашего сайта хранятся на разных хостах, в любом случае вы получаете параллельную загрузку больше двух элементов. При загрузке скриптов, браузер блокирует любые другие компоненты. С других хостов загрузка тоже приостанавливается.
Css и javascript, минимизация. Когда нужно минимизировать файл, из него удаляются все кода, которые не играют существенной роли. Как результат получаете меньшие объемы и быструю загрузку. Удалить можно: табуляцию, перенос строк, не выполняющие важных функций пробелы, комментарии. Зависимость прямо пропорциональная, уменьшаете объем – уменьшается время загрузки страницы.
Для скачивания пользуйтесь поддоменами. Напомним, что браузеры используют ограничение, загружая параллельно только два компонента сайта с одного хоста. В случае, если на вашем сайте используется много графических элементов, их лучше разместить на отдельном поддомене или на нескольких. Браузер будет воспринимать это, как несколько разных серверов.
От количества созданных поддоменов зависит число параллельных загрузок, чем их больше, тем больше файлов будут загружаться одновременно и наоборот. Скорость загрузки страницы так же будет больше. Вам нужно будет поменять только адреса графических компонентов. Все довольно просто.
Применяйте кэш. Кеширование играет важную роль для веб–сайтов, особенно если на них обширное подключение CSS и JS. При посещении сайта пользователем впервые браузер будет загружать все файлы CSS, JS, флеш, графику и т.д. Но с помощью HTTP-заголовка Expires, можно кешировать элементы страниц. Правильно настроив HTTP-заголовок Expires, вы добьетесь этого. Результат: при повторном посещении вашего ресурса или переходе на другую страницу, в кэше браузера сохранятся файлы, используемые для загрузки следующей страницы. Так повторная загрузка этих файлов не нужна, скорость загрузки страницы само собой увеличивается.
Рекомендуется расставлять HTTP заголовки Expires там, где только возможно. Лучше выставлять их на период, от нескольких дней до месяца. Веб – сервер будет отдавать нужные команды HTTP заголовкам.
При большом сроке жизни кэша браузера, иногда возникают проблемы с обновлениями. Решить эту проблему довольно просто, если вы вносите изменения в css и js файлы, их нужно переименовать. Это необходимо сделать для того, что бы в кэше тоже появились изменения. Не усложняя себе жизнь, просто добавьте в название файла его версию.
Применяйте CDN для загрузки JS библиотек. Например, когда на вашем сайте есть популярный js фреймворк, допустим jQuery, подключать его лучше пользуясь CDN. Content Delivery Network – это большое количество веб – серверов, которые охватывают большую географическую территорию и при этом достигается наибольшая скорость загрузки.
Например – Google Libraries один из CDN. Такие CDN предназначены для популярных open-source JS библиотек. При загрузке js фреймворков с Google Libraries дает возможность увеличения скорости при загрузке страниц и снизить трафик сервера.
Оптимизация изображений. Для начала нужно определить оптимальный формат для графики на вашем сайте. От выбора формата зависит размер файлов, если его подобрать неправильно, можно увеличить размеры, а не уменьшить.
GIF – изображение состоящее из нескольких цветов, это может быть логотип и т.п.
JPEG – большое количество цветов, высокая детализация. Например – фото.
PNG – прозрачность, очень высокая степень детализации, высокое качество изображения.
Используются два способа оптимизации графических компонентов. Можно воспользоваться онлайн сервисами, сжав изображение. Или воспользоваться специализированными программами. Во втором случае нужны определенные знания и навыки. А для онлайн сервисов нужен только интернет. Все довольно просто, загружаете изображение, сервер автоматически проводит оптимизацию, а вам нужно только скачать уже готовый файл.
Не используйте масштабирование изображения. Для изменения изображения не стоит использовать: width, height теги, CSS. Это может отрицательно сказаться на скорости загрузки. Если у вас рисунок изначально 500х500, а нужен вам 100х100. Изменять размеры лучше оригинала, до того как вы вставите ее на сайт, можете для этого воспользоваться например фотошопо. От объема картинки зависит скорость ее загрузки.
Gzip- сжатие. Gzip- сжатие файлов содержащих текстовую информацию, почти в 100% случаев, дает возможность уменьшить время передачи файлов браузеру. Для освобождения соединения в три четыре раза, рекомендуем хранить архивные копии на сервере, прокси сервере или диске.
Веб – клиенты должны обозначить типы сжатия, которые они поддерживают. Эта информация указывается в заголовке Accept-Encoding в запросах HTTP. Это дает возможность веб-серверу, считав такой заголовок, использовать нужный тип сжатия для ответа. Используя при этом один из указанных типов сжатия клиентом. При этом клиент получает уведомление о типе сжатия используемом для ответа, с помощью заголовка Content-Encoding.
