Запуск сайта - одна из, если не самая захватывающая часть всего процесса редизайна.
Видеть, как продукт, над которым вы и ваша команда так усердно работали, воплощается в жизнь, это просто приятно.
Однако после того, как вы отпразднуете запуск, происходит то, чего вы никогда не хотели бы случиться
Вы проверяете свою электронную почту и обнаруживаете, что пользователи жалуются вам на проблемы, с которыми они сталкиваются.
Страницы и ссылки выдают ошибку 404, некоторые страницы не активны, функциональность не работает и т. д. И как раз тогда, когда вы думали, что все идеально!
Я знаю, что никто не хочет сталкиваться с такими проблемами, поэтому я решил поговорить с двумя нашими разработчиками Тимом Остхаймером и Кайлом Шелдоном, чтобы подробно рассказать о 5 наиболее распространенных ошибках, которые они обнаруживают после запуска сайтов.
1. Проблемы совместимости браузера
CA: Люди используют множество браузеров. Есть Chrome, Firefox, Internet Explorer и т. д.
Ваш сайт выглядит по-разному во всех браузерах.
Иногда дело просто в толщине шрифта и интервале (в некоторой степени), но это также может быть функциональность, особенно если конкретный браузер, для которого вы оптимизируете, не поддерживает разделы вашего сайта.
Почему некоторые браузеры отображают наш веб-сайт по-разному и что нам следует проверить, чтобы убедиться, что наш сайт работает для большинства пользователей? Сначала я хочу пойти к тебе, Тим.
TO: Я думаю, именно вы спрашиваете, почему Internet Explorer выглядит плохо.
КС: Хаха! Да, Internet Explorer, безусловно, является наиболее подверженным проблемам.
TO: Да. Все браузеры созданы разными компаниями с использованием разного кода, и единственная причина, по которой ваш веб-сайт работает в большинстве из них, - это стандартные способы отображения кода.
Но каждый браузер индивидуален и содержит разные функции, которые по-разному отображают ваш код.
Возможно, вы слышали термин «WebKit», который представляет собой особый движок, относящийся к новым браузерам, в частности Chrome и Safari. Эти браузеры поддерживают больше селекторов кода, а такие браузеры, как Internet Explorer и Firefox, - нет.
Перед созданием веб-сайта вам следует проверить свою аналитику, чтобы увидеть, как распределяется трафик вашего браузера.
Например, если большая часть вашего трафика приходится на новые браузеры, а 0,5% приходится на Internet Explorer 9 и более ранние версии, вы можете отказаться от оптимизации для него, особенно если оптимизация для него займет больше времени. без шансов на увеличение бизнеса.
Бывают ситуации, когда некоторым компаниям приходится использовать старые браузеры.
Обычно это происходит по какой-то внутренней причине. Возможно, у них есть какое-то программное обеспечение, которое не работает на более новых версиях от Microsoft. В этом случае вам необходимо убедиться, что компания сможет использовать сайт, даже если он будет изменен.
Сделайте все возможное, чтобы оптимизировать процесс. Если вы знаете, что какие-то фрагменты кода не будут работать в определенных браузерах, попробуйте изучить другой метод. В противном случае вы рискуете совершить ошибку в дальнейшем.
CA: Как лучше всего проверить совместимость браузера, когда сайты готовы к тестированию?
TO: Когда вы действительно готовы начать оптимизацию для других браузеров, лучший способ - просмотреть браузер в реальном браузере, но есть и другие решения, такие как BrowserStack, чтобы создать виртуальную среду.
Это поможет вам увидеть, что в конечном итоге увидят пользователи, использующие эти браузеры. Затем вы можете использовать их встроенные инструменты разработки, чтобы оптимизировать и выяснить, какой код необходимо скорректировать.
Один из моих любимых плагинов JavaScript - Modernizr, который позволяет добавлять CSS в зависимости от совместимости браузера.
Итак, если вы используете определенные «причудливые» селекторы CSS3, которые Internet Explorer не может прочитать, Modernizr добавит на страницу несколько селекторов, на которые вы можете настроить стилизацию сайта по-другому.
Это означает, что ваш опыт работы в этом браузере может отличаться от современных, поэтому имейте это в виду для конечного пользователя.
KS: Каждый должен использовать плагин автоматического префикса, будь то возвышенный плагин, миксины для компаса или онлайн-инструмент, такой как Pleeeeseplay. Это поможет сгенерировать соответствующие префиксы поставщиков, которые устраняют большинство проблем с кроссбраузерностью.
2. Ошибки адаптивного веб-сайта
CA: На данный момент все мы знаем, что ваш сайт должен быть адаптивным. Но если вы все еще не знаете, что это значит, вы можете прочитать эту замечательную статью, чтобы узнать больше.
Когда мы проверяем наш сайт, мы иногда застреваем, глядя только на пару размеров экрана, которые, по нашему мнению, являются наиболее популярными, и отказываемся от всех остальных.
Например, хотя 40% вашего трафика может просматривать ваш сайт на экране ноутбука стандартного размера, вы легко можете получать трафик от тех, у кого область просмотра достигает 2560 пикселей или разрешение 4K. Если ваш веб-сайт выглядит неработающим в таких средах, это может быть очень неловко обнаружить позже.
Итак, Кайл, я хочу обратиться к тебе по этому поводу, понимаешь. Какие ошибки случаются с адаптивными веб-сайтами и как вы можете быть уверены, что во время проверки качества у вас не возникнет таких мелких проблем, как, например, на мобильных устройствах, планшетах и т. д.?
KS: Что ж, на самом деле нет никакой замены реальному физическому устройству. Если у вас есть на это бюджет, я бы порекомендовал лабораторию эмуляции/устройств. Это действительно правильный путь, но он очень непрактичен даже для таких агентств среднего уровня, как мы.
Браузерстек очень хорош. Это доступно, но может оказаться дорогим, если вы хотите, чтобы платформу использовали несколько пользователей одновременно. Иногда Browserstack может работать очень медленно. Вы также можете использовать панель инструментов устройства в Chrome, чтобы изменить размер экрана и просмотреть различные размеры области просмотра.
TO: Еще следует отметить, что существует два типа мобильных веб-сайтов. Обычно сейчас вы видите только адаптивные веб-сайты, но, возможно, вы помните, что видели адаптивные сайты и раньше.
На адаптивном сайте вы можете открыть его в браузере и изменить размер окна, и вы сразу же увидите изменение макета. Адаптивный веб-сайт - это веб-сайт, который загружает совершенно другой набор кода в зависимости от размера экрана при загрузке. Вы увидите это в мобильных приложениях и старых веб-сайтах, где вы, возможно, зашли в интернет-магазин.
Когда дело доходит до тестирования скорости отклика, мне нравится изменять размер окна в Chrome. Обычно это показывает мне, как сайт реагирует на каждый размер пикселя, чтобы я мог определить, есть ли какие-то конкретные неудобные комбинации. Но, как сказал Кайл, ничто не заменит настоящее устройство.
Вы также можете проверить элемент на iPad и iPhone с помощью Safari на компьютере. Вам просто нужно убедиться, что у вас включен режим разработки или включена панель инструментов разработки и что к вашему компьютеру подключен провод.
Вы сможете проверять элементы, наводить курсор на все и просматривать код так же, как на компьютере, за исключением того, что вы можете видеть все это на своем телефоне, что действительно помогает исправить определенные ошибки, если они действительно есть. тревожно.
3. Ссылки и формы сайта ничего не делают
CA: Очевидно, что на вашем сайте может возникнуть масса функциональных проблем, независимо от того, какие вещи вы пытаетесь интегрировать, но я думаю, что это одна из меньших проблем. проблемы, которые мы склонны упускать из виду, - это проверка всех наших ссылок, кнопок и форм.
Итак, Тим, как ты думаешь, ты мог бы поговорить о том, насколько тщательно нужно проверять свои страницы и о том, какие наиболее распространенные проблемы со ссылками ты обычно видишь?
TO: Конечно. Таким образом, во время разработки веб-сайта часто разработчики будут использовать заполнители для кнопок и форм. Они нужны только для того, чтобы макет выглядел так, как должен.
Это одна из причин, почему о ссылках обычно забывают, потому что страница выглядит правильно, но на самом деле вам нужно нажимать на кнопки или проверять гиперссылку, чтобы убедиться, что она указывает в нужное место. Лучший способ сделать это - просто нажать на все, но это может занять много времени, и даже в этом случае у вас не обязательно будет возможность проверить это идеальным способом, особенно если вы используете что-то вроде промежуточной среды.
Если вы находитесь в промежуточной среде, то эта кнопка, скорее всего, просто указывает на URL-адрес, который не существует, пока он не станет активным. Итак, очевидно, что это немного сложно протестировать, потому что при нажатии на ссылку вы будете отправлены на ошибку 404, но это не обязательно означает, что страница неправильная или URL-адрес неправильный.
Всегда будут определенные ситуации, когда вы не сможете полностью протестировать что-то, пока оно не выйдет в свет. Итак, вам нужно сделать все возможное, прежде чем сайт заработает, и как только это произойдет, вам нужно, чтобы команда людей прочесала сайт, чтобы убедиться, что все выглядит правильно и работает правильно.
Кроме того, есть инструменты, которые можно использовать для автоматизации этого процесса. Я бы посоветовал Screaming Frog. Вы также можете использовать его для проверки неработающих ссылок и ошибок 404, когда ваш сайт работает.
Этот инструмент будет сканировать весь ваш сайт, проверять наличие аномалий метаданных или недопустимых свойств и возвращать любые ошибки, чтобы помочь вам устранить и исправить эти ошибки.
4. Коды Noindex не были удалены
CA: Итак, следующая ошибка, о которой я хочу поговорить, - это наличие фрагмента кода «NoIndex» на вашем сайте после запуска.
В предисловии к этому разделу отметим, что код без индексирования - это небольшой фрагмент кода, который можно разместить на активной странице и который предотвращает сканирование сайта поисковыми системами. В процессе разработки этот фрагмент может быть полезен для тестирования активных страниц, которые вы не хотите, чтобы другие находили, но он будет чрезвычайно вреден, если оставить его на вашем сайте.
Кайл, я хочу узнать твое мнение по этому поводу. В каких еще сценариях ты бы хотел это использовать?
KS: Лучший пример того, где вы можете использовать это, - это страницы благодарности, где вы не хотите, чтобы эти страницы отображались в поисковых системах. Вы хотите, чтобы кто-то совершил конверсию на прикрепленной к ним целевой странице, а после конвертации перешел на страницу благодарности с предложением.
Как упомянула Кристина, вы можете поставить «нет индекса», когда находитесь в процессе разработки сайта. Например, если у вас нет промежуточной среды, вам может потребоваться добавить этот код на действующие страницы, чтобы люди могли работать с сайтом так, чтобы люди не нашли незаконченную версию.
Непосредственно перед запуском необходимо убедиться, что эти теги удалены, чтобы поисковые системы немедленно начали сканировать страницу и ранжировать эти страницы в результатах поиска.
Опять же, вы можете использовать такой инструмент, как Screaming Frog или SEMRush, и проверить весь сайт, чтобы убедиться, что не индексируются только те страницы, которые вы не хотите индексировать. То же самое относится и к вашей карте сайта: любые страницы, которые не проиндексированы, также должны быть в вашей карте сайта, иначе у поисковых систем могут возникнуть проблемы с их поиском.
TO: Внутри у нас на самом деле есть небольшой фрагмент кода, который дает нам небольшое уведомление при загрузке страницы в HubSpot в режиме редактора, которое сообщит нам, если тег no index существуют на странице. Таким образом, мы можем легко идентифицировать любые страницы, у которых есть тег no index, который должен быть установлен. Это всего лишь небольшой фрагмент кода, который было довольно легко написать. Если это интересно, вы можете связаться с нами или оставить комментарий ниже, и мы пришлем его.
5. Низкая скорость сайта Скорость
CA: Последняя ошибка, о которой мы поговорим, - это скорость сайта. Я склонен считать, что люди не думают об этом, когда просматривают свой сайт. Они просматривают его и думают, что все в порядке, но затем запускают свой сайт и обнаруживают, что у его страниц высокий показатель отказов, или их аналитика говорит, что время загрузки сайта очень велико.
Я слышал интересную статистику на ConversionXL. В нем говорится: «47% людей ожидают, что веб-страница загрузится за две секунды или меньше». Это действительно страшно. Это означает, что вам нужно, чтобы ваш сайт работал невероятно быстро, а две секунды - это действительно очень сложная цифра.
Тим, я думаю, у тебя был большой опыт общения с людьми, которые спрашивали тебя, что они могут сделать, чтобы ускорить свой сайт. Что замедляет работу сайта и какой краткий список вещей следует проверить, чтобы обеспечить высокую скорость сайта?
TO: На самом деле существует несколько контрольных точек, для которых вы хотите оптимизировать. В общем, вам нужно убедиться, что страница загружается как можно быстрее, чтобы пользователь мог начать пользоваться сайтом менее чем за две секунды или меньше.
Обычно причина медленной загрузки связана с медиа, и обычно под медиа я подразумеваю изображения, но на некоторых сайтах они могут включать и видео. Медиа, вероятно, является одним из наиболее распространенных ресурсов на сайте, которые замедляют работу вашего сайта. Просматривая свой сайт, убедитесь, что все медиафайлы максимально сжаты, чтобы ваш сайт загружал изображения размером 100 КБ, а не 1 МБ.
Еще одна вещь, о которой следует помнить: цифры - это запросы, которые делает ваш сайт. Итак, это такие вещи, как изображения, медиа-скрипты, шрифты и многое другое, что эта страница запрашивает для загрузки с других веб-страниц. Если он запрашивает данные с других серверов, это может еще больше повлиять на время загрузки, поскольку браузер пользователя не запрашивает всю информацию с одного сервера. На самом деле ему приходится обращаться к нескольким серверам.
Вам также следует сжимать файлы JavaScript и CSS, чтобы освободить дополнительное пространство. А если вы не знаете, как это сделать, существует множество инструментов, которые могут вам помочь.
KS: Другой вариант - использовать CDN (сеть доставки контента). Это означает размещение всех ваших ресурсов на одном кэшированном сервере, чтобы даже если у вас есть куча разных HTTP-запросов, которые будут поступать из разных мест, CDN сможет кэшировать их на своем сервере.
Это помогает увеличить время рендеринга страницы, поскольку все данные поступают из одного и того же места, и не нужно загружать их каждый раз при обновлении страницы.
CA: Отлично, это подводит нас к концу этого интервью! Прежде чем мы закончим, я хочу спросить вас, ребята, есть ли у них другие ошибки, с которыми вы обычно сталкиваетесь во время контроля качества? Как сделать так, чтобы их не произошло? Дайте нам знать в комментариях ниже!