6 решений для улучшения скорости загрузки сайта

Для чего нужна оптимизация загрузки сайта?

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

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

Обработка сервером — это время, за которое вы получаете ответ от сервера, так называемое время загрузки html — время, за которое сервер получает от браузера команды по открытию нужной страницы, обрабатывает все его запросы, и выдаёт эту html-страницу для загрузки. 

Обработка браузером — процессы, во время которых браузер загружает файлы стилей, загружает и выполняет скрипты, изображения и шрифты.  

Оптимизация со стороны сервера

Если рассматривать оптимизацию, как процесс снижения нагрузки на сервер, то в первую очередь стоит сделать упор на уменьшение времени отклика сервера.  Работа над уменьшением времени ответа сервера способствует росту видимости сайта, поднимая его позицию. Google Speed предлагает ряд инструментов для анализа и оптимизации скорости загрузки сайта. 

Вот какие рекомендации даёт Гугл о времени ответа сервера:

Мы видим, что Гугл одобряет отклик не более 200 мс., замеры можно произвести с помощью PageSpeed Insights от Google. Учтите, что при проверке сайта на хостинге, показатель может колебаться из-за разной нагрузки сервера.  

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

Плохой движок? В процессе оптимизации скорости загрузки стоит подумать, на каком движке работает ваш сайт. Среднее время ответа сервера на обычных движках составляет около 400-500 мс. при просмотре обычных страниц и в районе 600-800 мс. для сложных. Сайты с уникальными движками имеют скорость отклика от 30 до 100 мс. 

На скорость ответа сервера можно повлиять через: 

• Проведение теста разных хостингов и дальнейшая его смена.
• Исправление программных ошибок.
• Перенос сайт на уникальный движок, с подходящей вашему проекту архитектурой. 
• Проверка кода сайта и работ с высококвалифицированными front-end разработчиками. 

Оптимизация изображений

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

JPEG — подходит для интернет-магазинов, он показывает хорошее качество при маленьком размере файла.

PNG — используют, когда нужно сохранить прозрачный фон, может быть легче JPEG.

SVG — векторный формат файла, используется для логотипов и иконок. Используя CSS/JavaScript, можно менять размер файлов без потери качества.

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

Онлайн сервисы: 

• Punyng.com
• Smush.it
• Jpegmini.com

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

Для проверки подойдут и Яндекс.Картинки, а в Гугл-картинках вы можете проверить защищённость изображения авторским правом. 

Адаптивность картинок — важный нюанс, от которого зависит корректность отображения картинки на разных устройствах, с разным разрешением. Загрузите допустимые варианты исходной картинки с разным размером. 

Вот какие рекомендации касаемо изображений дают поисковые системы:

Использовать превью — предпросмотр изображений в уменьшенном размере, а при клике или наведении — отображение в полном. 

Кеширование

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

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

Оптимизации CSS и JavaScript кода

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

В случае с JavaScript, то такие файлы лучше помещать внизу страницы, так как страница сначала загружает контент, а затем загружает javascript-файлы. Оптимизация JS упрощает загрузку файлов, чтобы избежать подвисания страницы. Встроенные плагины WordPress и другие CMS оптимизируют код JS прямо на сайте. 

Доступны сервисы наподобие JavaScript Compressor, Closure Complier от Гугл — это онлайн инструменты, которые прорабатывают код и удаляют в нём пробелы, комментарии, лишние строки. Некоторые сервисы позволяют сократить переменные, отображая их в упрощённом виде. 

• 

• 

Оптимизация на стороне CMS

Если CMS система находится на вашем хостинге, то вы можете её ускорить. Битрикс, WordPress, Joomla — медленные системы. Можно ускорить и сайты конструкторы типа — Tilda, Flexbe, Wix, но только через сжатие всех изображений и помещение скриптов в асинхронную загрузку, либо вы можете договариваться о получении скорости со стороны владельца сайта-конструктора. 

Рассмотрим оптимизацию CMS со стороны клиентского и серверного ускорения:

Клиентское ускорение включает себя работы по оптимизации:

• Кеширование изображений, JavaScript, CSS.
• Работа над CSS и JS — сжатие, объединение, перенос в нужную часть кода. 
• Выявление и отключение ненужных виджетов и скриптов. 

Серверное ускорение включает в себя работы по:

• Смене хостинга или сервера на более быстрый.
• Настройка веб-сервера (apache, php- fpm и т.д.).
• Работы по кешированию запросов к БД и сторонним API.
• Смена движка.
• Проверка кода на ошибки.

Внедрение отложенной загрузки данных

Существуют плагины типа jQuery.lazy, расширения Lighthouse в Chrome, которые производят отложенную загрузку контента — загружают только тот материал, который видно на экране. Таким образом улучшается производительность и разумно используются ресурсы устройства. Загружать таким способом можно почти всё, что находится на странице. 

Для определения наличия отложенной загрузки на сайте можно воспользоваться анализатором ImageKit. Не стоит загружать все изображения на страницу с помощью отложенной загрузки, конечно, это позволит сократить время загрузки, но большинство изображений в HEAD части страницы не будут отображаться, пока JavaScript не выполнит свою команду.

Общие правила для отложенной загрузки:

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

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