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

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

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

  • @viva65
    @viva65 3 года назад +15

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

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

      Спасибо!

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

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

  • @f-len
    @f-len 3 года назад

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

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

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

  • @user-ux5jx8oc9q
    @user-ux5jx8oc9q 3 года назад +5

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

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

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

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

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

  • @user-fl5zn1mr5q
    @user-fl5zn1mr5q 2 года назад

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

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

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

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

    Спасибо!!!!

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

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

  • @user-fr8ic5yn7d
    @user-fr8ic5yn7d 3 года назад

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

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

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

  • @user-gl3if9cw4i
    @user-gl3if9cw4i 3 года назад +5

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

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

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

    • @ii-yj5qj
      @ii-yj5qj 3 года назад

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

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

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

    • @ii-yj5qj
      @ii-yj5qj 3 года назад

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

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

      @@ii-yj5qj да

  • @Rb-ur5em
    @Rb-ur5em 2 года назад

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

  • @mykola.slisarenko
    @mykola.slisarenko 3 года назад +4

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

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

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

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

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

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

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

    • @user-le1iw4yx8i
      @user-le1iw4yx8i 3 года назад

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

  • @user-po5ih2pj5h
    @user-po5ih2pj5h 3 года назад +2

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

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

      Будете знать

    • @user-po5ih2pj5h
      @user-po5ih2pj5h 3 года назад +1

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

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

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

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

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

  • @user-ll3qg1xm5b
    @user-ll3qg1xm5b 3 года назад +2

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

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

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

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

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

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

    Jekyll помог

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

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

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

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

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

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

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

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

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

      @@SuprunAlexey ок)

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

    *Л. а. й. к.*

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

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

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

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

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

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

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

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

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

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

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

      Определенно

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

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

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

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

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

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

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

      В .htaccess

    • @kanzler9170
      @kanzler9170 Год назад

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

  • @user-wr6rw6xv3h
    @user-wr6rw6xv3h 3 года назад +2

    Я 5-ый

  • @0_o626
    @0_o626 2 года назад

    2:15

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

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

    • @user-hw1ly9tj9l
      @user-hw1ly9tj9l 2 года назад

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

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

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

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

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

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

      Это для кого?

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

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

  • @user-oc5zg6mq7l
    @user-oc5zg6mq7l 2 года назад

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

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

    Не поможет

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

    молодец