Как мы делаем оптимизацию скорости загрузки

Какие факторы влияют на скорость загрузки сайта?

На сегодняшний день очень большие требования предъявляются к современному сайту:

  • Посетители желают видеть красочные, наполненные интересным контентом страницы;
  • Поисковые системы требуют «быстрых страниц», наполненных по максимуму текстовой информацией;

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

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

Итак, какие же это все-таки факторы:

  1. Работа DNS-системы;
  2. Время при запросе и обмене информацией с БД;
  3. Распределение нагрузки на сервер;
  4. Запросы к страницам;
  5. Кэширование страниц;
  6. Загрузка JS-скриптов и CSS-стилей;
  7. Географическое положение сервера;
  8. Использование gzip-сжатия веб-ресурсов, изображений, скриптов и стилей;
  9. «Ленивая» загрузка;
  10. Использование уже закэшированных браузером специальных библиотек шрифтов и Javascript;
  11. Применение адаптивного дизайна, оптимизированного под мобильные устройства;
  12. Оптимизация видео файлов.

Зачем это нужно?

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

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

Чем оценить реальную скорость загрузки сайта?

Скорость загрузки сайта – один из самых важных факторов ранжирования. Интернет на мобильных устройствах не такой быстрый, как десктопный. Для проверки скорости используется несколько инструментов:

  • PageSpeed Insights – это инструмент для разработчиков от самого «Гугла». Он дает оценку скорости загрузки вашего сайта, а точнее оптимизации этой скорости по сто бальной шкале.
  • GTmetrix – один из инструментов, используемых для получения подробных отчетов о производительности веб-сайта. Этот инструмент является полностью бесплатным.
  • Dareboost – инструмент для оценки скорости загрузки сайта. При анализе скорости он учитывает более 100 контрольных параметров. Из них складывается общая оценка от 1 до 100 баллов.
  • Test My Site – сервис для тестирования скорости загрузки мобильных сайтов от Google. Test My Site сканирует веб-страницу по нескольким параметрам, а затем показывает среднюю скорость загрузки и, что самое интересное, — процент пользователей, которые покидают сайт, загрузки не дождавшись.

Как оценивается?

Оценка производительности проекта осуществляется на основе результатов автоматического тестирования таким инструментом как Google PageSpeed/LightHouse.

Закреплением результатов автоматического тестирования, служат данные полученные от посетителей ресурса по тем же метрикам, которые проверяет Google PageSpeed.

Google PageSpeed

Критерии оценки

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

Ключевые факторы, влияющие на оценку:

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

Понимая принцип оценки, программист и верстальщик проекта, должны сформировать код страницы таким образом, чтобы эти временные отрезки сделать как можно меньше. В среднем, для получения всего необходимого, совокупное время должно быть не более 2-х секунд. Задержка ввода должна быть не более 120мс.

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

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

Проводим комплекс мер, направленных на исправление проблемных мест проекта, для получения оценки 90+ в обозначенном выше тесте.

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

Проблемы делятся на две группы:

  1. Влияющие на то, как быстро проект начинает отдавать страницы браузеру (время между запросом от посетителя и получением первого байта браузером);
  2. И влияющие на то, насколько быстро браузер, получив код страницы, сможет отобразить что-то полезное посетителю.
Google PageSpeed-1

Группа 1

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

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

Группа 2

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

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

В итоге, заказчик получает:

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

Иными словами:

Без модуля формирование страницы происходит так:

  1. Код проекта, формирует код страницы и отдает его в браузер посетителю
  2. Браузер, согласно коду страницы, формирует ее отображение

С модулем происходит так:

  1. Код проекта формирует код страницы и отдает его модулю
  2. Модуль вносит коррективы в логику формирования страницы по заданным ему правилам и передает страницу браузеру
  3. Браузер, согласно коду страницы, формирует ее отображение

Модуль сделан таким образом, что:

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

Выполняемые работы:

  1. Работы по уменьшению количества внешних запросов, требуемых для формирования всей страницы или главной ее части.
  2. При необходимости, оптимизация верстки тех частей страницы, которые приводят к замедлению работы.
  3. Оптимизация существующего CSS кода в случае, если его объем превышает допустимую границу.
  4. Оптимизация работы с шрифтами необходимыми для отображения проекта.
  5. Оптимизация загрузки изображений (внедрение LazyLoad) таким образом, чтобы снизить нагрузку на канал посетителя, при этом не навредив индексируемости проекта.
  6. Оптимизация загрузки ресурсов, загружаемых посредством Iframe (Youtube плеера, карты и т.д.).
  7. Оптимизация и распределение нагрузки, создаваемой JavaScript логикой страницы.
  8. Настройка работы серверной части таким образом, чтобы изображения, отдаваемые посетителю, были сформированы в webp формате. Настройка не потребует от программистов проекта внесения изменений в свой код.

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

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

Открытие модуля для всех.

Google PageSpeed-2

Важное замечание

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

Очевидно, также что все оптимизации можно провести, исправив ошибки непосредственно в коде проекта.

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

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

Важное замечание 2

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

Какие технологии помогут при оптимизации скорости?

  1. Уменьшите объем загружаемых страниц;
  2. Оптимизируйте работу со скриптами;
  3. Отложите загрузку контента;
  4. Уменьшите объем графики;
  5. Уменьшите количество запросов браузера;
  6. Включите кэширование данных;
  7. Сократите размер кода CSS и JavaScript.

Как нужно вести разработку не в ущерб скорости?

Вот что следует сделать:

  • При разработке сфокусируйтесь на мобильной версии — к ней Google предъявляет более серьезные требования и ставит ее в приоритет;
  • Не используйте ненужные библиотеки и плагины, они сильно замедляют скорость загрузки сайта, но при этом даже могут не участвовать в отображении контента.
  • Особое внимание уделите моментальной загрузке первого экрана: по новым условиям поисковой системы он должен быть готов к работе и взаимодействию с пользователем максимально быстро.
  • Переместите в футер js, которые не участвуют в отображении страницы или, по крайней мере, первого экрана.
Не старайтесь достичь идеального показателя в 100 баллов. Не зная нужных тонкостей, можно вместо улучшения качества ресурса нанести ему значительный урон. Идеальный вариант — попросить помощи у того, кто в этом отлично разбирается. После диагностики будет видно, все ли в порядке или что-то действительно нужно менять.

Что можно требовать в качестве гарантии при заказе оптимизации скорости сайта?

  1. Мы гарантируем получение 90+ баллов в мобильном тесте оценки производительности.
  2. Мы гарантируем получение 90+ баллов в десктоп тесте оценки производительности.
  3. Мы гарантируем поддержку «24x7» на случай возникновения проблем в работе проекта. Даже если они не связаны с работой модуля.
  4. Мы гарантируем бесплатное обновление кодовой базы нашего модуля под любые изменения в работе алгоритма оценки производительности.

Кроме того

  1. Проводим любые консультации, связанные с технической реализацией задач проекта, в том числе SEO оптимизации и аудит качества работы сторонних специалистов.
  2. Осуществляем комплексную услугу по перебору всего кода и «выжиманию» из проекта всей скорости. Делается всё в плоть до расчета объема страниц, кратного передачи пакетов по tsp.
Скорость загрузки сайта

Что нужно предоставить Исполнителю, для оптимизации скорости загрузки сайта?

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

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

Стоимость данной услуги является переменной величиной и рассчитывается индивидуально, после аудита ресурса.

Если Вас заинтересовала данная услуга, то для того чтобы оформить заказ Вам необходимо связаться с нашим специалистом по телефону +375 (44) 525-05-28, либо электронной почте Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра. или же оставить заявку на нашем сайте, заполнив форму.

Отправите нам сообщение?

Вы хотите связаться с нами?

Добро пожаловать!

Вы хотите позвонить нам?

Уведомление