Оптимизация скорости загрузки сайта. Советы, рекомендации. Pagespeed
HTML-код
- Опубликовано: 19 июн 2024
- Привет! Оптимизация сайта - крайне важная часть тестирования для веб-разработчика. Сайт должен быстро загружаться, адекватно откликаться на действия пользователя, быть оптимизированным.
К сожалению, любые из доступных онлайн-мерил оптимизации (типа 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 для видео с RUclips
• 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
Максим, огромное спасибо за видео, это бальзам на душу просто!)) я по началу чуть не чокнулась, пытаясь подстроиться под pagespeed, и когда слепо выполнила часть его просьб, он показал скорость еще в половину меньше чем было. Вот такой мой горький опыт)
Бывает))
очень полезное видео. спасибо огромное за информацию!!!!
Однозначно лайк! Не так часто можно найти качественный контент по оптимизации сайтов
Спасибо)
За оптимизацию карты отдельное спасибо, очень крутая фишка
Спасибо))
Было очень полезно многое узнать, спасибо
Пожалуйста)
Спасибо, полезно👍
рад помочь))
СПАСИБО большое. Полезно!
Пожалуйста)
Спасибо огромное!))
пожалуйста)
Классное видео, особенно про ленивую загрузку Я.карт понравилось!) Есть небольшое предложение- недавно начал пользоваться vanilla-lazyload, и в документации обнаружил возможность лениво загружать несколько Swiper'ов, но , к сожалению, в документации пример описывает случай, если настройки всех слайдеров одинаковые. Я предпринял несколько попыток, но безуспешно. Думаю, видео о ленивой загрузке слайдеров будет полезным)
Да там все в доке написано) могу конечно, но видео на 5 минут
@@maxgraph тогда да, наверное бессмысленно такое короткое видео делать)
Отличное видео! Хорошо рассказано про каждый этап оптимизации. Для себя сделал вывод, что Pagespeed не панацея и не стоит уподобляться всему что он говорит. Например предлагает те-же критические CSS и JS вынести на страницу, это конечно хорошо, но типо я на scss пишу, у меня всё это билдится и чё я буду каждый раз это всё ковырять?) Насколько я знаю, плагины CMS это умеют делать автоматом, но в руководстве Pagespeed об этом не написано.
Спасибо) верное решение
нормас тема))) лайк неглядя от СЕООНЛИ
Спасибо)
20:32 - есть npm пакет "critical", для вычисления стилей первого экрана по параметрам (ШхВ), там в настройках можно включать/исключать классы и т.д.
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.
@Danny Joe Instablaster :)
@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.
@Phoenix James It worked and I finally got access to my account again. Im so happy!
Thank you so much you saved my ass!
@Danny Joe you are welcome =)
19:00 кстати на счет переноса стилей в тег стайл. успешно практикую это дело, использую на каждом проекте и не без помощи Галпа. но правда не так как Вы сказали (Галп действительно не сможет никогда в жизни понять где стили хедера и перенести их.) у меня под это есть таск: все Стайлус-файлы, стили которых должны попасть в тег стайл, имеют название с символа "_". Потом Галп тупо компилирует их в ЦСС и с помощью filesystem запихивает их содержимое в тег стайл. работает для многостраничных сайтов в один клик, в один клик, Карл))
если про шрифты: то советую всем удалять неиспользующиеся глифы. шрифт можно с 500кб ужать до 10-15кб)
и да, видос найс :):):)
погуглите npm пакет critical, с помощью него вы задаете размеры (ШхВ), с которых и будут генерироваться критические стили, вам достаточно будет просто вставить в html, можно вручную, а можно новым таском после билда.
webp не слишком сильно влияет?)
Нифига себе))
Я сейчас посмотрел проект на галпе, у меня там стоит webp конвертер, то я прошелся по файликам и он сжимает в 5 - 12 раз картинки.
что довольно таки сильно, тем более если использовать уже минимизированую картинку.
А по поводу неудобства, согласен. очень как то тяжело натягивать это на WP потом
Ну я смотрел, сжатый пнг и сжатый вебпи отличались десятками килобайтов, не более
@@maxgraph ну, контентные изображения в png сохранять такое себе занятие
Почему?
@@maxgraph да обычный несжатый jpg будет раза в 4 меньше весить чем png. Если не нужна прозрачность , то jpg рулит. А webp еще меньше весит.
@@user-sb2yd8fp9n Ну это-то понятно :) Но я говорил про Png в контексте того, что прозрачность нужна.
А про webp - ну сжал я сперва png, а потом перекодировал в webp - получил конечно разницу, но не сказать чтобы сильно критичную.
Опять же, на лендингах, где что-то не будет часто меняться - вперед, не беда. Но с CMS - такое себе.
На wordpress есть специальный плагин который сам конвертирует все картинки в webp
CSS если в каждом свойстве использовать относительньі единицьі и calc() влияет на производительность?
Calc влияет, да
Настоящий клад!
Спасибо))
интересно ваше мнение по оптимизации сайта под голосовой поиск?
А что конкретно?
Ура ...крутяк, . Значит я всетаки интуитивно правильно все делал и не стоит тупо доверять европейским статьям а то только в блуд вводят, и спасибо за скрипт.
Пожалуйста)
для Wodpress есть Webp Express - конвертит в webp и подставляет для тех браузеров, где поддерживается этот формат.
По поводу стилей в хедере, по моему тут все просто.
Берем отдельный файл, для рабочей версии ставим его в пайп для генерации обычного сss, а для продакшена - вставляем его уже в хедер. Вроде так.
Ну или так)
+
ГДЕ? ТЫ? БЫЛ? ВЧЕРА?! :) 😄
Видео выходят в пн, ср, пт:)))
Только закончил сегодня такой заказ!!! Как объяснить сеошникам чтобы они подрасслабились по поводу гугла?!
Так и сказать - пейджспид не влияет ни на что) пока что тестируется зависимость поисковой выдачи от пейджспида, но внедрят ли это - большой вопрос
Теперь GTMetrix мало чем отличается от PSI.
Файл для кэша обещал оставить, но не оставил :)
Как это :) В описании ссылка на исходники на гитхабе. Там есть htaccess)
@@maxgraph Oooooopssss... :) guilty. Посыпаю голову пеплом :)
бывает))
Смотреть скорость загрузки у VK и КиноПоиск нет смысла и ровняться на них тоже! Они отрастили себе такое "ПУЗО" что данные на данные замеры им будет ещё оооочень долго наплевать! Смотреть надо конкурентов в нише и если все остальное по SEO сделано подтягивать свой сайт до конкурентов если у них сайты "быстрее"
А где показанный файл кэширования? Под видео в описании нет, в комментариях тоже отсутствует.