Проходит ли ваш сайт тест производительности?

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

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

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

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

Тест производительности веб-сайта

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

Вот какую оценку мы получили за сайт WIX:

Тест оценивает веб-сайты по 100-балльной шкале, поэтому 94 выглядит довольно неплохо. Оценка учитывает факторы из четырех категорий:

• Безопасность
• мобильный
• SEO
• Производительность

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

Безопасность вашего сайта

Эта категория очень простая и оценивается всего в 10 баллов на веб-сайте Grader. Установлен ли на вашем веб-сайте SSL-сертификат и все ли его элементы работают через него?

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

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

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

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

Мобильная версия вашего сайта и отзывчивость

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

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

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

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

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

На веб-сайте WIX объявлена ​​область просмотра и используются медиа-запросы, поэтому мы получили оценку 30/30.

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

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

Поисковая оптимизация вашего сайта

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

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

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

Вот четыре элемента, которые ищет этот оценщик веб-сайтов, почему они важны, а также советы по их оптимизации:

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

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

Если вы ищете SEO-компании в Хьюстоне, убедитесь, что их собственный веб-сайт эффективен в том, что они продают. Поскольку на сайте WIX используются заголовки страниц, заголовки, метаописания и карта сайта, мы получили 30/30 баллов за SEO.

Производительность вашего сайта

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

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

Суть в том, что мы стали нетерпеливыми, особенно в том, что касается Интернета. Если пользователь сидит и ждет загрузки вашего веб-сайта, вероятность того, что он покинет ваш сайт и перейдет на тот, который загружается быстрее, резко возрастает с каждой секундой. Хорошей целью является скорость загрузки страницы около 3 секунд.

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

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

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

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

Загрузка страницы размером 10 МБ на рабочий стол при подключении к высокоскоростному широкополосному Интернету — это пустяки, это происходит в мгновение ока. Когда вы попытаетесь загрузить ту же самую страницу размером 10 МБ через беспроводную сеть 3G, вы получите совсем другие впечатления.

Размер страницы — это фактор номер один, определяющий, насколько быстро кто-то сможет загрузить ваш сайт. Вам следует стремиться к страницам размером максимум 5 МБ, а в идеале — менее 3 МБ.

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

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

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

Более глубокое погружение в производительность

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

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

Мы должны начать с того, что этот инструмент имеет тенденцию смотреть на вещи с точки зрения «идеального мира». Некоторые правила хороши в теории, но их практически невозможно исправить в реальной жизни. Например, когда я запускаю Amazonс помощью этого инструмента, они получают 66/100 для настольной версии и 64/100 для мобильной версии.

Веб-сайт WIX получил оценку 74/100 для настольной версии и 69/100 для мобильной версии.

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

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

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

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

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

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

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

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

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

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

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

2. Кэширование браузера

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

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

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

3. Сжатие и минимизация

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

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

Хорошей идеей будет сжать и минимизировать как можно больше кода на вашем сайте.

CloudFlare – слово мудрым

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

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

• Безопасность – CloudFlare добавляет на ваш сайт как сертификат SLL, так и базовую защиту брандмауэра.
• Кэширование – Вы можете не только управлять кешированием браузера, но и ваш сайт будет кэшироваться в CloudFlare CDN (сети распространения контента), предлагая дополнительные преимущества кеширования и скорости.
• Сжатие, минификация и многое другое – CloudFlare на лету сжимает и минимизирует ваш код, позволяя вам сохранять эти комментарии и пробелы в исходном коде, одновременно предоставляя браузерам хорошо минимизированный код. Кроме того, CloudFlare имеет дополнительную предварительную загрузку запросов, которые ваш веб-сайт отправляет внешним источникам.

Вывод

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

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

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

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