Как сделать сайт быстрее

Клиентская оптимизация

Клиентская оптимизация — методы, которые сделают ваш сайт быстрее для пользователя без существенных изменений на стороне сервера.

При этом прирост в скорости может быть значительным.

Причины низкой скорости

Как происходит открытие сайта?

Браузер посылает запрос к серверу на получение данных. Клиент получает от ответ от сервера и показывает его пользователю:

Это самый простой случай, без скриптов, стилей. Открытие сайта, который использует современные технологии, выглядит так:

 

Как увеличить скорость?

Скорость сайта зависит от:

  1. Количества дополнительных запросов на изображения, JS, CSS
  2. Объема данных, который передает сервер клиенту.

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

Снижение дополнительных запросов к серверу

1. Кеширование на клиенте

Делается это путем установки HTTP заголовка Expires и Cache-control для кеширования CSS/JS файлов в браузере.

Получатеся что клиент будет запрашивать файлы только один раз, если они не изменялись на то время пока действует кеш.

2. Склеивание

Нужно по возможность склеивать все css файлы в один. Тоже самое стоит делать и для JS.

3.Загрузка внешних ресурсов

Загружайте любые внешние ресурсы максимально близко к концу HTML.

Только CSS, нужно грузить в теге <head>. JS подключайте перед закрывающимся тегом </body>.

Сначала загружайте JS приложения, а только потом счетчики.

4. CSS спрайты

Если на странице имеется большое количество мелких картинок, то это приводит к большому количеству запросов к серверу на получение картинок.

Чтобы этого избежать используйте CSS спрайты.

Все маденькие картинки на сайте нужно объединить в одну.

А для отображения используем свойство «background» в CSS.

Уменьшение объема данных

1. Сжатие

Практически все современные браузеры поддерживают сжатие gzip или deflate.

Сжатие используется только для текстовых файлов HTML, CSS, JS.

Сжатие можно включить на Web сервере, например в Nginx это делается так:

server {
...
gzip on;
gzip_disable "msie6";
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
...
}

Веб сервера обычно имеют уже готовые модули для сжатия.

Сжатие также можно использовать в приложениях. Например в PHP, компрессию можно включить в php.ini:

zlib.output_compression On;

2. Оптимизация картинок

Картинки могут занимать более 80% всего размера страницы.

Сжатие картинок без потери качества может уменьшить размер в 2 или 3 раза.

Есть множество инструментов для lossless сжатия изображений.

Формат картинок

Выберете формат картинок исходя из изображения:

— JPEG используйте для фотографий.
— PNG лучше подойдет для иконок и иллюстраций.

3. Минификация

Минифицируйте файлы js, css (и html)

Сам процесс минификации очень простой.

Это вырезание всех комментариев и необязательных пробельных символов (переносов, табов и т.п.).

4. Правильная структура HTML

Размер современных веб страниц может быть очень большим из-за сложной верстки и большого количества элементов.

Соблюдайте следующие правила:

  • Не используйте встроенных стилей (style=»…»).
  • Выносите все стили и скрипты во внешние файлы CSS и JS.
  • Используйте асинхронную загрузку Javascript.
  • Используйте понятные названия классов в html.
  • Используйте стандартные элементы разметки для текста (теги strong, em, i, u) вместо создания стилей.

Правильное использование кеширования и сжатия gzip могут значительно ускорить работу сайта.

Так же существенный прирост в скорости принесет оптимизация картинок.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *