Простые шаги, чтобы ускорить ваш тяжелый веб-сайт с изображениями

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

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

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

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

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

1. Оптимизировать HTML-код и CSS-, JS-файлы

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

Как минимизировать код, чтобы ускорить загрузку сайта

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

Такой способ буферизации HTML-контента весьма удобен, но может создать дополнительную нагрузку на оперативную память.

Сгруппируйте файлы CSS и файлы JS одного типа. Объединить элементы помогут бесплатные PHP-приложения вроде JCH Optimize, Cloudflare или Minify, которые копируются в отдельную директорию и проходят через все файлы сайта.

2. Удалите лишние HTTP-запросы

Загрузка элементов страницы (javascript, изображений, CSS и flash-файлов) занимает львиную долю системных ресурсов при загрузке сайта. HTTP-запросы таких элементов заметно замедляют работу сайта.

Чтобы избежать «лишних» запросов, нужно уменьшить количество компонентов страницы. Это повлечет за собой пропорциональное снижение обращений к серверу и ускорит загрузку сайта.

Это можно сделать несколькими способами:

• Объединение нескольких изображений в один графический файл (CSS-спрайт);
• Использовать встроенные изображения (inline-pictures) в таблице стилей страницы;
• Несколько файлов CSS или скриптов на одной странице сливаются в один файл;
• Минимизируйте количество сценариев и плагинов.

3. Расположите JavaScript и CSS в правильном порядке

Рекомендуется размещать файлы CSS вверху кода страницы, а файлы JavaScript внизу. После этой оптимизации сначала будет загружаться статический контент, а потом только динамическая графика.

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

4. Уменьшите количество внешних скриптов

Внешние скрипты — это фрагменты кода (тексты), доступ к которым осуществляется по внешней ссылке. Ссылки создают дополнительные запросы к множеству разных серверов, что в итоге замедляет работу сайта. Во избежание этого рекомендуется использовать в основном локальные скрипты, встроенные в структуру исходного кода страницы.

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

5. Включить сброс

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

Функцию сброса лучше размещать в начале исходного кода страницы, сразу после заголовка. Из шапки HTML-контент будет открываться быстрее, а также можно включить параллельную загрузку элементов CSS и JavaScript.

6. Кэшируйте страницы

Кэширование сохраняет некоторую информацию со страниц сайта (flash, графика, JavaScript и CSS) в браузер пользователя. При следующем запуске эти файлы моментально загружаются из браузера, что придает сайту дополнительную скорость.

Вы можете включить кэширование, добавив заголовок expires в код HTML. Сайты WordPress легко кэшируются с помощью установки плагинов с бесплатной или частично бесплатной функциональностью, таких как W3 Total Cache, Cache Enabler или Zen Cach.

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

7. Используйте CDN

Сеть доставки контента — цепочка серверов, разбросанных по дата-центрам по всему миру, для увеличения скорости передачи контента посетителям. Чем ближе посетитель географически от серверов CDN, тем быстрее передаются пакеты данных с сайта.

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

8. Оптимизируйте графику и видео

Необходимо выбрать правильный формат графики и видео, так как формат файла напрямую влияет на скорость представления информации посетителям.

Рекомендуемые форматы для различного веб-контента:

• SVG — для векторных логотипов и простых элементов интерфейса;
• PNG — для схем и не векторных логотипов;
• JPG — для фотографий и изображений;
• MPEG4 – для видео и анимации.

Также для видео и анимации доступен относительно новый формат WEBM. В большинстве случаев он обеспечивает меньший размер видео с тем же качеством. Однако форма имеет ограниченную поддержку браузера (например, отсутствует поддержка в браузере Safari для macOS/iOS). Поэтому рекомендуется использовать файл WEBM в качестве приоритетного источника видео и устанавливать MPEG4 в качестве альтернативного источника. Вы также можете использовать только MPEG4, если совместное использование неприемлемо или неудобно.

Отдельно отметим, что векторный формат (SVG) позволяет производить масштабирование без потери качества графики.

Этапы оптимизации изображения

Шаг 1 – Уменьшение размера изображения.

Многие популярные CMS, такие как WordPress или Joomla, имеют встроенные плагины для оптимизации изображений из оригинала. Но этот способ создает дополнительную нагрузку и может замедлять работу сайта. Каждый раз, когда страница загружается, браузер сначала обращается к исходному коду, и только потом на лету изменяет размер изображения.

Избежать потери скорости при загрузке изображений помогут встроенные в ОС графические редакторы, такие как Preview (Mac) или Microsoft Paint (Windows), а также онлайн-сервисы с аналогичным функционалом. Работа с ними потребует минимальных навыков работы с графикой.

Шаг 2 — Сожмите файл перед загрузкой.

Даже после оптимизации размера изображения его «вес» обычно все еще далек от оптимального. Удобные и бесплатные сервисы вроде ImageResize или TinyPNG помогают уменьшить размер без потери качества изображения. Большинство процессов здесь автоматизированы. Пользователю нужно только загружать файлы и скачивать уже сжатые до оптимального размера изображения.

9. Примените сжатие файла Gzip

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

Включить использование Gzip довольно просто — вам просто нужно добавить несколько строк кода в файл .htaccess. Например, при использовании веб-сервера Apache для веб-мастеров доступен модуль mod_gzip, чтобы активировать Gzip, в этом случае нужно добавить такой код в .htaccess

Сжатие Gzip-файлов делается для уменьшения количества запросов к серверу из браузера. Положите, эта технология уменьшает первоначальный вес файлов до 70%, чтобы ускорить загрузку.

Способ встраивания сжатия Gzip

Добавьте следующий фрагмент кода в файл конфигурации веб-сервера «.htaccess».

На сервере Apache

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

На сервере Nginx

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

10. Сменить хостинг

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

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

Самое главное — это…

Необходимо стремиться к тому, чтобы зайти на сайт не дольше 2-3 секунд. Неважно, открывается сайт на 2 или даже 3 секунды, а если больше, то это повод задуматься об ускорении загрузки сайта.

Также нужно понимать, что есть два параметра скорости загрузки страницы.

Первый — это скорость отображения контента (в этот момент страница уже открыта и показана пользователю, при этом индикатор прозрачной страницы еще отображается до тех пор, пока не будут подключены все статические файлы и асинхронные скрипты).

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

Вывод

Нельзя обойти вниманием такой показатель, как скорость загрузки сайта. Именно он с первых секунд создает комфортные условия для посетителей. Чем быстрее пользователь получит желаемый контент, тем выше вероятность того, что будет сформирован положительный образ ресурса и построена лояльность к нему.