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

Привет! Оптимизация сайта - крайне важная часть тестирования для веб-разработчика. Сайт должен быстро загружаться, адекватно откликаться на действия пользователя, быть оптимизированным.
К сожалению, любые из доступных онлайн-мерил оптимизации (типа Google Pagespeed) не могут дать верную картину по оптимизации, и разработчикам нужно самостоятельно все тестировать, обращать внимание на скорость загрузки, используя данные онлайн-сервисы лишь как рекомендательные.
В этом видео я расскажу и покажу, какие именно техники и приемы нужно применять, чтобы сделать сайт быстрым. Поехали!
Содержание:
00:00 - Вступление
00:29 - Про Google Pagespeed
06:07 - Про шрифты
08:26 - Про изображения
15:19 - Про Webp и проблемы с ним
19:00 - Про стили в теге style
20:55 - Сжатие и минификация (+ про количество файлов)
23:15 - Кэширование
24:38 - Про спрайты
26:07 - Про внешние ресурсы и async
28:49 - Про lazyload картинок, видео, ютуба
31:15 - Lazyload яндекс-карты
38:05 - Заключение
github.com/maxdenaro/maxgraph... - исходники видео на GitHub
developers.google.com/speed/p... - сервис Pagespeed Insights
gtmetrix.com/ - сервис GTMatrix
habr.com/ru/post/475152/ - интересное мнение о Pagespeed
compressor.io/ - онлайн-сжатие изображений
tinypng.com/ - онлайн-сжатие изображений
squoosh.app/ - онлайн-сжатие изображений
github.com/verlok/vanilla-laz... - плагин LazyLoad
• JS-решения №3. Отложен... - lazyload для видео с KZbin
• Gulp 4. Полное руковод... - сборка Gulp, где рассматриваются свг-спрайты и прочие техники сжатия.
• SVG. Руководство по ис... - видео про SVG, для лучшего понимания использования данного формата.
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
#обучение #оптимизациясайта #pagespeed

[@i__loading]

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

[@maxgraph]

Спасибо)

[@super_snejinka]

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

[@maxgraph]

Бывает))

[@user-xs8ty9dg5s]

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

[@mishajaglovskiy6418]

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

[@maxgraph]

Спасибо))

[@FaYrUsinc]

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

[@maxgraph]

Пожалуйста)

[@user-kz5go4mp8w]

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

[@maxgraph]

рад помочь))

[@const-shish]

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

[@maxgraph]

Пожалуйста)

[@user-ek5kv2hb5d]

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

[@maxgraph]

пожалуйста)

[@summersbyy]

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

[@maxgraph]

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

[@summersbyy]

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

[@user-wm4xh4ho2t]

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

[@dannyjoe7792]

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]

@Danny Joe Instablaster :)

[@dannyjoe7792]

@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]

@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]

@Danny Joe you are welcome =)

[@OleksandrPohribnyi]

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

[@4ITTonik]

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

[@maxgraph]

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

[@seoonlyRU]

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

[@maxgraph]

Спасибо)

[@AntonioBenderas]

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

[@maxgraph]

Calc влияет, да

[@user-cg9rx6ei8h]

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

[@maxgraph]

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

[@veterok54]

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

[@maxgraph]

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

[@user-sb2yd8fp9n]

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

[@maxgraph]

Почему?

[@user-sb2yd8fp9n]

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

[@maxgraph]

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

[@user-om4bq8uf1s]

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

[@user-wm4xh4ho2t]

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

[@qfurs]

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

[@vollex_frontend]

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

[@maxgraph]

Спасибо))

[@uliev9298]

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

[@maxgraph]

Пожалуйста)

[@Rusu421]

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

[@maxgraph]

Ну или так)

[@user-lc8kx6le2x]

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

[@maxgraph]

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

[@user-lc8kx6le2x]

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

[@maxgraph]

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

[@prIGovOR]

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

[@iGotton]

+

[@serhiiretsenko2237]

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

[@maxgraph]

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

[@serhiiretsenko2237]

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

[@maxgraph]

бывает))

[@HackOFF]

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

[@user-hg1td5ty7l]

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