Как повысить скорость загрузки веб-страниц без потери насыщенного контента

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

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

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

Изменить скорость загрузки страницы в соответствии с ее назначением

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

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

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

Вот грубый процесс для подражания:

1. Определите ключевые целевые страницы, у которых будет снижена скорость загрузки.
2. Дизайн вокруг лучшей практики для низкого времени загрузки.
3. Определите особенности наилучшей практики для низких нагрузок.
4. Разработать страницу (ы).
5. Измеряйте и ищите возможности сэкономить время загрузки.
6. Повторите 4-5 при необходимости.

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

Чтобы эффективно контролировать это после запуска веб-сайта, можно выполнить следующие два шага:

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

Оптимизация скорости загрузки: соображения дизайна

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

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

1. Максимально уменьшите использование изображений на ключевых целевых страницах. Тонкая иконография и дизайн могут сделать страницы такими же насыщенными.
2. Там, где вы используете изображения, убедитесь, что они оптимизированы без ухудшения качества.
3. Используйте скудные целевые страницы, оптимизированные для обычного поиска, и сохраняйте любой богатый контент на более глубоких страницах, которые не предназначены для обычного поиска.
4. Избегайте уникальных, сложных макетов по нескольким шаблонам. Чем проще разметка HTML, тем меньше будут файлы.
5. Избегайте сложных интерактивных элементов, которые полагаются на тяжелые библиотеки JavaScript. Да, это может выглядеть круто, когда что-то движется по экрану, но нужно ли это?

Технические аспекты, которые следует учитывать при реализации

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

• По возможности уберите зависимость от сторонних скриптов. Это может быть проблематично, поскольку вы полагаетесь не только на те скрипты, которые загружаются до загрузки страницы, но иногда они находятся под высокой нагрузкой и, следовательно, медленнее, чем обычно. Это может привести к «кусковому» времени загрузки.
• Используйте ленивые методы загрузки, чтобы гарантировать, что изображения, которые не появляются выше сгиба, когда пользователь прокручивает изображение.
• Лучше используйте адаптивные изображения. Недавно были достигнуты успехи в том, как реагирующие изображения обрабатываются браузерами. Это означает, что нам не нужно предоставлять одно большое изображение, которое работает во всех видовых экранах, и вместо этого мы можем предложить лучшее изображение для конкретных разрешений.
• Убедитесь, что встроенные видео загружаются после загрузки страницы, а не как часть загрузки страницы. Это означает, что пользователи увидят изображение предварительного просмотра для видео, и, как только они нажмут на ссылку, они увидят фактическое видео.
• Избегайте больших файлов htaccess для перенаправлений 301 и объединяйте правила в массовые перенаправления категорий, а не отдельные перенаправления со страницы на страницу.
• Используйте CDN для изображений. Это нужно будет измерить, поскольку CDN могут отрицательно сказаться на производительности, если база пользователей сайта особенно локализована.
• Минимизируйте файлы CSS и JavaScript. В любом случае, вы уже должны это делать, но есть дополнительные возможности уменьшить количество файлов на ключевых страницах. Это центральная часть при принятии решения, устанавливать ли новые плагины.
• Отбросьте поддержку старых браузеров. Это связано с тем, что старые браузеры требуют, чтобы определенные файлы CSS и JS создавались и загружались на сайт условно. Полностью удалив их, можно сделать еще один запрос.
• Минимизируйте количество плагинов, которые использует ваш сайт. Мы регулярно наследуем сайты, которые страдают от раздувания плагинов, и хотя это не новая проблема при работе с CMS, она все еще остается большой.

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

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