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

  Переглядів 14,869

Web Developer Blog

Web Developer Blog

День тому

Думаю каждый хоть раз задумывался как птимизировать и ускорить сайт. В этом видео я покажу 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, что можно делать

КОМЕНТАРІ: 75
@viva65
@viva65 3 роки тому
без понятия, почему у WDB так мало активности хороший канал, в отличии от прочих dev-channelов, полезно и без лишней воды спасибо)
@SuprunAlexey
@SuprunAlexey 3 роки тому
Спасибо!
@Furamy
@Furamy 3 роки тому
у большинства хороших каналов по веб деву активность раз в 10 ниже, тот же GromMax
@WhiteBear141981
@WhiteBear141981 3 роки тому
Отличный материал! Спасибо!
@SuprunAlexey
@SuprunAlexey 3 роки тому
Спасибо
@f-len
@f-len 3 роки тому
Спасибо большое. Очень полезно! 👍
@user-ux5jx8oc9q
@user-ux5jx8oc9q 3 роки тому
Очень полезно, большое спасибо Вам
@SuprunAlexey
@SuprunAlexey 3 роки тому
Отлично! Странно что так мало просмотров(
@gleymius
@gleymius 3 роки тому
Крутые видео! Смотрю с удовольствием Было бы интересно посмотреть видео, про верстку сайта с возможностью переключения нескольких языков и автоматическом отображении разных страниц с выбранным языком)
@user-fl5zn1mr5q
@user-fl5zn1mr5q 2 роки тому
Топ канал, однозначно подписка
@seoonlyRU
@seoonlyRU 2 роки тому
отлично) просто лукас от СЕООНЛИ
@GGSoft2009
@GGSoft2009 3 роки тому
Спасибо!!!!
@SuprunAlexey
@SuprunAlexey 3 роки тому
Всегда пожалуйста 🙏🏻
@user-fr8ic5yn7d
@user-fr8ic5yn7d 3 роки тому
Здрасте нужна ли esmascript для react разроботчику для начинающих важно ли знать ЕS6?
@thomasanderson3145
@thomasanderson3145 2 роки тому
А какие пункты из перечисленных подходят для React приложений, учитывая их специфику React приложений?
@Rb-ur5em
@Rb-ur5em 2 роки тому
Добрый день, вопрос немного не по теме Подскажите где можно найти простую карточную игру (качество и сложность не важно. лучше что-то по проще..) HTML, CSS, JS, MySQL Описание: Регистрация игрока, Минимум два участника Буду очень, благодарен, Спасибо)!
@mykola.slisarenko
@mykola.slisarenko 3 роки тому
Я бы ещё дополнил пункт с минимизацией js/css. Нельзя всё просто сжать и грузить одним блоком. Рекомендуется разбивать на "критический" и "некретический" js. И грузить их в разное время. Также я бы дополнил тему использования картинок пунктом "lazyloading"
@SuprunAlexey
@SuprunAlexey 3 роки тому
Верно
@user-gl3if9cw4i
@user-gl3if9cw4i 3 роки тому
про минифицирования не знал раньше. Открывал другие сайты через консоль и думал "Почему всё так в кучу, они что, писать не умеют код ?" )))
@SuprunAlexey
@SuprunAlexey 3 роки тому
Умеют ещё и как умеют 😄
@ii-yj5qj
@ii-yj5qj 3 роки тому
Мы можем минифицировать код, а обратно его можно как то разЭотвать?
@arzamaskin_kirill
@arzamaskin_kirill 3 роки тому
@@ii-yj5qj продублируй заранее файл и все.
@ii-yj5qj
@ii-yj5qj 3 роки тому
@@arzamaskin_kirill понял, спасиб
@iamname8758
@iamname8758 3 роки тому
@@ii-yj5qj да
@burlit33
@burlit33 3 роки тому
Уважаемый, благодарю за интересные выпуски. Стараюсь научиться азам верстки сайтов, но времени трачу очень много и не укладываюсь в сроки, назначенные самому себе. Не могли бы Вы подсказать мне контакты верстальщика, который готов за вознаграждение решить мои задачи. Заранее благодарен.
@SuprunAlexey
@SuprunAlexey 3 роки тому
На фриланс зайдите, там их миллион
@user-le1iw4yx8i
@user-le1iw4yx8i 3 роки тому
Могу помочь если хотите)
@quillcraft
@quillcraft 3 роки тому
Для простых проектов проблемы скорости практически нет. Для действительно больших серьезных проектов нужно применять SSR, но про нее ничего не сказал. Минификация, модуль-сплиттинг, упаковка картинок и текстов может решаться webpack'ом, тоже ничего не сказал. Ну то есть, для тех примеров, что упонянуты проблема скорости загрузки второстепенна.
@user-po5ih2pj5h
@user-po5ih2pj5h 3 роки тому
Большое спасибо за материал! А то кажется, что вёрстка это просто html и css, а на самом деле столько тонкостей.
@SuprunAlexey
@SuprunAlexey 3 роки тому
Будете знать
@user-po5ih2pj5h
@user-po5ih2pj5h 3 роки тому
Может это не относится к видео, но хотелось бы узнать, что сейчас лучше использовать для работы с сервером, базой данных PHP или node. js?
@SuprunAlexey
@SuprunAlexey 3 роки тому
Смотря под какие задачи
@SuprunAlexey
@SuprunAlexey 3 роки тому
С php для новичка будет проще
@Barahten2010
@Barahten2010 3 роки тому
Сделай пплиз видео про accessibility и aria-тэги
@SuprunAlexey
@SuprunAlexey 3 роки тому
Может быть
@OchenZloy22
@OchenZloy22 3 роки тому
Jekyll помог
@SuprunAlexey
@SuprunAlexey 3 роки тому
Нормас
@user-ll3qg1xm5b
@user-ll3qg1xm5b 3 роки тому
Base64 увеличивает затраты памяти примерно на 33%, поэтому использовать его стоит только тогда, когда вы точно знаете, зачем вы это делаете.
@SuprunAlexey
@SuprunAlexey 3 роки тому
В любом случае надо точно знать
@hutoryanin
@hutoryanin 3 роки тому
*Л. а. й. к.*
@SuprunAlexey
@SuprunAlexey 3 роки тому
Как обычно спасибо
@mrakcw
@mrakcw 3 роки тому
Нужно было добавить еще 7 пункт - а именно удаление не используемых стилей на онлайн сервисе uncss-online.com В прошлом году делал эксперементы по этому сервису и скорости загрузки до и после. В итоге: - оценка до 82 / - оценка после 99
@kabulisakov4620
@kabulisakov4620 3 роки тому
что, что вот про cdn и минифицирования не знал раньше)) открывал сайты с кодом через консоль и думал какого фига "там всё в кучу" написано😂
@SuprunAlexey
@SuprunAlexey 3 роки тому
Вот так вот 😄
@alenache1
@alenache1 3 роки тому
а как после минифицирования работать с этой кашей? есть обратная процедура?
@SuprunAlexey
@SuprunAlexey 3 роки тому
Оставляете проект обычный, но если что есть и unmin
@alenache1
@alenache1 3 роки тому
@@SuprunAlexey ок)
@yura5215
@yura5215 3 роки тому
Гугловская мерялка это по сути самый бесполезный инструмент. В моем случае он на кучу всего ругается, но при этом его же Adsense это и есть 3/4 косяков сайта. Удаляешь 2 баннера и сайт типа летает
@SuprunAlexey
@SuprunAlexey 3 роки тому
Не сталкивался с таким
@maxbred3798
@maxbred3798 3 роки тому
да, при этом если проверять один и тот же сайт тупо из разных городов одной страны, показатели могут быть сильно разными. Ее можно рассматривать как рекомендации.
@woomka
@woomka 3 роки тому
так лучше будет ExpiresActive On ExpiresDefault "access plus 30 days"
@maxbred3798
@maxbred3798 3 роки тому
а как вставляется? отдельным файлом или куда?
@SuprunAlexey
@SuprunAlexey 3 роки тому
В .htaccess
@kanzler9170
@kanzler9170 Рік тому
access plus 30 days - это навсегда имеется в виду?
@skorotanya
@skorotanya 3 роки тому
Даже с самыми простенькими сайтами у меня пока никак не получается добиться попадания в зелëный сектор. (( Видимо, надо подробнее изучить тему ускорения.
@SuprunAlexey
@SuprunAlexey 3 роки тому
Определенно
@skorotanya
@skorotanya 3 роки тому
Раньше (лет 9 назад) так хорошо было, верстаешь как хочешь, лишь бы страница вообще открылась в интернет эксплорэре. А теперь столько условий, и скорость загрузки обеспечь, и оптимизируй под поисковики, и классы по бэму назови, и пиксельпëрфект соблюди, и адаптируй под все девайсы. Ужос, кароче!.. ))
@littlegirl3743
@littlegirl3743 2 роки тому
Спрос на веб-разработчиков все так же велик после появления конструкторов для сайтов? Вроде веб-разработчик занимается созданием сайтов, а с помощью конструктора многие могут и сами сделать его, так стоит идти в эту сферу?
@user-hw1ly9tj9l
@user-hw1ly9tj9l 2 роки тому
фронт энд или бекэнд разработчики занимаются гораздо более сложными вещами, нежели просто верстка сайта. человек, который никогда не изучал веб технологии вряд ли сможет выстроить сложную бизнес логику самостоятельно. для этого и нужны веб разработчики
@user-wr6rw6xv3h
@user-wr6rw6xv3h 3 роки тому
Я 5-ый
@SuprunAlexey
@SuprunAlexey 3 роки тому
Третий
@user-wr6rw6xv3h
@user-wr6rw6xv3h 3 роки тому
@@SuprunAlexey 6-ой
@SuprunAlexey
@SuprunAlexey 3 роки тому
@@user-wr6rw6xv3h а как бы 7ой
@user-wr6rw6xv3h
@user-wr6rw6xv3h 3 роки тому
@@SuprunAlexey да не Быть не может 8-ой
@0_o626
@0_o626 2 роки тому
2:15
@user-oc5zg6mq7l
@user-oc5zg6mq7l 2 роки тому
Автор ничего не знает в программировании. Путем сжатия кода нереально сократить количество действий иеиерпретатора html, css, js, php. Сайт любой загрузится быстро, а вот интерпретация кода.. . все вроде много знают, а на самом деле вообще ничего не знают
@AmiGator
@AmiGator 3 роки тому
фотошоп не умеет оптимизировать фото от слова «совсем».
@affixw
@affixw 3 роки тому
CDN далеко не для всех и не всегда реально помогает ускорить загрузку...
@SuprunAlexey
@SuprunAlexey 3 роки тому
Это для кого?
@affixw
@affixw 3 роки тому
@@SuprunAlexey для нагруженных проектов, как минимум. А если ещё пожестче, то работающим более чем на одну страну
@orego800
@orego800 3 роки тому
Не поможет
@WebDeveloperGM
@WebDeveloperGM 2 роки тому
молодец
Godzilla Attacks Brawl Stars!!!
00:39
Brawl Stars
Переглядів 9 млн
читаем как играть.роли
3:40
Алайдар
Переглядів 17
Верстка сайта - Делаем темную версию сайта
8:44
Оптимизация сайта от А до Я
18:03
WebDesign Master
Переглядів 34 тис.
Как ускорить ИНТЕРНЕТ до максимума? 100% РАБОЧИЙ МЕТОД
12:37
Хауди Хо™ - Просто о мире IT!
Переглядів 2,6 млн