Новости‎ > ‎

Завершил разработку лэндинга

Отправлено 1 янв. 2017 г., 13:28 пользователем Denis Baskovsky   [ обновлено 1 янв. 2017 г., 13:28 ]
В предыдущей новости рассказывал про создание лэндинга gotois С тех пор кое-что докоммитил и теперь считаю работу завершенной, по крайней мере на 95%. Ниже в тексте дам несколько советов для оптимизации прорисовки.

Основной причиной столь долгой работы оказалась оптимизация. На ББ всё шло прекрасно, а вот мобильным браузерам досталось. Я смотрел с помощью браузера Brave (тот же хромиум, но с включенным по умолчанию блокировщиком рекламы и прочими Canvas Fingerprinting) и каждый раз при открывании приложения был полуторасекундный фриз. Неприемлемо такое поведение лэндингу, когда каждая миллисекунда важна! 

Профилирование показало что страничка начинает тормозить после выполнения JS-скриптов. Учитывая что внешние скрипты подгружались асинхронно, и тормоза были только на мобильных девайсах, пришлось пробежаться по всем. В то время из сторонних скриптов я использовал GitHub Buttons API, который использовал только для добавления кнопки ведущей на соответстующую репу. Переделав кнопки на свой лад со спрайтовым изображением, обернутый в простую гиперссылку  я добился ускорения загрузки на целых полсекунды! Мотайте на ус, подаваны, плохо использовать целую либу для одной простой функции, это такой же тупняк как если использовать jQuery только для XHR. После такой маленькой победы я решил переписать часть кода убрав GSAP в пользу более чистого CSS3. Как показала практика TweenMax весит много, не минифицируется, добавляет свой цикл requestAnimationFrame и тормозит работу своими проверками на доступность возможность CSS3. Такое исправление мне обошлось в несколько десяток строчек кода и удалением ~80Кб TweenMax. 
Но ничего не помогало, страница загружалась быстрее и быстрее, весила меньше и меньше, но всё равно оставался этот противный фриз. Я решил пройтись всеми известными валидаторами чтобы узнать, может быть я не так сверстал или типо того?
Как оказалось да. Google Mobile Friendly Test ругался, что я загружаю стили и шрифты в теге HEAD, и предложил мне загружать стили и шрифты после тега HTML. Сказано - сделано. После такого исправления приложение стало запускаться мега быстро, но к сожалению отвалилась библиотека fullPage, и вместо вертикальной пагинации я увидел какой-то кошмар. Тут уже было не до проверки на мобильнике, надо было исправлять. Покурив исходники либы я нашёл проблему. Проблема возникала вследствие невычислимого нулевого offsetHeight и потому не могла задать нужную высоту для контейнера. Немного пошаманив с событиями загрузки и эту проблему получилось пофиксить. Но фриз всё ещё оставался на месте.
Оставалась последняя надежда что-то не так с YouTube. Тогда я уже встраивал два видосика через iFrame API, без подключения библиотеки YT и прочих ништяков, вроде возможности в собственном документе управлять паузой/переходом плеера посредством postMessage.  Посмотрев ещё раз в девтулз было видно что JS-ка загружается дважды, второй раз просто берётся из кэша. И возможно именно инициализация видео тега с постером как-то фризит выполнение остальных скриптов. Действительно, убрав все фреймы фриз не воспроизводился! В общем знайте, если что-то тормозит в браузере - виноват Google! :) Нет, серьёзно, без их V8 мир JS сегодня был бы не торт. Оставаться без видосиков на лэндинге не хотелось, потому решил сделать загрузку видео по требованию. Т.е. пользователь кликает на кнопку воспроизведения, затем вместо плейсхолдерного изображения добавляется iFrame. Всё просто как два пальца... Нет, пошутил. Всё дело в том, что на мобильных девайсах до сих пор нельзя делать автовоспроизводимое видео, необходимо явное его подтверждение. К тому же нельзя достучаться до contentWindow из текущего окна без явного удостоверения на его серваке и нельзя прокинуть customEvent в область фрейма. Короче, пока веб платформа днищет. Сделал как сделал: две отдельные реализации скроллинга на ББ и мобилках.
Чтобы уж совсем всё летало используя возможности Swiper сделал ленивую загрузку изображений в карусели.

Такими вот простыми действиями чистая загрузка без использования Service Workers теперь составляет менее чем 1 секунду! Видяха стала тащить, загрузка оперативы укладываться в пределах 40 метров. Ляпота!
Иконки без спрайтов? Дык окстись, HTTP2 на дворе!

За всё это время сделал один пул реквест автору fullPage, количество коммитов в репе достигло ста штук, а приложуха теперь проходит мобильные и SEO тесты. И ещё кое-что, теперь это не просто PWA, но и AMP (Accelerated Mobile Pages)!
Comments