Как сбалансировать высокую скорость загрузки веб-страницы с богатым контентом

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

Не секрет, что время загрузки страницы чрезвычайно важно для успеха веб-сайта. Алгоритмы поиска Google способствуют быстрой загрузке, а также существует множество исследований, которые показывают, что небольшое увеличение времени загрузки страницы может отрицательно сказаться на конверсиях. Менеджер по цифровому маркетингу Hallam Том Уайти в прошлом году написал в блоге отличный пост о том, как улучшить скорость загрузки страницы. В то время как наши партнеры по хостингу, WP Engine, создали отличную инфографику о скорости загрузки страницы.

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

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

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

Свяжите скорость страницы с ее назначением

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

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

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

Вот примерный процесс, который можно применить:

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

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

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

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

Соображения по конструкции для оптимизации скорости загрузки

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

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

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

Технические соображения при внедрении

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

1. По возможности избавьтесь от сторонних скриптов. Это вызывает проблемы, потому что вы не только полагаетесь на эти скрипты, загружаемые до загрузки страницы, но иногда они также находятся под высокой нагрузкой и загружаются медленнее, чем обычно. Это может привести к неравномерной загрузке.
2. Используйте методы отложенной загрузки, чтобы гарантировать, что изображения, которые не отображаются над сгибом, загружаются, когда пользователь прокручивает изображение.
3. Лучше используйте адаптивные изображения. Были достигнуты некоторые успехи в том, как реагирующие изображения обрабатываются браузерами, а это означает, что нам не нужно предоставлять одно большое изображение, которое работает на всех портах просмотра и может предложить лучшее изображение для определенных разрешений.
4. Убедитесь, что встроенные видеоролики загружаются после загрузки страницы, а не как часть загрузки страницы. Это означает, что пользователи увидят изображение для предварительного просмотра видео, а затем увидят само видео после нажатия на ссылку.
5. Избегайте больших файлов htaccess для перенаправления 301 и объединяйте правила в групповые перенаправления категорий, а не в отдельные перенаправления между страницами.
6. Используйте CDN для изображений. Это потребует измерения, поскольку сети CDN могут отрицательно сказаться на производительности, если база пользователей сайта особенно локализована.
7. Сверните файлы CSS и Javascript. В большинстве случаев вы уже должны это сделать, но могут быть дополнительные возможности для уменьшения количества файлов на ключевых страницах. Это центральная часть принятия решения об установке любых новых плагинов.
8. Откажитесь от поддержки старых браузеров. Старые браузеры требуют, чтобы определенные файлы CSS и JS были созданы и загружены на сайт условно. Если мы сможем удалить их полностью, нам потребуется на один запрос меньше.
9. Сведите к минимуму количество плагинов, используемых на вашем сайте. Мы регулярно наследуем веб-сайты, которые страдают от раздутия плагинов. Это не новая проблема при работе с CMS, но все же большая.
10. Устраните любую зависимость от несущественных требований к хостингу, таких как хостинг изображений для подписей электронной почты.
11. Выполните запросы оптимизации базы данных. Если ваш веб-сайт существует какое-то время, существует ряд методов базы данных, которые можно использовать для оптимизации времени выполнения запросов.

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

Если вам нужна помощь в веб-разработке, не стесняйтесь обращаться к нам.