Front End Developer
  • Простими словами про Core Web Vitals і як їх оптимізувати навіть на WordPress

    Классная статья. Видно что автор серьезно подошел к вопросу оптимизации, да и написании статьи тоже.

    Особенно порадовали разные юмористические вкрапления, чтобы веселее было читать это все.

    І поки браузер зайнятий перетравленням вашого коду, користувач самотньо сидить у туалеті й намагається оживити пальцями мертвий екран!

    Теперь по-поводу того что знаю я на счет оптимизаций. Оптимизировал я правда не Вордпресс, а SPA на ангуляре. Но в целом, фронтенд есть фронтенд.
    Возможно что-то повторю за автором, статья длинная, так что простите если что.

    1). Заменяем все наши jpeg, png на webp, есть еще модный молодежный avif , но я пока с ним не работал еще. Проверять поддерживает браузер webp или нет, можно через хедеры реквеста, который браузер шлет на сервер чтобы получить страничку. Хедер называется — accept . В нем собственно представлены все форматы данных которые браузер поддерживает.

    2). Отложенная загрузка js кода. Ну тут два варианта, если это какая-нибудь капча, то просто когда она нам нужна, берем динамический импорт
    и загружаем код необходимый для капчи. Либо же если виджет не попадает в вьюпорт с которого начинается загрузка страницы то в комбинации с Intersection Observer и импортом делаем то же самое.

    3). Заменить сжатие ресурсов с gzip на brotli — выгода не сильно большая, но как говориться — курочка по зёрнышку клюёт.

    4). Time to first byte — довольно значительно влияет на общую картину загрузки. Баллов на 20 точно. Если у вас скажем SPA + SSR где чтобы сформировать шаблон (перед отдачей браузеру) надо отправить несколько тяжелых http запросов, то закономерно что ttfb будет страдать. Потому в таких кейсах, лучше кешировать эти шаблоны. Как после сборки заранее, так и на лету запихивая их в какой-нибудь редис или вообще в память, если вы в один поток запускаете свой node.js сервер.

    По-поводу веб воркеров, есть вот такая интересная, пока еще экспериментальная библиотека . Суть её в том чтобы значительно уменьшить влияние на метрики Web Vitals всяких скриптов по типу facebook pixel или google tag manager.
    Я уже наблюдал такую картину, когда выстраданная потом и кровью страничка с двумя 100 на десктопе и мобайле обвешивается различными скриптами аналитики и сразу метрики проседают))

    Ну и напоследок немного по рекламируюсь. В связи с тем, что я тоже длительное время занимался и занимаюсь оптимизациями, всегда было интересно как меняются метрики on the long run как говорится, потому собственно я и создал SaaS — pagehealth.me который трекает метрики производительности.
    На данный момент трекается:
    — Chrome User Experience Reports (CrUX)
    — Lighthouse Metrics
    — Code Coverage (сколько из загруженного js/css реально применяется, а сколько грузится в холостую)
    Трекать можно как каждый день, так и по вебхуку. Ну и конечно добавлять комменты к вебхукам, чтобы хотя бы примерно понимать релиз какой фичи мог затронуть просадку или повышение метрик.

    Поддержал: Andrii Hrushetskyi
  • Мовний скандал React/TechExpace

    Я туда зашел, но мне непонятно зачем там писать что ты работаешь в Розетке, а в статусе на доу — что в Вебике. Можешь как-то это объяснить?

  • Мовний скандал React/TechExpace

    Так что это за Webika такая? Ссылку в студию.

  • Мовний скандал React/TechExpace

  • Что влияет на скорость, стоимость и сроки внедрения PWA на Magento

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

    Мы же вроде бы об этом говорили.

  • Что влияет на скорость, стоимость и сроки внедрения PWA на Magento

    Можно где-то посмотреть на результат?

  • Что влияет на скорость, стоимость и сроки внедрения PWA на Magento

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

  • Что влияет на скорость, стоимость и сроки внедрения PWA на Magento

    Проблема в том, что на практике одним реактом сыт не будешь и в конце концов будет что-то такое react-redux.realworld.io/#/?_k=sihzmb Почти 200 килобайт, чтобы просто отрендерить список карточек. Даже бротли сжатие не спасает, как видно на примере.

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

    У dev.to был интересный опыт построения их сайта — web.dev/...​-ux-with-service-workers

  • Что влияет на скорость, стоимость и сроки внедрения PWA на Magento

    Мы в Javarush переводили контентную часть нашего сайта на svelte/sapper . Результат можно посмотреть вот тут к примеру developers.google.com/...​-i-peregruzka&tab=desktop . На ангуляре такая же страничка имела оба показателя (мобайл, десктоп) в районе красного уровня. Потом мы конечно добавили кеширование при ССР, но в целом всеравно немного не то.

    svelte/sapper не рекомендую, так как мне они сыроватыми кажутся для прода.

    сложность разработки

    Скажем так, если делать изначально весь сайт так как предлагает например hotwire.dev , то сложно будет даже ниже, я думаю. А вот если у вас SPA, но вы решили что нужны хорошие метрики загрузки, вот тут начинаются танцы с бубном.

    Поддержал: Paul Loyanich
  • Что влияет на скорость, стоимость и сроки внедрения PWA на Magento

    PWA для контентного сайта сам по себе не особо то и имеет смысла вообще. То ускорение загрузки о котором идет речь, работает когда пользователь заходит на сайт второй раз и далее. То есть первую загрузку, так важную для контентных сайтов PWA никак не ускорит.
    Вообще PWA технология, это по-факту manifest.json и воркер который инсталлит и активирует его и все. Все остальное, например кеширование( за счет которого и работает оффлайн мод и ускорение) это уже по желанию.

    Во вторых, PWA — это headless архитектура

    Толку с этого мало, так как для ускорения загрузки, надо по максимуму уменьшить js бандл. А для этого нужна не headless архитектура, а полностью избавиться от SPA фреймворков и перейти на старый добрый vanilla JS или же использовать библиотеки по типу alphine.js или StimulusJS. Ну и так же, необходимо прийти к определенному консенсусу с маркетологами, чтобы определить какие скрипты им точно нужны, а какие не очень, так как это тоже солидная статья расходов в плане первой загрузки.

    локацию

    Для этого есть Geolocation API — PWA тут никак не связан.

    Поддержал: Лютий кодерок
  • Кіно. Серіали. Що подивитись

    В связи с тем, что никто еще не написал, дополню список:
    — Алиенист
    — Видоизменённый углерод
    — Пацаны (альтернативный взгляд на супергеройскую тематику)
    — Карнивал Роу (подойдет любителям стимпанка и фентези)
    — Чужестранка (мыло, но мне понравилось)

  • Полная переквалификация в IT

    Для изучения Ноды, советую посмотреть на этот курс. www.udemy.com/...​odejs-developer-course-2 На работу после него вряд ли возьмут. Но даст хорошее общее представление с нуля. Все это конечно можно и самому нагуглить, но так просто выгоднее по времени, особенно в начале когда даже не знаешь куда копать

  • Стоит ли покупать Macbook Pro 2018 года в принципе?

    Даже почему LIMIT/OFFSET паджинация — это очень плохо,

    А почему плохо? Если есть статья на эту тему развернутая, вообще было бы отлично.

  • Рада ухвалила закон № 5670-д про українську мову

    Ну просто какой-то фестиваль безграмотности
    ru.wiktionary.org/wiki/налицо

  • Рада ухвалила закон № 5670-д про українську мову

    Налицо незнание азов геоморфологии. Ну-ну.

  • Рада ухвалила закон № 5670-д про українську мову

    Слив засчитан)

  • Рада ухвалила закон № 5670-д про українську мову

    Не очень понятно как слова из клипа, обосновывают тот факт что РФ дно. Если у тебя вдруг случилась потеря контекста, что бывает — то мы говорим о географическом понятии. Ни о каком другом.

  • Рада ухвалила закон № 5670-д про українську мову

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

  • Рада ухвалила закон № 5670-д про українську мову

    щонайменш з 1595 року

    В Крыму украинский был языком большинства с 1595 года? Очень интерересно)

  • Рада ухвалила закон № 5670-д про українську мову

    Россия — это дно.

    Пруфов конечно не будет? :)

← Сtrl 123456...32 Ctrl →