Верстка сайта - Как ускорить сайт 6 простых шагов

Думаю каждый хоть раз задумывался как птимизировать и ускорить сайт. В этом видео я покажу 6 простых шагов как ускорить сайт, даже если вы начинающий у вас получится сделать эти действия. Верстка сайта иногда получается очень громоздкой с большим количеством лишних стилей и JavaScript кода. Это все мешает сайту загружаться быстро и качественно, поэтому момент скорости сайта нужно также прорабатывать и не забывать о нем. Скорость загрузки сайта очень влияет на отображение сайта в поисковой выдаче ближе к первым местам.
0:00 - Как ускорить сайт
0:34 - Как узнать скорость загрузки сайта?
1:02 - Первый шаг, используйте CDN и почему.
2:15 - Минифицируйте html, css, javascript файлы
3:11 - Оптимизация изображений и SVG. ОЧЕНЬ ВАЖНО!
5:15 - Кэширование сайта
6:20 - Количество HTTP запросов
6:50 - Пишите на html css без Javascript, что можно делать

[@viva65]

без понятия, почему у WDB так мало активности хороший канал, в отличии от прочих dev-channelов, полезно и без лишней воды спасибо)

[@SuprunAlexey]

Спасибо!

[@Furamy]

у большинства хороших каналов по веб деву активность раз в 10 ниже, тот же GromMax

[@WhiteBear141981]

Отличный материал! Спасибо!

[@SuprunAlexey]

Спасибо

[@user-ux5jx8oc9q]

Очень полезно, большое спасибо Вам

[@SuprunAlexey]

Отлично! Странно что так мало просмотров(

[@f-len]

Спасибо большое. Очень полезно! 👍

[@seoonlyRU]

отлично) просто лукас от СЕООНЛИ

[@gleymius]

Крутые видео! Смотрю с удовольствием Было бы интересно посмотреть видео, про верстку сайта с возможностью переключения нескольких языков и автоматическом отображении разных страниц с выбранным языком)

[@GGSoft2009]

Спасибо!!!!

[@SuprunAlexey]

Всегда пожалуйста 🙏🏻

[@user-fl5zn1mr5q]

Топ канал, однозначно подписка

[@mykola.slisarenko]

Я бы ещё дополнил пункт с минимизацией js/css. Нельзя всё просто сжать и грузить одним блоком. Рекомендуется разбивать на "критический" и "некретический" js. И грузить их в разное время. Также я бы дополнил тему использования картинок пунктом "lazyloading"

[@SuprunAlexey]

Верно

[@user-gl3if9cw4i]

про минифицирования не знал раньше. Открывал другие сайты через консоль и думал "Почему всё так в кучу, они что, писать не умеют код ?" )))

[@SuprunAlexey]

Умеют ещё и как умеют 😄

[@ii-yj5qj]

Мы можем минифицировать код, а обратно его можно как то разЭотвать?

[@arzamaskin_kirill]

@@ii-yj5qj продублируй заранее файл и все.

[@ii-yj5qj]

@@arzamaskin_kirill понял, спасиб

[@iamname8758]

@@ii-yj5qj да

[@user-fr8ic5yn7d]

Здрасте нужна ли esmascript для react разроботчику для начинающих важно ли знать ЕS6?

[@thomasanderson3145]

А какие пункты из перечисленных подходят для React приложений, учитывая их специфику React приложений?

[@user-po5ih2pj5h]

Большое спасибо за материал! А то кажется, что вёрстка это просто html и css, а на самом деле столько тонкостей.

[@SuprunAlexey]

Будете знать

[@user-po5ih2pj5h]

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

[@SuprunAlexey]

Смотря под какие задачи

[@SuprunAlexey]

С php для новичка будет проще

[@maxengio]

Jekyll помог

[@SuprunAlexey]

Нормас

[@Rb-ur5em]

Добрый день, вопрос немного не по теме Подскажите где можно найти простую карточную игру (качество и сложность не важно. лучше что-то по проще..) HTML, CSS, JS, MySQL Описание: Регистрация игрока, Минимум два участника Буду очень, благодарен, Спасибо)!

[@burlit33]

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

[@SuprunAlexey]

На фриланс зайдите, там их миллион

[@user-le1iw4yx8i]

Могу помочь если хотите)

[@hutoryanin]

*Л. а. й. к.*

[@SuprunAlexey]

Как обычно спасибо

[@quillcraft]

Для простых проектов проблемы скорости практически нет. Для действительно больших серьезных проектов нужно применять SSR, но про нее ничего не сказал. Минификация, модуль-сплиттинг, упаковка картинок и текстов может решаться webpack'ом, тоже ничего не сказал. Ну то есть, для тех примеров, что упонянуты проблема скорости загрузки второстепенна.

[@user-ll3qg1xm5b]

Base64 увеличивает затраты памяти примерно на 33%, поэтому использовать его стоит только тогда, когда вы точно знаете, зачем вы это делаете.

[@SuprunAlexey]

В любом случае надо точно знать

[@Barahten2010]

Сделай пплиз видео про accessibility и aria-тэги

[@SuprunAlexey]

Может быть

[@kabulisakov4620]

что, что вот про cdn и минифицирования не знал раньше)) открывал сайты с кодом через консоль и думал какого фига "там всё в кучу" написано😂

[@SuprunAlexey]

Вот так вот 😄

[@alenache1]

а как после минифицирования работать с этой кашей? есть обратная процедура?

[@SuprunAlexey]

Оставляете проект обычный, но если что есть и unmin

[@alenache1]

@@SuprunAlexey ок)

[@mrakcw]

Нужно было добавить еще 7 пункт - а именно удаление не используемых стилей на онлайн сервисе uncss-online.com В прошлом году делал эксперементы по этому сервису и скорости загрузки до и после. В итоге: - оценка до 82 / - оценка после 99

[@0_o626]

2:15

[@yura5215]

Гугловская мерялка это по сути самый бесполезный инструмент. В моем случае он на кучу всего ругается, но при этом его же Adsense это и есть 3/4 косяков сайта. Удаляешь 2 баннера и сайт типа летает

[@SuprunAlexey]

Не сталкивался с таким

[@maxbred3798]

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

[@skorotanya]

Даже с самыми простенькими сайтами у меня пока никак не получается добиться попадания в зелëный сектор. (( Видимо, надо подробнее изучить тему ускорения.

[@SuprunAlexey]

Определенно

[@skorotanya]

Раньше (лет 9 назад) так хорошо было, верстаешь как хочешь, лишь бы страница вообще открылась в интернет эксплорэре. А теперь столько условий, и скорость загрузки обеспечь, и оптимизируй под поисковики, и классы по бэму назови, и пиксельпëрфект соблюди, и адаптируй под все девайсы. Ужос, кароче!.. ))

[@woomka]

так лучше будет ExpiresActive On ExpiresDefault "access plus 30 days"

[@maxbred3798]

а как вставляется? отдельным файлом или куда?

[@SuprunAlexey]

В .htaccess

[@kanzler9170]

access plus 30 days - это навсегда имеется в виду?

[@user-wr6rw6xv3h]

Я 5-ый

[@SuprunAlexey]

Третий

[@user-wr6rw6xv3h]

@@SuprunAlexey 6-ой

[@SuprunAlexey]

@@user-wr6rw6xv3h а как бы 7ой

[@user-wr6rw6xv3h]

@@SuprunAlexey да не Быть не может 8-ой

[@littlegirl3743]

Спрос на веб-разработчиков все так же велик после появления конструкторов для сайтов? Вроде веб-разработчик занимается созданием сайтов, а с помощью конструктора многие могут и сами сделать его, так стоит идти в эту сферу?

[@user-hw1ly9tj9l]

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

[@AmiGator]

фотошоп не умеет оптимизировать фото от слова «совсем».

[@affixw]

CDN далеко не для всех и не всегда реально помогает ускорить загрузку...

[@SuprunAlexey]

Это для кого?

[@affixw]

@@SuprunAlexey для нагруженных проектов, как минимум. А если ещё пожестче, то работающим более чем на одну страну

[@orego800]

Не поможет

[@WebDeveloperGM]

молодец

[@user-oc5zg6mq7l]

Автор ничего не знает в программировании. Путем сжатия кода нереально сократить количество действий иеиерпретатора html, css, js, php. Сайт любой загрузится быстро, а вот интерпретация кода.. . все вроде много знают, а на самом деле вообще ничего не знают