Оптимизация скорости загрузки сайта. Советы, рекомендации. Pagespeed

Поделиться
HTML-код
  • Опубликовано: 30 ноя 2024

Комментарии • 61

  • @super_snejinka
    @super_snejinka 3 года назад +5

    Максим, огромное спасибо за видео, это бальзам на душу просто!)) я по началу чуть не чокнулась, пытаясь подстроиться под pagespeed, и когда слепо выполнила часть его просьб, он показал скорость еще в половину меньше чем было. Вот такой мой горький опыт)

  • @i__loading
    @i__loading 3 года назад +2

    Однозначно лайк! Не так часто можно найти качественный контент по оптимизации сайтов

  • @Татьяна-ю1р2м
    @Татьяна-ю1р2м 2 года назад

    очень полезное видео. спасибо огромное за информацию!!!!

  • @mishajaglovskiy6418
    @mishajaglovskiy6418 4 года назад +2

    За оптимизацию карты отдельное спасибо, очень крутая фишка

    • @maxgraph
      @maxgraph  4 года назад

      Спасибо))

  • @Shakhrom-b7d
    @Shakhrom-b7d 3 года назад +5

    20:32 - есть npm пакет "critical", для вычисления стилей первого экрана по параметрам (ШхВ), там в настройках можно включать/исключать классы и т.д.

    • @dannyjoe7792
      @dannyjoe7792 3 года назад

      you probably dont care at all but does someone know of a tool to log back into an Instagram account?
      I somehow forgot the password. I would appreciate any tricks you can give me.

    • @phoenixjames6323
      @phoenixjames6323 3 года назад

      @Danny Joe Instablaster :)

    • @dannyjoe7792
      @dannyjoe7792 3 года назад

      @Phoenix James thanks so much for your reply. I found the site thru google and im in the hacking process atm.
      I see it takes quite some time so I will reply here later with my results.

    • @dannyjoe7792
      @dannyjoe7792 3 года назад

      @Phoenix James It worked and I finally got access to my account again. Im so happy!
      Thank you so much you saved my ass!

    • @phoenixjames6323
      @phoenixjames6323 3 года назад

      @Danny Joe you are welcome =)

  • @summersbyy
    @summersbyy 3 года назад

    Классное видео, особенно про ленивую загрузку Я.карт понравилось!) Есть небольшое предложение- недавно начал пользоваться vanilla-lazyload, и в документации обнаружил возможность лениво загружать несколько Swiper'ов, но , к сожалению, в документации пример описывает случай, если настройки всех слайдеров одинаковые. Я предпринял несколько попыток, но безуспешно. Думаю, видео о ленивой загрузке слайдеров будет полезным)

    • @maxgraph
      @maxgraph  3 года назад +1

      Да там все в доке написано) могу конечно, но видео на 5 минут

    • @summersbyy
      @summersbyy 3 года назад

      @@maxgraph тогда да, наверное бессмысленно такое короткое видео делать)

  • @OleksandrPohribnyi
    @OleksandrPohribnyi 4 года назад +2

    На wordpress есть специальный плагин который сам конвертирует все картинки в webp

  • @const-shish
    @const-shish 3 года назад

    СПАСИБО большое. Полезно!

    • @maxgraph
      @maxgraph  3 года назад

      Пожалуйста)

  • @AntonioBenderas
    @AntonioBenderas 2 года назад

    CSS если в каждом свойстве использовать относительньі единицьі и calc() влияет на производительность?

    • @maxgraph
      @maxgraph  2 года назад +1

      Calc влияет, да

  • @front-end14
    @front-end14 4 года назад +1

    Спасибо, полезно👍

    • @maxgraph
      @maxgraph  4 года назад

      рад помочь))

  • @seoonlyRU
    @seoonlyRU 3 года назад +1

    нормас тема))) лайк неглядя от СЕООНЛИ

  • @ВсеволодКарпиков
    @ВсеволодКарпиков 3 года назад +1

    19:00 кстати на счет переноса стилей в тег стайл. успешно практикую это дело, использую на каждом проекте и не без помощи Галпа. но правда не так как Вы сказали (Галп действительно не сможет никогда в жизни понять где стили хедера и перенести их.) у меня под это есть таск: все Стайлус-файлы, стили которых должны попасть в тег стайл, имеют название с символа "_". Потом Галп тупо компилирует их в ЦСС и с помощью filesystem запихивает их содержимое в тег стайл. работает для многостраничных сайтов в один клик, в один клик, Карл))
    если про шрифты: то советую всем удалять неиспользующиеся глифы. шрифт можно с 500кб ужать до 10-15кб)
    и да, видос найс :):):)

    • @Shakhrom-b7d
      @Shakhrom-b7d 3 года назад

      погуглите npm пакет critical, с помощью него вы задаете размеры (ШхВ), с которых и будут генерироваться критические стили, вам достаточно будет просто вставить в html, можно вручную, а можно новым таском после билда.

  • @vollex_frontend
    @vollex_frontend 3 года назад +1

    Настоящий клад!

    • @maxgraph
      @maxgraph  3 года назад

      Спасибо))

  • @FaYrUsinc
    @FaYrUsinc 4 года назад

    Было очень полезно многое узнать, спасибо

    • @maxgraph
      @maxgraph  4 года назад

      Пожалуйста)

  • @ShocKKKKKKK
    @ShocKKKKKKK 4 года назад +2

    webp не слишком сильно влияет?)
    Нифига себе))
    Я сейчас посмотрел проект на галпе, у меня там стоит webp конвертер, то я прошелся по файликам и он сжимает в 5 - 12 раз картинки.
    что довольно таки сильно, тем более если использовать уже минимизированую картинку.
    А по поводу неудобства, согласен. очень как то тяжело натягивать это на WP потом

    • @maxgraph
      @maxgraph  4 года назад

      Ну я смотрел, сжатый пнг и сжатый вебпи отличались десятками килобайтов, не более

    • @ЕвгенийРусских-г8е
      @ЕвгенийРусских-г8е 4 года назад

      @@maxgraph ну, контентные изображения в png сохранять такое себе занятие

    • @maxgraph
      @maxgraph  4 года назад

      Почему?

    • @ЕвгенийРусских-г8е
      @ЕвгенийРусских-г8е 4 года назад

      @@maxgraph да обычный несжатый jpg будет раза в 4 меньше весить чем png. Если не нужна прозрачность , то jpg рулит. А webp еще меньше весит.

    • @maxgraph
      @maxgraph  4 года назад

      @@ЕвгенийРусских-г8е Ну это-то понятно :) Но я говорил про Png в контексте того, что прозрачность нужна.
      А про webp - ну сжал я сперва png, а потом перекодировал в webp - получил конечно разницу, но не сказать чтобы сильно критичную.
      Опять же, на лендингах, где что-то не будет часто меняться - вперед, не беда. Но с CMS - такое себе.

  • @qfurs
    @qfurs 3 года назад +2

    для Wodpress есть Webp Express - конвертит в webp и подставляет для тех браузеров, где поддерживается этот формат.

  • @uliev9298
    @uliev9298 4 года назад

    Ура ...крутяк, . Значит я всетаки интуитивно правильно все делал и не стоит тупо доверять европейским статьям а то только в блуд вводят, и спасибо за скрипт.

    • @maxgraph
      @maxgraph  4 года назад +1

      Пожалуйста)

  • @ОляОльгина-в7п
    @ОляОльгина-в7п 3 года назад

    интересно ваше мнение по оптимизации сайта под голосовой поиск?

    • @maxgraph
      @maxgraph  3 года назад

      А что конкретно?

  • @ИгорьЛитвинов-ш6з
    @ИгорьЛитвинов-ш6з 4 года назад

    Спасибо огромное!))

    • @maxgraph
      @maxgraph  4 года назад

      пожалуйста)

  • @Rusu421
    @Rusu421 2 года назад

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

    • @maxgraph
      @maxgraph  2 года назад

      Ну или так)

  • @4ITTonik
    @4ITTonik 4 года назад

    Отличное видео! Хорошо рассказано про каждый этап оптимизации. Для себя сделал вывод, что Pagespeed не панацея и не стоит уподобляться всему что он говорит. Например предлагает те-же критические CSS и JS вынести на страницу, это конечно хорошо, но типо я на scss пишу, у меня всё это билдится и чё я буду каждый раз это всё ковырять?) Насколько я знаю, плагины CMS это умеют делать автоматом, но в руководстве Pagespeed об этом не написано.

    • @maxgraph
      @maxgraph  4 года назад

      Спасибо) верное решение

  • @prIGovOR
    @prIGovOR 4 года назад

    Теперь GTMetrix мало чем отличается от PSI.

  • @ПетроКарнаух-ж5и
    @ПетроКарнаух-ж5и 4 года назад

    ГДЕ? ТЫ? БЫЛ? ВЧЕРА?! :) 😄

    • @maxgraph
      @maxgraph  4 года назад

      Видео выходят в пн, ср, пт:)))

  • @КомпаніяБЕТБ
    @КомпаніяБЕТБ Год назад

    А где показанный файл кэширования? Под видео в описании нет, в комментариях тоже отсутствует.

  • @ПетроКарнаух-ж5и
    @ПетроКарнаух-ж5и 4 года назад +1

    Только закончил сегодня такой заказ!!! Как объяснить сеошникам чтобы они подрасслабились по поводу гугла?!

    • @maxgraph
      @maxgraph  4 года назад

      Так и сказать - пейджспид не влияет ни на что) пока что тестируется зависимость поисковой выдачи от пейджспида, но внедрят ли это - большой вопрос

  • @serhiiretsenko2237
    @serhiiretsenko2237 4 года назад

    Файл для кэша обещал оставить, но не оставил :)

    • @maxgraph
      @maxgraph  4 года назад +1

      Как это :) В описании ссылка на исходники на гитхабе. Там есть htaccess)

    • @serhiiretsenko2237
      @serhiiretsenko2237 4 года назад

      @@maxgraph Oooooopssss... :) guilty. Посыпаю голову пеплом :)

    • @maxgraph
      @maxgraph  4 года назад

      бывает))

  • @HackOFF
    @HackOFF 3 года назад

    Смотреть скорость загрузки у VK и КиноПоиск нет смысла и ровняться на них тоже! Они отрастили себе такое "ПУЗО" что данные на данные замеры им будет ещё оооочень долго наплевать! Смотреть надо конкурентов в нише и если все остальное по SEO сделано подтягивать свой сайт до конкурентов если у них сайты "быстрее"

  • @iGotton
    @iGotton 4 года назад

    +