Скорость имеет значение: эффективность веб-сайта является ключом к эффективному SEO и удобству использования

1. Достижение результатов
2. Во-первых, что мы подразумеваем под высокопроизводительным веб-сайтом?
3. Так, что действительно важно - истинное или предполагаемое исполнение?
4. Применяя это к вашим проектам по разработке сайтов
5. Установить «бюджет» производительности для сайта
6. сотрудничать
7. Воспользуйтесь преимуществом восприятия производительности
8. Грязные технические вещи
9. Собираем все вместе

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

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

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

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

Достижение результатов

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

Во-первых, что мы подразумеваем под высокопроизводительным веб-сайтом?

У «высокопроизводительного веб-сайта» есть два ключевых аспекта: реальная производительность и предполагаемая производительность. Когда мы говорим об истинной производительности, мы имеем в виду объективные метрики, основанные на общем размере страницы, доступной полосе пропускания и сложности кода, которые затем определяют, насколько быстро браузер начинает загрузку и завершает рендеринг страницы. Вы можете легко проверить истинную производительность своих страниц с помощью доступных плагинов для браузера и различных онлайн-инструментов.

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

Так, что действительно важно - истинное или предполагаемое исполнение?

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

Применяя это к вашим проектам по разработке сайтов

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

Установить «бюджет» производительности для сайта

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

сотрудничать

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

На этом этапе проекта вы действительно находите баланс между интересным дизайном и производительностью сайта, задавая вопросы типа: «Действительно ли этот слайдер со сложной анимацией действительно влияет на производительность, или мы можем достичь цели взаимодействия с пользователем другим способом?»

Воспользуйтесь преимуществом восприятия производительности

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

Грязные технические вещи

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

• Загружайте код / ​​контент асинхронно и избегайте компонентов блокировки рендеринга . Это большой показатель воспринимаемой производительности. Кодируйте свои страницы, чтобы посетителю не приходилось ждать загрузки всех ресурсов, прежде чем они смогут увидеть и взаимодействовать со страницей.
• Оптимизируйте / сожмите изображения, чтобы минимизировать размер загрузки страницы . Это более важно, чем когда-либо, так как разрешение цифровых камер увеличилось, а размеры изображений стали больше. Оптимизируйте изображения, чтобы размер и разрешение не превышали необходимые для конкретного приложения.
• Используйте кеширование в браузере. Настройте свой сайт и веб-сервер, чтобы включить кэширование изображений и кода в браузере для ускорения работы постоянных посетителей.
• Используйте сжатие веб-сервера. Этот шаг уменьшает размер ресурсов, которые браузер посетителя сайта должен загрузить.
• Минимизируйте таблицы стилей и JavaScript. Удаление пустого пространства из файлов JavaScript и CSS помогает сделать их загрузку максимально компактной и эффективной.
• Избегайте контента, который требует плагинов. Браузеру требуется дополнительное время для загрузки плагина, а затем больше времени для рендеринга содержимого этого плагина. В наши дни мы можем достичь практически всего, что нам нужно, просто используя HTML5, CSS и JavaScript.

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

Собираем все вместе

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

Похожие

Комментарии