Добрый день, читатели блога о заработка в Интернете SEOtis.ru! Сегодняшняя статья будет посвящена решению проблемы долгой загрузки сайта, точнее его содержимого. Ведь часто бывает так, что и информация опубликована интересная, и дизайн привлекательный, и навигация удобная и понятная, а дождаться загрузки всей этой прелести просто невозможно. Пора решать эту проблему на своем сайте!
На самом деле, скорость загрузки интернет-ресурса влияет не только на терпение посетителей, но и на выдачу в поисковых системах. Самые крупные из них уже давно добавили в свои алгоритмы параметр «время загрузки». Те сайты, которые отображаются очень быстро имеют значительное преимущество в общем рейтинге над теми, которые грузятся долго.
Что же можно сделать, чтобы сократить время загрузки сайта?
1.Уменьшение количества НТТР-запросов
Более 80% всего времени ожидания приходится на загрузку медиа компонентов страницы: фотографий, видео-файлов, flash элементов, CSS и скриптов. В соответствии со спецификацией НТТР/1.1, браузера может загружать одновременно всего 2 компонента страницы сайта с одного хоста. За счет уменьшения количества загружаемых объектов, сократится время загрузки веб-страницы за счет малого количества запросов к серверу.
На этом этапе может возникнуть вопрос, как же сохранить уникальный и привлекательный внешний вид страницы, но при этом все-таки уменьшить время на его загрузку? В данном случае есть 3 доступных решений проблемы:
1.1 CSS-спрайты.
Они являют собой комбинированное изображение, которое может в свою очередь состоять из нескольких медиа файлов малого размера. В нужный момент браузер просто вырезает необходимый элемент, используя при этом свойства следующего типа:
— background-position;
— background-image.
1.2 Inline-картинки.
Такой способ можно реализовать с помощью URL-схемы «data: URL». В результате, изображение встраивается непосредственно в саму страницу, но при этом увеличивает объем файла HTML. Но эта проблема решается встраиванием inline-изображений внутрь таблицы стилей, чем сохраняет размер HTML-документа и уменьшает необходимое количество запросов к серверу.
1.3 Объединение нескольких маленьких файлов в один большой. Этот способ можно использовать в том случае, если к основному HTML-документу подключено много отдельных файлов CSS и JS.
2. Размещение файла CSS в самом начале страницы
Для того чтобы страница загружалась постепенно, необходимо разместить все дополнительные файлы в начале HTML-документа. Такой ход может даже улучшить впечатление посетителей сайта, ведь страница будет начинать загружаться с заголовка, затем придет очередь логотипа, навигации и так далее.
А вот размещение CSS таблицы внизу страницы может помешать браузеру рендерить постепенно страницу, то есть элементы будут загружаться в случайном порядке.
3. Размещение JavaScript в конце страницы
Подключения скриптов в самом конце страницы способствует скорейшей загрузке основного контента. Только после отображения всех изображений, видео и остальных компонентов страницы браузер приступит к файлам, которые содержат JavaScript.
Не все знают, что именно файлы js блокируют параллельную загрузку, поэтому таким деталям нужно обязательно уделять внимание.
4. Минимизация JavaScript и CSS
Нужно избавиться от всех несущественных и лишних элементов в коде, чтобы уменьшить тем самым объем файла, а значит, и обеспечить скоростную загрузку контента. Лишними компонентами служат комментарии внутри кода, лишние пробелы, переносы, табуляция.
5. Параллельное скачивание с помощью использования поддоменов
Как уже говорилось выше, браузер может справиться с одновременной загрузкой только 2 элементов. Это очень важный момент для тех сайтов, на которых находится огромное количество графических компонентов. В таком случае, самым правильным путем будет их размещение на отдельном поддомене. То есть для пользователя все будет выглядеть как один сервер, но для браузера их будет 2 или больше. Закономерность очень простая — чем больше дополнительных поддоменов, тем быстрее грузится весь контент.
6. Кэш браузера
За счет обширного использования и внедрения во все современные сайты CSS и JavaScript, кеширование набирает все больше популярности. При первом посещении сайта браузер автоматически загружает все подключенные файлы (и таблицы стилей, и скрипты), видео, графику, флэш. А при повторном посещении ресурса браузер просто «достанет» из своей памяти некоторые элементы страницы.
7. Загрузка JavaScript библиотек с помощью CDN
Content Delivery Network — огромное количество веб-серверов, которые разнесены географически с целью достижения максимально возможной скорости отдачи. Такой сервер выбирается автоматически на основании многих факторов, например, времени отклика. Таким образом, браузер кэширует компоненты и не загружает их заново в следующий раз.
8. Оптимизация изображений
Очень важно научиться выбирать формат картинок для тех или иных целей. В противном случае размер исходного файла может увеличиться в несколько раз.
GIF — для логотипов, JPEG — для детализированных изображений, фотографий, PNG — для качественных графических элементов с прозрачными вставками.
Эти простые правила помогут правильно оптимизировать всю графику на сайте, а также избавит посетителей ресурса от долгого ожидания загрузки всего содержимого.
Кто бы что ни говорил, а скорость загрузки сайта играет ключевую роль не только в отношении с посетителями сайта, но и с поисковыми системами. Используя предложенные методы, можно увеличить скорость загрузки интернет-страниц как минимум в 10 раз. Это положительно скажется на посещаемости сайта еще и за счет того, что поисковики будут размещать ресурс как можно выше в рейтинге выдачи, поэтому не стоит забывать об оптимизации контента и правильном размещении дополнительных таблиц стилей, а также файлов со скриптами.