Автор оригинала: James Y Rauhut.
Если есть одно сообщение, что команда Chrome dev хочет водить дом для разработчиков, это так: Производительность вопросов Отказ
Скорость была центральной частью их недавних разработчиков Chrome разработчиков. Они сделали это совершенно ясно, что у пользователей мало терпения, а мобильные сети имеют высокую задержку.
Если вы можете максимум скорость вашего веб-приложения, Google даст вам преимущественный рейтинг в результатах поисковой системы. И лучше рейтинг означает намного больше пользователей. И счастливее пользователи тоже.
Google даже построил Интерфейс командной строки и инструмент Chrome Plugin называется маяк вести вас к высокой производительности.
Маяк имитирует множество различных ситуаций, которые могут повлиять на опыт вашего пользователя. Затем он возвращает 1-100 класс того, как ваше прогрессивное веб-приложение обрабатывает их.
Теперь вы можете думать: «Почему я должен позволить Google босса мне о том, как я структурирую мой сайт?» Или, может быть, вы думаете: «Ну, Google не знает обо всех других требованиях проекта, которые у меня помимо скорости».
Ну, я не верю, что Google пытается стать авторитетом в этой области, или определить, какие ваши главные приоритеты должны быть. Вместо этого я думаю, что Google построил маяк, чтобы заманчил процесс достижения показателей производительности, которые они думают, требуют пользователей.
Таким образом, вы должны весить каждые критерии маяка в отношении ваших существующих приоритетов, а затем решайте для себя, какие узкие места стоят решения.
Когда я впервые обнаружил плагин маяка, я проверил мой Неотложный сайт портфолио 90-х годов Отказ Я бросил это веб-приложение в начале этого года, после того, как я устал вручную обновлять мою работу.
Использование узла, WebPack и React, мой сайт – seejamescode.com – отвечает на запросы, получая мою недавнюю деятельность от многих разных API. Я был довольно доволен приложением.
Это было до тех пор, пока я не бой маяк, и это дало мне счет 63/100. Но вместо того, чтобы быть всеми об этом, я принял свой счет как вызов, чтобы узнать новые вещи во время моего свободного времени.
Всякий раз, когда я изучал технику, чтобы помочь повысить счет своего личного сайта, я бы тогда вернулся к проектам компании и улучшил их по мере необходимости в этом порядке:
- Улучшить первую значимую «краску» (рендеринг пользовательского интерфейса)
- Улучшить индекс восприятия скорости
- Добавить файл манифеста для каталогов
- Добавьте HTTPS и перенаправить на него
- Добавить услугу работников для автономных возможностей
- Убедитесь, что пользователи с JavaScript отключены по-прежнему получают ту же информацию, что и пользователи с поддержкой JavaScript.
Давайте возьмем более глубокий взгляд на то, что влечет за собой каждую из этих оптимизаций.
Первая значимая краска
Первая значимая краска – это то, что веб-разработчики всегда отслеживались, но с небольшим поворотом. Мы всегда были обеспокоены тем, как долго требуется для пользователя, чтобы увидеть некоторое содержание на странице (первая краска). Первый Значимый Paint просит нас времени, сколько времени требуется для пользователя, чтобы увидеть основной контент вместо просто навигационного бара.
Интересно, что это можно решить так же, как многие из нас уже сталкиваются с производительностью: путем обеспечения приложения отправляет как можно меньше данных.
Например, комментатор однажды проверил мой сайт. Они обнаружили, что я запросил размеры изображения около 1200 пикселей! Я был рад, что они обнаружили это, потому что это был первый шаг к сокращению времени загрузки моего сайта. Эти изображения потребовали много времени для загрузки пользователя, несмотря на то, что мои CSS не будут отображать изображения какие-либо шире, чем 500 пикселей.
Запрашивая изображения как 500 пикселей, я смог вдвое уменьшить размер этих запросов изображений.
Еще один трюк для уменьшения моей первой значимой краски был умнее о моем пакете WebPack. Если вы используете WebPack, обязательно посмотрите на Многие оптимизации Вы можете сделать для производства. Самая большая вещь, которую вы можете сделать, это быть умным о ваших зависимостях.
Осмотрите свой пучок И определить, есть ли сторонний код, без которого вы можете обойтись. После моего собственного расслоения я понял, что мне действительно не нужен момент. Хотя эта библиотека добавляет много ценного в нем, удаляя его как зависимость выбросила 60 КБ из моего пакета.
Самый быстрый способ нагрузки приложения вашего узла может быть уменьшен, обеспечивает сжатие всего отправленного. Проверьте Node.js Сжатие промежуточного программного обеспечения Отказ Если вы используете Express, вам нужно только для этого промежуточного программного обеспечения, которое затем обрабатывает остальные для вас. Я видел, что это промежуточное программное обеспечение уменьшает размеры нагрузки приложения более половины!
Индекс восприятия скорости?
Индекс восприятия скорости – отличная статистика из-за его интеграции с пользовательским опытом. Как быстро ваш пользователь воспринимает ваше приложение? Они видят JITTERS, пока содержимое загрузка? Они уверены в том, чтобы знать, что страница сделана загрузкой?
«Контентные прыжки» являются одной из самых больших причин плохого индекса скорости восприятия. Это происходит по двум причинам:
- Ваш пользователь начинает искать желаемого контента как можно скорее, означающий, что они будут прокручивать вниз, прежде чем нагрузка на страницу.
- Ваши содержащие элементы не имеют заранее определенных высот в CSS.
Сложная часть о фиксировании Это то, что вы должны знать физическое пространство, которое ваш контент возьмет на экран или подделать его как можно лучше.
Многие разработчики увидели решение в мобильном приложении Facebook, называемыми «Защитниками скелета». В то время как мобильные приложения Facebook извлекают данные, он заполняет посты с серыми полосами, которые моделируют заголовок, изображение и интервал абзаца.
Упрощенное исправление – указать минимальную высоту для ваших содержащих элементов. Это уменьшит вероятность того, что пользователи, сталкивающиеся с насильственными прыжками контента.
Помочь сети с файлом манифеста
Это в основном политическая проблема. Google и Microsoft хотят Dethrone App App Store с вашими веб-приложениями. Компании используют Meta Info в своих проявлениях для классификации и файла вашего веб-приложения в своих каталогах. Это также помогает браузерам создавать приятные плитки значка, когда ваш пользователь сохраняет ваше приложение на свой домашний экран.
Как веб-разработчик, нет сильной причины, чтобы быть в руках в объятиях об этих критериях. Из всех проблем, которые я упоминаю в этой статье, это самое проще всего решить. Создать maineest.json file и обратитесь к этому к HTML Link Tag Отказ
Httpsecure fort.
Сделать ваш сайт безопасным с HTTPS, обычно не первым делом на разуме разработчиков начального уровня. В конце концов, ваш сайт может пройти без него.
Но браузеры делают толчок Для каждого веб-сайта есть сертификат SSL. Это гарантирует, что третьим лицам не связывается с кодом, достигнувми ваших пользователей.
Так попрощайтесь до риска введенных объявлений! Вы можете получить бесплатные сертификаты SSL из Давайте шифровать Отказ И каждая основная хостинговая платформа, похоже, имеет учебник о том, как начать работу, давайте шифрование на своей платформе. Например, я нашел эту полезную статью, когда я искал « давайте шифровать и Bluemix ».
Маяк ожидает, что вы пойти на один шаг, хотя. Не только если вы должны иметь сертификат SSL, так что «https://…» URL-адреса работает на ваш сайт. Маяк также хочет, чтобы вы перенаправляли любые пользователи, которые пытаются перейти на «http://…» на версию вашего сайта HTTPS.
Это проактивный шаг, чтобы помочь переместить своих пользователей в безопасное место.
К счастью, это все, что нужно для меня, чтобы соответствовать этому требованию, используя узел и экспресс:
// Avoid redirect if on localhost developing
if (NODE_ENV === 'production') {
// Redirect http to https
app.enable('trust proxy');
app.use (function (req, res, next) {
if (req.secure) {
next();
} else {
res.redirect('https://' + req.headers.host + req.url);
}
});
}
// I swear this came from StackOverflow like half of my codeСтать автономным дружественным
Сервисные работники Помогите вам указать, какие файлы пользователей браузеров должны сохранять локально. Вы можете думать об этом как о более умных кэшировании, чтобы убедиться, что пользователь может получить доступ к информации, даже когда в режиме самолета.
Это также ускорит время загрузки вашего сайта, когда ваши пользователи возвращаются к нему в будущем.
Я застрял на реализации сервисных работников в течение длительного времени, потому что я не знал, с чего начать. Тогда я нашел больше всего Magical Git diff от Джеффри Посник Демонстрируя три простых изменения файла, которые помогают работникам поддержки APP Create-ract – App. Я люблю этот пример, потому что он показывает именно детали, которые помогут вам реализовать его, а не просто указывать на всю котующую табличку.
В будущем я планирую исследовать использование Indexeddb Чтобы сохранить данные API, что пользователь получает от их первого визита, для еще более быстрого возврата.
Нет JavaScript, нет проблем
Часть вишни – это уверена, что пользователь может получать информацию, даже если они отключат JavaScript в своем браузере. Почему люди отключают JavaScript в своем браузере? Есть Несколько странных случаев использования Отказ Но нижняя строка: мы заботимся о пользователе! Как мы их поддерживаем?
Мы поддерживаем браузеры с помощью JavaScript, отключенные Kickin ‘It Other School с Отказ Все в этом HTML-теге будет отображаться до тех пор, пока у пользователя есть JavaScript отключен. Если вы хотите дать этим пользователям полный опыт, вы можете добавить рендеринг на стороне сервера.
Получить маяк до?
Вы можете увидеть Все коммиты С 14 ноября по 18 декабря.
Несмотря на то, что мои комбиниты все падают в течение одного месяца, на самом деле он на самом деле достал меня немного дольше, чтобы достичь идеального балла на маяке. Это потому, что каждый критерии на маяке – это полезный бит, который вы можете уйти и учиться в одиночку. Ни один из бит не требует друг друга, но все поможет общий пользовательский опыт вашего приложения.
Каждый раз, когда я узнаю, как реализовать новый бит в моем портфолио, я тогда легко реализую его на свои рабочие проекты.
Я уверен, что в конечном итоге будет обновление для маяка, который приносит мой счет вниз. Это не проблема, хотя! Плагин все еще находится в бета-версии, и будет продолжать предоставлять мне новые предметы для изучения.
Моя надежда заключается в том, что вы будете принимать эту проблему самостоятельно и делать все возможное, чтобы помочь улучшить опыт своих пользователей.
Пожалуйста, поделитесь в комментариях или Чирикать мне Некоторые крутые способы вы улучшили свой балл маяка! Я постараюсь поделиться всеми из них. Я также очень рекомендую Addy Osmani серия на PWA с React.js !
Вы также можете связаться со мной, оставив комментарий, по электронной почте мне или Tweeting на @seejamescode Отказ Я работаю в ATX для IBM Design, и всегда люблю разговоры с сообществом веб-дизайна.
Также благодаря Дэвид Коннор и Джейсон Лэнгсторф Для рецензирования этой статьи!