Содержание
Как создать самый быстрый веб-сайт в мире | Глинн Берд | Center for Open Source Data and AI Technologies
Опубликовано в
·
Чтение: 6 мин.
·
3 октября 2017 г. Amp» в URL-адресе или рядом с логотипом Amp (⚡). Проект Amp — это инициатива Google, направленная на ускорение загрузки веб-страниц. Скорость веб-сайта важна, потому что пользователи, нажимающие на ссылку, хотят получить контент немедленно, в противном случае исследования показывают, что они, скорее всего, нажмут «назад» и уйдут в другое место. Еще одним стимулом для владельцев сайтов ускорить свои сайты является то, что время загрузки страницы, по слухам, является фактором в алгоритме ранжирования поисковых систем. Быстрый сайт делает ваших пользователей счастливыми и может принести вам больше трафика.
Amp работает, устанавливая некоторый JavaScript, который контролирует загрузку страницы, кэширует контент на серверах Google и диктует ограничительную форму HTML, что позволяет легко вычислять размеры страницы на ранних этапах цикла рендеринга страницы.
Страница, совместимая с Amp, может быть быстро отображена, особенно на мобильных устройствах, где пропускная способность сети имеет большое значение.
Команда усилителя что-то задумала. Разметка веб-страниц становится все больше и сложнее благодаря громоздким библиотекам JavaScript, CSS, изображениям и видеоконтенту. Сравните версию новостей в формате Amp со стандартной версией. Что быстрее загружается в вашем браузере?
Но Amp — не единственный способ создавать действительно быстрые веб-сайты. В этой статье мы рассмотрим некоторые способы ускорить работу вашего веб-сайта, не обязательно прибегая к помощи Amp Kool-Aid.
Пока вы не протестируете скорость своего сайта, вы не узнаете, улучшаете ли вы ситуацию своими изменениями. Все основные браузеры имеют отличные инструменты разработчика, которые позволяют детально изучить каждый цикл загрузки страницы.
Вы также можете использовать внешние инструменты, такие как инструмент тестирования скорости веб-сайта Pingdom, для создания отчета:
Тест скорости веб-сайта Pingdom.
The Guardian получает здесь оценку «C», загружаясь за 3,98 секунды.
Как вы можете видеть на изображении выше, даже веб-сайты на основе Amp не выглядят хорошо с этими показателями, потому что вся страница загружается за 4 секунды, но, что важно, работоспособный первый просмотр этой страницы может быть доступен намного раньше. чем это.
Google Lighthouse — это инструмент командной строки, который поддерживает функцию «Аудит» браузера Chrome в инструментах разработчика, которая рассчитывает время, необходимое для отображения веб-сайта в браузере Chrome.
Установите его с помощью:
npm install -g lighthouse
И запустите отчет о производительности с помощью:
lighthouse --perf --view http://www.bbc.co.uk/news
Запуск теста производительности Lighthouse на новостном сайте BBC: 8,2 секунды.
Протестируйте свой сайт, прежде чем вносить какие-либо изменения, чтобы получить базовый отчет. Вот базовый показатель для моей домашней страницы, каким он был тогда:
Запуск теста производительности Lighthouse на старой версии моего веб-сайта: 4 секунды.
У ваших пользователей есть только определенный объем пропускной способности, поэтому чем меньше (с точки зрения байтов) ваш веб-сайт, тем быстрее он будет загружаться. Вот худшие нарушители:
- Видео и аудио больше всего потребляют пропускную способность. Что бы вы ни делали, не запускайте видео автоматически. Ваши пользователи будут ненавидеть ваш сайт, если вы это сделаете, и будет использована драгоценная пропускная способность.
- Если у вас есть веб-сайт с большим количеством изображений, старайтесь хранить свои активы в сети доставки контента (см. далее) и загружайте изображения только с минимальным разрешением, которое необходимо (например, -размер изображения).
- Основные фреймворки JavaScript не так уж малы (React 371k, Angular 1,2M, jQuery 261k). Если ваша веб-страница очень проста, вам может вообще не понадобиться фреймворк. В противном случае используйте уменьшенные версии фреймворков или выберите более простые альтернативы, такие как Vue.js 258k, Preact 21k или Zepto.
js 58k. - Минимизируйте HTML, JavaScript и CSS перед публикацией. Файл JavaScript может уменьшиться до 10% от его размера за счет минимизации.
- Объедините свои активы. Используя такие инструменты, как Webpack, вы можете превратить все свои зависимости JavaScript в один файл в сжатой форме, включая только те части кода, которые необходимы. В вашем HTML будет меньше тегов
js 58k.