Delayed Hydration или почему сайты порой тормозят

Sdílet
Vložit
  • čas přidán 26. 08. 2024
  • Рассказ про некую "отложенную гидратацию", которую рекомендовали в статье на vuemastery.
    А скоро нормальная оптимизация сайта- pagespeed.dmit...

Komentáře • 60

  • @user-nl6uu9xl2x
    @user-nl6uu9xl2x Před 10 měsíci +15

    Вы правы, это нечестно по отношению к человеку. В погоне за этими балами, позициями в поиске, все мы стали забывать, что сайты делаются прежде всего для человека. У нас в компании так же, когда приступаем к разработке проекта в первую очередь мысли о сео, продвижении. Пишется, закупается куча текстов, неинтересных и не ненужных нормальному человеку, впихиваются на страницу всякие "фразы", вызывающие отторжение при чтении, но зато так любимые яндексом. В общем про человека если и подумаем, то в самом конце если останется на него время.

    • @bassboosted1184
      @bassboosted1184 Před 10 měsíci

      А потом на сайт впиливается тонна рекламы, которая просто закрывает весь контент который там есть. И те же поисковые роботы на это никак не реагируют. Выдают захламленные рекламой сайты в начале списка. Вот просто, у меня в локальной сети стоит dns сервер для блокировки рекламы. У меня за сутки может быть до 50 тысяч заблокированных рекламных запросов. Это не нормально.

  • @Kurkulio_
    @Kurkulio_ Před 10 měsíci +2

    Огонь разбор веба по этапам!🔥 нагуглил ролик по слову hydration и понял от тебя, что это, Спасибо!

  • @avkuzovlev
    @avkuzovlev Před 10 měsíci +3

    Дёргать мышкой, чтобы страничка быстрее загрузилась снова актуально

  • @SonGoku-vs1xv
    @SonGoku-vs1xv Před 6 měsíci +1

    Дим, спасибо за видео, поставил лайк)
    Я думаю, это было бы полезно если это можно было бы настроивать конкретно для компонента, когда ты начал с ним взаимодействовать. Например, так сделано в одном из недавно вышедшем фреймворке ( не помню название ), который кличали убийцей реакта, там как раз весь изначальный js код - это одни обработчики кликов/скролов в компонентах для загрузки уже основного js бандла для этого компонента.

  • @user-cp7qw6ox6b
    @user-cp7qw6ox6b Před 10 měsíci +2

    ну всё просто, во первых определяем что это мобилка, минимальный js повесить на первый экран, там на меню и ещё что-то. Остальное уже если он начал скролить и тд, подгружем блочно необходимые скрипты

  • @cranebird1467
    @cranebird1467 Před 7 měsíci +1

    Для мобильников можно было бы в код к ивентам добавить, акселерометр, жесты, фейс рекогнишн и т.п.

  • @user-hx2ij1bk3n
    @user-hx2ij1bk3n Před 8 měsíci +2

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

  • @sergeypinchukov6024
    @sergeypinchukov6024 Před 10 měsíci +4

    Может для мобильников отдельное условие есть? Вычислить то можно.

  • @vovaromanenko3347
    @vovaromanenko3347 Před 10 měsíci +3

    А будет курс по nuxt 3?

  • @angerro
    @angerro Před 10 měsíci +8

    Всему виной чертово SEO, увы...

  • @user-gy7ss8nv1y
    @user-gy7ss8nv1y Před 10 měsíci +2

    Если дословно, вообще не гидрировать страницу, то это будет боль для юзера. А так в целом это хороший подход, но с уточнением. Если блоки скрыты и/или мы точно понимаем, что пользователь не воспользуется ими в момент загрузки, то такие блоки можно гидрировать по необходимости, каждый индивидуально. К примеру меню с большим списком категорий, которое изначально скрыто. Можем его гидрировать в момент открытия, даже на мобильном устройстве это норм отрабатывает. Или на странице 10 экранов, с 3 можно не гидрировать, только по скроллу или по позиции. Но страницу целиком - никогда)

    • @bassboosted1184
      @bassboosted1184 Před 10 měsíci +3

      А не проще поисковые системы научить нормально выполнять js и вести себя как браузер клиента? Или может пора уже забить на кучу метрик и делать сайты удобными, в первую, очередь для пользователя?

    • @MrJaroslav682
      @MrJaroslav682 Před 10 měsíci

      ​@@bassboosted1184 ну эта метрика тоже сделана не просто так. если мы долго выполняем js то на это время мы блочим main tread и ничего что в нем должно выполниться не выполнится пока наш js не закончит свою работу. а это влияет на интерактивность страницы и следовательно на пользовательский опыт

  • @SingleFeniks
    @SingleFeniks Před 10 měsíci +1

    Ну это зависит от того, для чего вы сайт делаете, для того чтобы людям было на нем удобно или для максимальных циферок в метриках. 🤔

  • @gizeasy
    @gizeasy Před 10 měsíci +1

    У меня spa сайт Яндекс проиндексировал. Я удивился, где-то 2 месяца назад обнаружил

  • @user-zu6hg3un6d
    @user-zu6hg3un6d Před 10 měsíci +1

    Хмм, не нравится мне загрузка js после какого либо события от пользователя. Хотя и идея загрузки страницы через SSR, а только потом загрузки js для интерактива очень даже не плоха. Что если загружать js по событию window.onload (или ему подобный, смысл в том чтобы загружать js только после полной загрузки html, css и полного его рендера).
    То есть не ждать действия от пользователя, а загрузить js сразу после того как отрендерился контент который прислал сервер. Таким образом поисковый робот сразу получит готовую вёрстку (SSR), но при использовании этого приложения реальными пользователями мы не ждём никаких действий со стороны пользователя, а загружаем сразу после рендера статической страницы.
    Адекватные замечания и предложения приветствуются.

  • @AlexanderBorshak
    @AlexanderBorshak Před 10 měsíci +2

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

    • @bassboosted1184
      @bassboosted1184 Před 10 měsíci

      Все существующие метрики априори нарушают здравый смысл, ибо получается что сайты создают не для людей, а для метрик, а как там людям, удобно или нет, вопрос уже второстепенный.

  • @user-um3ps3gq9t
    @user-um3ps3gq9t Před 10 měsíci

    Amp версии сайтов работают по схожему принципу, некоторые скрипты отрабатывают только после взаимодействия клиента с сайтом.

  • @Mr.Capone-
    @Mr.Capone- Před 10 měsíci

    СпС, Поезидент, Я засыпаю под Тебя))))

  • @rodigy
    @rodigy Před 10 měsíci

    Ох эта вечная война c сео.
    Гугл возьмет да и сделает какое-нибудь событие при старте, снова заплачут горе оптимизаторы....

  • @eugeneburenkov4187
    @eugeneburenkov4187 Před 10 měsíci

    Как вариант можно велосипед подпереть костылем.
    Все кнопочки и пагинашки и прочее оформить в виде обычных стилизованных ссылок)
    Это не панацея и не везде спасет, но все же)
    Можно так же побольше работы отдавать css, да сайт все еше будет статичным но "чистые" анимашки поразвлекают пару секунд до загрузки js.
    Так же можно подумать в сторону отслеживания нажатия на конкретном месте и мгновенно подгрузить мелкий хендлер конкретно под произошедшее действие, но опять таки нужен для простоты какой то мелкий js скрипт уже предзагруженный или инлайном вписанный в разметку...
    В общем костыли и велосипеды)

    • @rodigy
      @rodigy Před 10 měsíci

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

    • @rodigy
      @rodigy Před 10 měsíci

      Вот интересно как ты отвелосипедишь слайдер с автостартом.

    • @eugeneburenkov4187
      @eugeneburenkov4187 Před 10 měsíci

      ​@@rodigy зависит от слайдера. Если загуглить "слайдер исключительно на css" то можно найти кучу крутого и без js. Там и цыкличные, и с управлением, и с автостартом))) Опть же, я указал что это не панацея от всех заскоков.

  • @user-cx1ul6bu3t
    @user-cx1ul6bu3t Před 10 měsíci

    По таймеру грузить, поставить вместо 7000 значение 1

  • @rmnkot
    @rmnkot Před 10 měsíci

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

  • @MrJaroslav682
    @MrJaroslav682 Před 10 měsíci

    total bloking time это не время выполнения нашего js только то время когда js синхронно выполняет таску более 50мс. мы можем несколько секунд выполнять гидратацию и иметь 0 в TBT но важно чтобы эти секунды были разбиты на несколько тасок каждая из которых менее 50мс. таким образом можно начать гидрировать страницу сразу после загрузки и тратить на это все ресурсы cpu и при этом иметь хороший показатель TBT и лучший пользовательский опыт.

    • @rodigy
      @rodigy Před 10 měsíci

      В теории, на практике кто то это применял?

    • @MrJaroslav682
      @MrJaroslav682 Před 10 měsíci

      ну я применял, поэтому и написал@@rodigy

    • @rodigy
      @rodigy Před 10 měsíci

      @@MrJaroslav682 А вот это уже интересно. Как контролировать время выполнения таски меньше 50мс?

    • @MrJaroslav682
      @MrJaroslav682 Před 10 měsíci

      @@rodigy так не надо контролировать в рантайме. ведь не стоит цели свести tbt у всех пользователей до 0. Цель его максимально возможно уменьшить. Чтобы контролировать этот процесс можно открыть вкладку performance в девтулзах и записать профайл загрузки. там на таймлайне main треда подсвечиваются проблемные таски как long task. понятно что на разных устройствах результат будет отличаться. но относительное время выполнения тасок оттуда можно понять.
      БОльшая проблема в том как при этой оптимизации не потерять порядок выполнения кода.

    • @rodigy
      @rodigy Před 10 měsíci

      @@MrJaroslav682 Ну если ориентироваться в среднем по больнице по устройствах. Но тема впринципе интересная, как можно свести к 0 tbt, особенно если подключаются сторонние либы типа аналитики или есть сборщики.

  • @bassboosted1184
    @bassboosted1184 Před 10 měsíci +4

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

  • @POEOneLove
    @POEOneLove Před 10 měsíci

    Эта хрень творится с Гуглом уже лет 8. Хотя раньше было попроще бороться с его хотелками. Маразм крепчает. И деваться некуда, если нужно двигаться в Гугле в топы.

  • @dimovich85
    @dimovich85 Před 10 měsíci +1

    ну а ведь еще все-таки табом и клавой пользуются, а11у как бы

  • @alexs7931
    @alexs7931 Před 10 měsíci

    ну чо каеф 😁

  • @user-ot3vy6ug7n
    @user-ot3vy6ug7n Před 10 měsíci

    Гугл давно с ума сходит
    Мы как разрабы лишь реагируем на его заскоки и страдают все

  • @MrReflection540
    @MrReflection540 Před 10 měsíci

    Нужен курс по nuxt, а то начал изучать и что-то тяжело идет с логикой jwt-токенов для авторизации))

  • @dimape.4180
    @dimape.4180 Před 10 měsíci +2

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

    • @ВалентинФедяков
      @ВалентинФедяков Před 10 měsíci

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

    • @MrJaroslav682
      @MrJaroslav682 Před 10 měsíci

      ну гугл отдельно оценивает мобильную версию и десктопную. по десктопной TBT будет хорош а по мобильной плох

    • @ВалентинФедяков
      @ВалентинФедяков Před 10 měsíci

      @@MrJaroslav682 на сколько я помню, гугл перестал учитывать десктоп версию в поисковой выдаче. по этому основные оптимизации идут с прицелом на мобилку. но опять же вопрос, если на сайте есть SSR, зачем роботу вообще отдавать хоть один рабочий скрипт?

  • @unlike777
    @unlike777 Před 10 měsíci

    Ужас!
    Да вообще все к этому и идет. Технологий все больше - сайты все медленнее.

  • @muborizDev
    @muborizDev Před 9 měsíci

    Чуваки из Накст решили хакнуть гугл 🤣

  • @xeleos
    @xeleos Před 10 měsíci

    А разве нельзя эту отложенную гидратацию делать только для роботов? роботы разве не сообщают о себе?

  • @qqqq-bw6os
    @qqqq-bw6os Před 10 měsíci

    только у меня при слове гидротация первая ассоциация что сейчас будут про "drome keeper" рассказывать))

  • @dimovich85
    @dimovich85 Před 10 měsíci +1

    На некст пора валить, там все бабки

  • @pnoper
    @pnoper Před 10 měsíci

    Самому противно, но приходится иногда делать. Ибо сео говорит "Надо больше баллов в pagespeed". Надеюсь в аду есть отдельный котёл для всех сеошников.

  • @alexey.justdoit
    @alexey.justdoit Před 10 měsíci

    Офигеть бредятина этот Delayed Hydration. Гугл роботу получается "лизнули", а пользователь ещё дольше будет ожидать "готового" интерфейса для нормального взаимодействия с сайтом. 🤨

    • @UtopiaVD
      @UtopiaVD Před 10 měsíci

      а ssr не бредятина?

  • @jiakoctaff
    @jiakoctaff Před 10 měsíci +1

    шляпа

  • @proxy.market
    @proxy.market Před 10 měsíci

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

  • @Arkady_Petrov-ua
    @Arkady_Petrov-ua Před 10 měsíci

    А что , есть практические кейсы, когда без этой фичи падал рейтинг в аналитике ? Хм… слабо верю