Фронт-конец производительности вызов: Победитель и результаты

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

Какие призы, спросите вы? Победитель выигрывает перелет туда и обратно в Лондон, полное проживание в модном отеле, билет на SmashingConf London 2018, и последнее, но не менее последнее, Мастерская Smashing по своему выбору.

The Front-End Performance Challenge
Карты, наконец, на столе. Пришло время встретиться с победителем конкурса и отправить его в SmashingConf Лондоне!

Вызов? Какой вызов?

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

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

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

И победитель…

Леонардо Лосовиз

Методы оптимизации, представленные в представлении Леонардо все DIY, разработаны и реализованы с нуля. Он добавил все оптимизации в PoP, с открытым исходным кодом рамки для создания веб-сайтов, и использовал повестку дня Urbana для проверки улучшений производительности на фактический проект.

Agenda Urbana
(Live веб-сайт)

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

PoP построен на вершине WordPress. Это означает, что многие инновационные методы оптимизации, доступные для платформ Javascript, такие как разделение кода с помощью Webpack или Service Workers через sw-precache, находятся вне досягаемости (по крайней мере, без большого обхода). Таким образом, все методы оптимизации, описанные ниже, все DIY, разработаны и реализованы с нуля.

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

Все материалы

Мы были очень довольны качеством представлений, которые мы получили, и это честно было не легко выбрать победителя. Спасибо всем, кто представил — сохранить блестящую работу!

Верховья Вервей

Jorgen Verweij представил оптимизированную версию своего сайта компании Perplex Internetmarketing B.V.. Вместе с командой, состоящей из UX’er, фронт-энда, разработчика бэк-энда и системного администратора, он приступил к работе над производительностью.

Результатом является отличная реализация с отличными результатами perf по всем направлениям: SpeedIndex далеко под поставленную цель 1250, время загрузки менее 1 секунды, начать рендерировать в полсекунды, 100100 PageSpeedscore и почти идеальный Аудит маяка. По сравнению со старой ситуацией,время загрузки почти в восемь раз быстрее. Слава! Вы можете прочитать более подробную информацию о процессе в этой всеобъемлющей записи, которые Jorgen воедино.

Perplex Website
(Live веб-сайт)

Марко Хенгстенберг

Марко Хенгстенберг представил оптимизированную версию сайта туристического агентства Land in Sicht. Для повышения производительности, Марко использовал довольно много изящных маленьких трюков и техник. Предварительная загрузка основного листа стилей и критическая загрузка шрифта с предварительной загрузкой в поддерживающих браузерах – это только два из них. Он также реструктурировал HTML, чтобы сделать его как плоским, семантический и доступным, насколько это возможно, и сократил объем данных, первоначально переданных при первом посещении, с почти 3 МБ до 1,3 МБ на рабочем столе (и из-за использования отзывчивых изображений для изображения героя, это даже меньше, чем т шляпу на узких экранах).

Чтобы упорядочить сайт, даже больше, Марко удалены Bootstrap, j’ery, и Modernizr, создать процесс сборки с Grunt, и представил ServiceWorker, который делает сайт доступным в автономном режиме, тоже. Усилия того стоили: результатом является драматический TTL, который упал с 32 секунд до 2 секунд и почти 50% снижение запросов HTTP и байтов переданы (также см. отчет Маяк, Q251KB). Предварительная загрузка и быстрая начальная рендерия как помощь на предполагаемое время загрузки. Отличная работа!

Land in Sicht
(Live веб-сайт)

Габриэль Мариани

Сан — Диего христианского колледжа веб-сайт был тот, который Габриэль Мариани применил свои навыки работы. Он разделил процесс оптимизации на четыре этапа. Во-первых, он обрезал все изображения до максимального размера, в которых они были фактически необходимы, и создал их мобильные версии. Затем он сделал все изображения ленивый нагрузки. Второй шаг был сосредоточен на JavaScript и удаление всех внеочередных скриптов, которые WordPress сайт и его третьей стороной темы и плагины пришли с. Затем он окунул как можно больше скриптов, чтобы Autoptimize мог их подбирать и минимизировать/комбинировать в один файл.

Габриэль также сократил количество используемых шрифтов и установил шрифты Google для загрузки async так, чтобы критический путь CSS загрузился в первую очередь. И последнее, но не менее важное, он обратился к некоторым другим небольшим шансы и заканчивается, как настроить WordPress плагины, поэтому они полагаются на Ajax вместо PHP. Это позволило ему включить кэширование страницы и в конечном итоге включить CDN для сайта. Заключительным шагом был переход на HTTP/2 и HTTPS. См. WebPageTest для получения полных результатов. Хороший!

SDCC frontpage
(Live веб-сайт)

Александр Заргес

Александр Заргес разработал Cloud Player, одностраничное веб-приложение на основе Angular 4, которое позволяет искать и воспроизводить приложения YouTube и SoundCloud. Обновленная версия использует угловой заранее временный компилятор для достижения времени инициализации около 2,9 секунды (по сравнению с 5,2 секунды при использовании точно в времени компилятор). Если вы хотите углубиться в код, проверьте сопроводительное репозиторий GitHub.

Cloud Player
(Live веб-сайт)

Брэдли Тонт

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

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

Bradley Taunt Website
(Live веб-сайт)

Джон Билс

Джон Билс бросил вызов себе, чтобы дать 4RoadService.com повышение производительности. Когда он начал, уже были некоторые оптимизации на месте. Статические изображения запускались через ImageOptim, например, CSS и JS были minified, они были запущены CDN через CloudFlare, и сайт уже использовал одностраничный-App-стиль погрузчика так новое содержание всегда принес XHR и страница никогда не полностью перерисован.

Для этого задача, Джон включил оптимизацию изображения и сжатие WebP в Cloudflare. Обновленный сайт теперь использует HTTP/2 Server Push для отправки основных файлов CSS и JS с начальной загрузкой страницы и полагается на Guetzli для сжатия JPEG. Чтобы оптимизировать кэширование, он обновил URL-адреса всех статических ресурсов, чтобы URL-адрес изменялся при изменении актива, а затем устанавливал все статические ресурсы для кэширования в течение года. Для улучшения кэширования изображений Джон также обновил URL-адреса динамически-переразмерных изображений, поэтому CloudFlare считает, что они — статические файлы изображений.

Результат: первая значимая краска упала с 2220 мс до 1290 мс, а первая интерактивная — с 5480 мс до 3040 мс. Вы можете просмотреть полные результаты Lightbox и WebPage тест здесь.

4RoadService
(Live веб-сайт)

Шон О’Коннелл

Шон О’Коннел вступления была работа, которую он сделал на kiwi.ruby.nz. Цель состояла в том, чтобы превратить веб-сайт конференции в PWA, чтобы участники конференции могли найти всю информацию, касающуюся мероприятия в автономном режиме. Некоторые из вещей, которые он сделал: замена типичных Google Maps iframe с Google Static Maps, самостоятельно хостинг подмножество шрифтов, перемещение CSS вставки, чтобы сохранить первый запрос под 14KB, удаление зависимостей, добавление предварительного кэша службы работников, и добавление Turbolinks для быстро перегона хостраниц. Таким образом, начальное время рендеринга сократилось с 3,9 секунды до 0,3 секунды.

Для получения более подробной информации проверьте WebPageTests.

Kiwi Ruby
(Live веб-сайт)

Руслан Джулбарисов

Руслан Джулбарисов представил свой персональный сайт zerofy.de. Так как он закончил свою работу по оптимизации незадолго до того, как конкурс был опубликован, есть, к сожалению, нет подробных результатов, но Руслан сделал хорошую запись о том, как его настроек привело к размеру страницы 1.6KB и TTFB 197ms. Помимо кэширования, минирования, G-IP и j’ery настроек, он загружает шрифты потом, чтобы избежать блокировки, и, заменив FontAwesome с индивидуальным набором IcoMoon из 10 иконок, ему удалось сохранить дополнительные 130KB.

Чтобы повысить показатель индекса скорости и получить самый быстрый опыт, он также создал отдельный файл PHP, который содержит все стили CSS, влияющие на представление выше. Хорошая деталь: крошечный сценарий Barba.js позволяет ему создавать переходы страниц без перезагрузки всего сайта.

zerofy
(Live веб-сайт)

Спасибо всем за участие

Фу! Теперь, когда это было довольно сложной задачей действительно! Для тех из вас, кто пользуется такой хороший вызов и мозг щекотать то и дело, следите за обновлениями для следующего вызова. Мы будем придумывать еще один в кратчайшие сроки — это точно!

Источник: smashingmagazine.com

Великолепный Журнал

Великолепный, сокрушительный, разящий (см. перевод smashing) независимый журнал о веб-разработке. Основан в 2006 году в Германии. Имеет няшный дизайн и кучу крутых авторов, которых читают 2 млн человек в месяц.

Добавить комментарий

%d такие блоггеры, как: