Вопросы к разработчикам

Это перевод статьи из западного сайта, просим прощение за качество текста, это вина не наша, а Google Translate.

Интервьюер: Christine Austin

Гости: Tim Ostheimer, Kyle Sheldon

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

TO: Я думаю, что вы спрашиваете, почему Internet Explorer так ужасно отображает сайты?

КС: Хаха! Да, Internet Explorer, безусловно, наиболее подвержен проблемам.

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

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

Возможно, вы слышали термин «WebKit», который представляет собой особый движок, относящийся к новым браузерам, в частности к Chrome и Safari. Эти браузеры принимают больше селекторов кода, в то время как браузеры, такие как Internet Explorer и Firefox, не могут.

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

Например, если большая часть вашего трафика использует более новые браузеры, но 0,5% приходится на Internet Explorer 9 и ниже, вы можете избежать неоптимизации, особенно если его оптимизация займет больше времени без возможности увеличения бизнеса.

Есть ситуации, когда некоторые компании обязаны использовать старые браузеры.

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

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

CA: Как лучше всего проверить совместимость браузера, когда сайты готовы к QA?

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

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

Один из моих любимых плагинов JavaScript - Modernizr, который позволяет добавлять CSS на основе совместимости браузера.

Таким образом, если вы используете определенные «причудливые» CSS3-селекторы, которые Internet Explorer не может прочитать, Modernizr добавит на страницу некоторые селекторы, которые вы можете настроить, чтобы по-разному стилизовать сайт.

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

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

CA: Все мы знаем на данный момент, что мы должны сделать свой сайт отзывчивым.

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

Например, хотя 40% вашего трафика может просматривать ваш сайт на стандартном экране ноутбука, вы можете легко получать трафик от тех, у которых есть области просмотра с разрешением 2560px или 4k. Если ваш сайт выглядит испорченным в этих средах, это может быть довольно неловко обнаружить позже.

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

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

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

TO: Еще одна вещь, на которую следует обратить внимание, это два типа мобильных сайтов. Обычно вы видите только адаптивные сайты сейчас, но вы можете помнить, что видели адаптивные сайты в прошлом.

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

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

Вы также можете проверить элемент на iPad и iPhone с помощью Safari на компьютере. Вам просто нужно убедиться, что у вас включен режим разработки или включена панель инструментов разработки, а также подключен провод к вашему компьютеру.

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

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

Я услышал интересную статистику на самом деле ConversionXL. В нем говорится, что «47% людей ожидают, что веб-страница загрузится через две секунды или меньше». Это действительно страшно. Это означает, что вам нужно, чтобы ваш сайт был невероятно быстрым, а две секунды - это действительно очень сложное число.

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

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

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

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

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

KS: Другой вариант - использовать CDN (сеть доставки контента). Для этого все ваши ресурсы размещаются на одном кэшированном сервере, поэтому даже если у вас есть несколько разных HTTP-запросов, которые будут поступать из разных мест, CDN сможет кешировать их на своем сервере.

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

CA: Отлично, это подводит нас к концу этого интервью!