Ускорение загрузки сайтов

Есть ли у Вашего сайта проблемы со скоростью?

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

Часто причиной обращения к нам являются неудовлетворительные оценки ресурсов PageSpeed Insights, GTmetrix, Pingdom Tools или других аналогов. Но подобные ресурсы не могут дать вам объективную информацию о скорости сайта.

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

Некоторые из этих ресурсов дают показатели в баллах, другие в секундах. PageSpeed Insights и другие ресурсы, которые работают на движке Lighthouse, такие как GTmetrix, вообще не измеряют время загрузки вашего сайта. Lighthouse скачивает файлы вашего сайта и проводит симуляцию загрузки с сильно заниженной скоростью сети. При этом, он симулирует работу сервера, исключая целый пласт оптимизаций на стороне вашего сервера. А еще он считает все файлы внешних ресурсов (скрипты аналитики, видео YouTube, карты, онлайн чаты и многое другое), которые загружаются асинхронно (не мешая загрузке сайта), файлами вашего сайта, которые блокируют загрузку самого сайта.

Это лишь малая часть примеров особенностей работы подобных ресурсов. Более детально можете почитать в нашей статье “PageSpeed Insights - как читать данные и можно ли им верить?”, где мы на примере PageSpeed разбираем особенности работы и рекомендации, которые дает этот ресурс.

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

Если вам интересен вопрос скорости вашего сайта, то вы можете ознакомиться с нашими статьями “Скорость сайта. От чего зависит скорость загрузки сайта и как не допускать замедления” и “Оптимизация времени ответа сервера (TTFB)”. Или же просто закажите анализ скорости загрузки вашего сайта. Мы сделаем объективные замеры и дадим рекомендации по реальному ускорению загрузки сайта.

Как измерить скорость загрузки сайта

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

На время загрузки влияет множество факторов:

• Мощность сервера, его программное обеспечение и настройки
• Качество программного кода и базы данных сайта
• Количество и размер файлов открываемой страницы сайта, а также качество и объем выполняемых скриптов JavaScript
• Расстояние от сервера до клиента
• Скорость и пропускная способность интернет-канала на всем пути от сервера до клиента
• Скорость интернета клиента и количество свободных ресурсов на его устройстве
• Текущая посещаемость сайта

Глядя на этот список мы можем сделать два очевидных вывода:

1. Далеко не на все факторы мы можем оказать влияние
2. У нас всегда будут нестабильные факторы, которые не позволят выразит четкое время загрузки. На любом сайте всегда будут колебания скорости

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

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

Желательно минимизировать влияние нагрузки на сервер сайта, Для этого можно сделать копию сайта на другом сервере и провести замеры там.

Такой способ замер дает возможность получить максимально объективную информацию с четкой интерпретацией данных.

Базовая оптимизация скорости загрузки сайта

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

Gzip сжатие

Gzip-сжатие применяется для сжатия на лету текстовых файлов. Текстовые файлы на сайте - это файлы html, css, js, xml, csv и другие. Компрессия происходит практически мгновенно на стороне сервера, а декомпрессия также быстро на стороне браузера клиента. Gzip сжимает текстовые файлы на 50-80%. Однако, это сжатие не эффективно для изображений и других уже сжатых файлов, например архивов.

HTTP/2

Протокол HTTP/2 имеет множество преимуществ перед первой версией. Но мы выделим одно наиболее значимое.

В первой версии протокола, браузер мог одновременно скачивать с одного домена не более двух файлов, что создавало большую проблему для сайтов с большим количеством файлов. В HTTP/2 это ограничение снято, что может дать ощутимое сокращение времени загрузки сайта.

Кеширование на стороне браузера

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

Ускорение загрузки сайта

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

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

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

Ускорение загрузки интернет-магазина с большим количеством товаров

Как правило, у интернет-магазина, самым медленным типом страниц является страница категории товаров. И чем больше товаров в категории, тем медленнее она работает.

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

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

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

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

Ускорение загрузки сайта при нехватке серверных ресурсов

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

Самым ценным ресурсом сервера является процессор. Частота процессора отвечает за скорость вычислений, а количество ядер отвечает за количество параллельных вычислений.

В случае нехватки серверных ресурсов, самым логичным решением будет увеличение их количества. Но это решение имеет свои ограничения и недостатки.

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

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

В большинстве случаев, когда к нам обращаются по поводу медленной работы сайта, размещенного на VPS, мы видим, что сервер никто не настраивал. Настройка сервера - это большой пласт оптимизации, позволяющий значительно увеличить продуктивность сервера.

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

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

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

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

С изображениями бывают три вида проблем:

• Изображения слишком большие
• Неподходящий формат изображений
• Отсутствуют изображения для мобильной версии сайта

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

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

Иногда изображения на сайт загружают прямо из камеры или после базовой конвертации из raw-формата в форматы для web. И на сайте можно увидеть изображение шириной 10 тысяч пикселей, при том что на сайте оно отображается в размере 400 пикселей. Это обеспечивает несколько лишним мегабайт на каждом таком файле.

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

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

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

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

SVG - это векторный формат, поддерживаемый браузерами. По сути, этот формат текстовый и файлы содержат координаты фигур и их цвет. Формат подходит для простых иконок и логотипов.

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

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

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

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

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

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

WebP - это относительно новый формат, разработанный в Google. Формат вобрал в себя преимущества всех вышеперечисленных форматов. Он поддерживает анимацию и при этом занимает меньше места чем gif. Формат поддерживает сжатие с потерями и при єтом может занимать меньше места чем jpg. Он также поддерживает сжатие без потерь и прозрачность и при этом занимает меньше места чем png.

Все выгляди так, как будто этот формат идеален. Возможно, он таки станет. Но из-за плохой поддержки не все преимущества формата еще доступны.

Речь идет не о поддержке браузеров, в браузерах формат уже давно поддерживается. И не о поддержке на стороне CMS, поскольку в последних версиях, большинство популярніх движков уже поддерживают работу с ним. Речь о поддержке в графических редакторах.

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

Суть в том, что важен не просто факт наличия изображения в каком-то формате, важно иметь возможность управлять сжатием. Конвертеры не дают возможности управлять сжатием и в результате, размер файла в формате WebP часто получается больше, чем в формате jpg.

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

JPG

50 kb

WebP

148 kb

Визуально, изображения мало отличаются, но файл в jpg занимает в три раза меньше места чем WebP.

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

Оптимизация изображений для мобильной версии сайта

Подавляющее большинство сайтов имеют неоправданно большой размер изображений на мобильніх устройствах.

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

Такая ситуация не удивительна, поскольку CMS не дают возможности управлять файлами для разных устройств из админки.

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

Жертвы оптимизации скорости загрузки сайта

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

Очень важно понимать, что влияет на скорость и в чем конкретно проблема сайта, но не менее важно понимать как работает то решение, которое вы применяете.

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

Кэширование страниц на стороне сервера

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

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

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

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

У такого кэширования есть побочные эффекты.

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

Если используется кэширование, то не запрашивается актуальная информация о странице и она может выдаваться с некорректными данными. Например, у товара изменилась цена, или товар закончился, а на сайте продолжает стоять статус “в наличии”.

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

Модули конвертации изображений в формат WebP

Google активно продвигает свой формат WebP и везде где может рекомендует его использовать.

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

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

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

Многие сторонние решения для конвертации, не обеспечивают замену уже существующих на сервере файлов jpg на WebP. Они сохраняют и классический формат и WebP. А єто в свою очередь приводит к тому, что изображения начинают занимать более чем двойной обїем на сервере.

У файловых систем на диске есть индексные узлы (inod). Каждый файл или папка имеет inod, который служит уникальным идентификатором. Количество inod на диске ограничено, даже если на сервере будут только пустые папки и файлы с нулевым размером, при достижении лимита по inod, вы не сможете больше ничего записать на диск.

Если ваш модуль поддержки формата WebP удваивает количество изображений, то вам стоит контролировать не только объем файлов, но и количество inod.

На одном проекте мы встретили модуль, который не только создавал файлы WebP, но и организовывал каталог хранения. В результате такой организации он создал только папок более 90 тысяч. При том, что на сайте было около 10 тысяч товаров.

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

Минимизация текстовых файлов

Все файлы сайта, кроме медиафайлов, являются текстовыми.

Очень часто мы встречаем рекомендации о минимизации таких файлов. Речь идет об удалении отступов и переносов строк.

Много ли можно сэкономить таким образом?

На самом деле, не мало. Для примера приведу одну из наиболее распространенных библиотек для сайтов Bootstrap. В обычном состоянии, этот файл занимает 281 kB, а в минимизированном - 233 kB. Разница составляет 48 kB, что не так и мало.

Но мы должны рассматривать все наши оптимизации в комплексе, а не в вакууме.

Стандартной практикой является использование Gzip-сжатия, о котором мы писали выше. Так вот, после сжатия файл нашей библиотеки в обычном состоянии занимает 33,5 kB, а в минимизированном - 30,9 kB. Разница - 2,6 kB.

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

Оптимизация PageSpeed Insights

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

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

Если вам предлагают быстро и дешево ускорить сайт, то скорее всего, речь идет именно об этом методе.

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

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

Но при каждом очищении кеша или если кеш переполнен, страница будет загружаться значительно медленней из-за процесса “оптимизации”.

CDN

Использование CDN - одна из наиболее распространенных рекомендаций по ускорению сайта. К сожалению, мы очень редко встречаем тех, кто это использует и при этом, понимает что это и нужно ли ему это.

Давайте попробуем в этом разобраться.

CDN (Content Delivery Network) — это распределенная сеть серверов, предназначенная для доставки контента пользователям с минимальной задержкой и максимальной скоростью за счет сокращения расстояния от пользователя до сервера. CDN используется только для статических файлов, таких как изображения, видео, css, js, xml, и др.

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

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

Если ваш сайт размещен в Украине как и целевая аудитория, то вам вряд ли нужен CDN, но если вы все же хотите его использовать, то вам нужна сеть CDN именно в Украине, а не в Китае.

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

Какие методики ускорения сайта мы применяем?

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

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

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

Эта методика позволяет значительно сократить время ответа сервера сайта работающего на любом движке.

Заказать ускорение сайта в студии WEB ROOM

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

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

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

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

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