Как увеличить скорость работы и загрузки сайта

Как увеличить скорость работы и загрузки сайта

На самом деле, скорость загрузки интернет-ресурса влияет не только на терпение посетителей, но и на выдачу в поисковых системах. Самые крупные из них уже давно добавили в свои алгоритмы параметр «время загрузки». Те сайты, которые отображаются очень быстро имеют значительное преимущество в общем рейтинге над теми, которые грузятся долго.

Что же можно сделать, чтобы сократить время загрузки сайта?

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 раз. Это положительно скажется на посещаемости сайта еще и за счет того, что поисковики будут размещать ресурс как можно выше в рейтинге выдачи, поэтому не стоит забывать об оптимизации контента и правильном размещении дополнительных таблиц стилей, а также файлов со скриптами.

comments powered by HyperComments

Оставьте мне собщение