Как увеличить скорость загрузки сайта (оптимизация фронтенда для Google PageSpeed)

1148 ratings | 48251 views


Как увеличить скорость загрузки сайта (оптимизация фронтенда для Google PageSpeed)

Полезно? Жми - Страница урока со всеми необходимыми данными: Рассмотрим всестороннюю оптимизацию загрузки сайта и повышение показателей для Google PageSpeed. Оптимизированная верстка на примере: Создание интернет-магазина: Фриланс и заработок: Создание сайта на WordPress: Группа Вконтакте: Реклама на канале:

Comments to the video: Как увеличить скорость загрузки сайта (оптимизация фронтенда для Google PageSpeed)

GSPurpleJam 11 days ago
Спасибо больше, все работает! p.s.: длительно не мог осознать, отчего сходу не подгружаются все стили первого экрана, а итого навсего необходимо было поубирать ./ в url картинок и остального.
Игорь Козырев 23 days ago
Спасибо огромное за прикольные плюшки))) С первого раза загрузил веб-сайт и сходу выдало 100\100. КРУТО!!!
Денис Денвер 27 days ago
Хорошие у тебя видосы)) И весьма увлекательный логотип))
Артём Кузнецов 1 month ago
И еще таковой проблема Алексей, кушать ли схожий optimize.HTML для WordPress?
Pc-TorrenTs net 1 month ago
Всем привет , кто даст подсказку , кушать видео аннотация о том будто ввести эту фишку в готовый штамп dle 11 ? Заранее благодарю.
Костя Чебан 2 months ago
Но ведь этот код станет наименее комфортен для корректирования, неужели это отлично?
Shmow Zow 3 months ago
что за Local storage? собственный сервер? кушать видео где вы всё это поясняете?
Mr. BODIKS 4 months ago
а на Iphone норм загружается позже потом оптимизации?
Dmitriy Sparrow 5 months ago
зашел сходу проверить ваш веб-сайт, стало любопытно, а там 52/100 для мобилки и рабочего стола :) Т.е. вам хватает таковой оптимизации либо непосредственно с этим веб-сайтом вы не заморачиваетесь? :)
WebDesign Master 5 months ago
Планирую улучшить. Хотя я уже не заморачиваюсь, главное, чтоб было приспособлено для мобильных устройств. Там по графике PageSpeed прогоняет непосредственно.
Александр Дьяченко 6 months ago
Как вообщем в проект подключить ещё одинешенек шрифт? Он лицезреет лишь RobotoRegular и всё? Использую сборка _optimazed-gulp-sass
serii burduja 6 months ago
Спасибо, все верно, понимаете сколько я писал на тостер.ру по этому вопросу, а здесь ответ будто на ладошки, необходимо лишь разжевывать.
Юлия Куденцова 6 months ago
Скажите, изволь, где Вы брали код сетки стилей?
Maxxidom Germany 7 months ago
скачал версию 2.0 сейчас при компиляции sass выскакивает в командной строке вот такое предостережение. в старенькой версии такового дудки. я этак сообразил что в 5 версии бурбона снисут какието функции. проблема: необходимо ли что то управлять в шаблоне gulp. WARNING: [Bourbon] [Deprecation] `assign-inputs` is deprecated and will be removed in 5.0.0. Backtrace: node_modules/bourbon/app/assets/stylesheets/functions/_assign-inputs.scss:4, in function `assign-inputs` node_modules/bourbon/app/assets/stylesheets/addons/_text-inputs.scss:111 Атак сборка попросту супер. пользуюсь с самой первой версии 0.0 html_start
Максим Усачёв 8 months ago
Спасибо за ваш труд! Но кушать вопросы: 1) Почему-то редактор Атом бранится на файл index.html, то ли незакрытые теги, то ли где-то строчки разрываются некорректно. В общем, выделяет огромные кусочки кода белоснежным: . Почему этак? И будто всё починить? 2) Я верно сообразил, что мне необходимо все вот эти файлы () из папки _optimized_html возложить в корень веб-сайта, где у меня все файлы.html мои на серваке? И уже в их позже всё мастерить, конечно?
Ivan Govrilow 8 months ago
для dle подходит
John Ohabsky 8 months ago
Большое благодарю, Чувак. Я для себя gulp-ом сделал компиляцию sass , включил browserSync, убрал линию в заглавиях файлов(css) и верстаю. Отличный вариант. Спасибо
Алечка Михайлова 9 months ago
Добрый вечер! После оптимизации Руки выдал последующее: Параметры загрузки странички: Время загрузки странички:0.22 сек. Размер странички:132.807 кбай Размер странички превосходит рациональные характеристики. Никак невозможно убавить?
Алечка Михайлова 9 months ago
Здравствуйте! 1. У меня три css-ки: fonts.css, font-awesome.css, custom-fonts.css. Если их соединить в одинешенек файл в таком же порядке, то подключение скриптом надлежит трудиться? А то чего то у меня скрипт шрифты не подключает. 2. Количество блокирующих ресурсов CSS вообщем обязан 1 оставаться (compiled.min.css) потом анализа???
Доспехи Блоггера 9 months ago
Народ, кто разобрался, подскажите по шрифтам! Шрифты не подключаются, вот скрин с консоли Папка где хранятся шрифты, такая же, ничего не менял, вот скрин: Блин, уже всё пересмотрел и отчего не подключаются разума не приложу!
WebDesign Master 9 months ago
Нужен запущенный сервер.
Алекс Михайлов 9 months ago
Добрый вечер! У меня тоже шрифты не подключаются. Что не этак? файл лежит здесь - assets/template/css/fonts.css. Может линия ошибочно прописал?: <script>!function() function e(e,t,n) e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent&&e.attachEvent( on +t,n) function t(e) return window.localStorage&&localStorage.font_css_cache&&localStorage.font_css_cache_file===e function n() if(window.localStorage&&window.XMLHttpRequest)if(t(o))a(localStorage.font_css_cache);else var n=new XMLHttpRequest;n.open( GET ,o,!0),e(n, load ,function() 4===n.readyState&&(a(n.responseText),localStorage.font_css_cache=n.responseText,localStorage.font_css_cache_file=o) ),n.send() else var c=document.createElement( link );c.href=o,c.rel= stylesheet ,c.type= text/css ,document.getElementsByTagName( head )[0].appendChild(c),document.cookie= font_css_cache function a(e) var t=document.createElement( style );t.innerHTML=e,document.getElementsByTagName( head )[0].appendChild(t) var o= assets/template/css/fonts.css ;window.localStorage&&localStorage.font_css_cache||document.cookie.indexOf( font_css_cache )>-1?n():e(window, load ,n) ();</script> PageSpeed Insights все равно указывает: Количество блокирующих ресурсов CSS на страничке: 3. assets/template/css/style.css assets/template/css/animate.css assets/template/css/fonts.css fonts понятно, необходимо будто то в скрипт вывести. А другие 2 остаются?
Алекс Михайлов 9 months ago
PageSpeed Insights сейчас показал число блокирующих ресурсов CSS на страничке: 1 assets/template/css/fonts.css
Доспехи Блоггера 9 months ago
Подскажите, в _optimized_html в индексном файле вы поведали про скрипт для кеширования шрифтов, однако у вас не подключены шрифты. Это они умышленно не подключены, дескать, кому нужно тот сам подключит либо это этак и надлежит быть? Просто у меня шрифты не подключаются до тех пор, покамест я их сам не подключаю стандартным методом (loadCSS( _fonts.css );) И их перед пуском тоже нужно компилировать?
WebDesign Master 9 months ago
Если в папке - конечно, если в корне - будто в видео.
Maxim Matveychuk 10 months ago
Алексей, здрасти! Спасибо за уроки! Можно ли хорошо улучшить тему на вордпрессе не нарушив структуру темы? (и вообщем, может быть ли достигнуть такового результата на вордпрессе?100/100)
WebDesign Master 10 months ago
Если разрабатывать, придерживаясь Кодекса , невозможно, такая тема не подойдет. Если костылить , то, думаю, можно что-то придумать.
дровосек железный 1 year ago
Если кушать Optimized_html _ для чего нужен clean_html ?
Smake 11 months ago
Для сопоставления
Sergey Ruban 1 year ago
Искал задание конкретно такового содержания. Спасибо за твой труд!
Hitanchuk Kabanchuk 1 year ago
Ты наилучший! Спасибо за твой труд! Безмерно признателен за эксперимент.
Nigga 1 year ago
Почему просит сделать вот это: Включите сжатие. Сжатие ресурсов с помощью gzip либо deflate может убавить число байтов, которые передаются по сети.
Илья Сосновский 1 year ago
чтоб убавить число запросов, мы подключаем сетку бутстрапа прямиком чрез style тег. окей, а что если попросту сетку бутстрапа ввозить в наш main.css, получится тот же одинешенек запрос. либо это нехорошая практика кооперировать сетку и главным css?
Дмитрий Жемчужнов 1 year ago
Сказано было в видео не одинешенек один, что сетка подключается раздельно и ранее других стилей для того, чтоб контент на страничке не рассыпался.
orionpro79 1 year ago
Так, а будто подновить LocalStorage? Я думаю многие задались этим вопросом.
Евгений Митрофанов 1 year ago
Не подскажите, может быть ли включить кэширование для yandex карты на веб-сайте?
Сергей Иванов 1 year ago
Красавчик! Всё по полочкам. Класс!
Виктор Могилевский 1 year ago
Алексей, большущее для тебя благодарю! Столько времени сэкономлено, благодаря твоим видео и наработкам. Огромное благодарю!)
WebDesign Master 1 year ago
Рад быть вам полезным.
михаил старков 1 year ago
Пытаюсь разобраться с wordpress. Установил тему, однако там дудки файлов html однако кушать index.php, в котором не могу отыскать не могу отыскать ни CSS ни js.
WINstationRU Games 1 year ago
Вопрос по поводу подключения сетки bootstrap. Понятное дело, что подключать сетку в самом html чрез style прибыльнее с точки зрения скорости загрузки странички, т.к. не употребляется добавочный запрос к серверу. Но это справедливо в основном для одностраничников. А если хватать к примеру блог, то выходит: заместо того чтоб потом первой загрузки веб-сайта закешировать одинешенек файл css, необходимо любой один подгружать более тяжкий html. Возникает проблема, если какие-то манипуляции для кеширования отдельной части кода html? Если дудки, то кому дать предпочтение в таковой ситуации, кешированию css либо томному html?
WebDesign Master 1 year ago
Если страничка малость тяжелее, чем при подключении чрез style - прибыльнее подключать в html все таки, чем мастерить запрс.
John Doe 1 year ago
Почему-бы не заавтоматизировать многие вещи по компиляции и т.д. при помощи Gulp? Сделай заготовочку под эту штуку - будет классно разворачивать и всё мастерить 1 командой.
John Doe 1 year ago
+WebDesign Master сообразил, благодарю!
WebDesign Master 1 year ago
Станислав Плясов 1 year ago
Очень отличные уроки! Спасибо! Сейчас тяжело отыскать в ютубе материал, в котором была бы тема раскрыта так отлично, будто в видео на этом канале. Хочу справиться про одинешенек момент оптимизации по PageSpeed. После того, будто в htaccess прибавляешь опции, обозначенные в этом уроке, он все равно бранится вот на что: Используйте кеш браузера для последующих ресурсов: (60 минут) (2 часа) Если понимаете, будто это сделать в htaccesse, подскажите, изволь. Заранее благодарю!
Gran Torino 1 year ago
А для чего подключать скрипты чрез функцию js? Их подключение и этак размещено потом body, т.е. они и этак загрузятся потом контента.
TheSweetLife 1 year ago
Как в cms opencart с внедрённым туда будстрапом всё это провертеть ??? файла index.html там нету
TheSweetLife 1 year ago
благодарю  ! 
Евгений Бортников 1 year ago
Подскажите, по вашему шаблону не подгружаются шрифты из _fonts.css чрез скрипт local storage, подгружаются, если лишь прописать понизу в скрипте loadCss
Н Гриша 1 year ago
+Евгений Бортников делему не удалось разрешить? У меня попросту то же самое.
Евгений Бортников 1 year ago
+WebDesign Master я использую последнюю версию _optimized_html
WebDesign Master 1 year ago
+Евгений Бортников используйте последнюю версию шаблона с импортом файла шрифтов в _main.sass либо поглядите, будто мы это реализовали.
ts ls 1 year ago
еще посильнее нажимает изображения.
ts ls 1 year ago
+Yury Blackwood Благодарю, понадобиться. Только неспешный какой-то.
Yury Blackwood 1 year ago
+Александр Чирик, этот чище работает. Сравни
Tanya Maximova 1 year ago
А можно проблема по вашей сборке: optimized_gulp_sass Она малость отличается по подключению стилей и скриптов в файле Index.html Нет compiled.min.css Он нужен либо дудки? Блока с подключением шрифтов тоже дудки. И в шапке не совершенно понятно для чего нужна секция <noscript>?? И проблема таковой, а если будет отключено у юзера помощь js то он не считая css в шапке стилей больше не увидит других в оформлении веб-сайта, этак? P.S. Спасибо за ваши уроки! Сделала для себя большущее кол-во открытий!
sp 1 year ago
А для чего этак? Можно ведь этак И получаем тот же итог :)
Алексей Васильев 1 year ago
+WebDesign Master Подскажите предложенный вариант SP лучше использовать!? либо тот что вы предлагаете!?
WebDesign Master 1 year ago
+sp Это стоит коммита, благодарю :)
Алекс Зидков 1 year ago
Спасибо, весьма здорово! Возник проблема в части того что я не увидел. Есть советы загружать скрипты с CDN и шрифты с google fonts. Например: <script src= ></script> Суть логики, будто я сообразил, в том, что при данном варианте если данные шрифты и скрипты уже кушать у юзера (в т.ч. закэшировано ранее) то уже не будет загружаться. Как это кооперировать с тем что уже показано у вас в видео?
Stabby 1 year ago
Мучает таковой проблема, когда уже все скомпилируешь, положим пройдет какое-то пора и необходимо будет поменять какой-то блок. Там же все в одну строчку сжато. Как эту делему разрешить?
WebDesign Master 1 year ago
+Stabby поменять исходники, компилировать.
Alex Kuramshin 1 year ago
Большое благодарю за Ваш труд! Share your knowledge. It is a way to achieve immortality !!!
CentralS 1 year ago
Получается у вас тут бутстрап сетка подключается наверху и еще бутстрап файлы лежат в папке libs, с точно таковой же сетью и еще дополнительными стилями, неужели этак нормально что бы код повторялся ?
WebDesign Master 1 year ago
+Stas Ryabtsev дудки ))) они попросту лежат)
CentralS 1 year ago
+WebDesign Master ок благодарю ! еще таковой проблема, а излишние файлы которые лежат не сервере однако никак не подключаются никуда, не мешают загрузке веб-сайта ?
WebDesign Master 1 year ago
+Stas Ryabtsev в таком случае необходимо будет целый бутстрап минифицированный воткнуть в хедер (CSS)
CentralS 1 year ago
+WebDesign Master а если я захочу использовать составляющие, такие будто меню кнопки и т д ? необходимо будет закомментировать код какой в хедере и подключить файл бутстрапа ?
WebDesign Master 1 year ago
+Stas Ryabtsev Bootstrap попросту лежит на сервере. Он не повторяется в коде.
Paco Official 1 year ago
что то не сообразил с компиляцией в середине видео типа компиляция css файлов, разкоментировать, воткнуть, ваще не сообразил кароч
Портал Ласун 1 year ago
Nginx не обрабатывает.htaccess, такая настройка - лишь для Апача )
Портал Ласун 1 year ago
+WebDesign Master У нас стоит вязка Nginx+Apache, в которой конкретно 1-ый несет ответственность за выдачу статического контента. Как поступать в таком случае в отношении PageSpeed?
WebDesign Master 1 year ago
+Портал Ласун может быть. Установите Апач.
Егор Недбайло 1 year ago
Привет, а подскажи будто сделать этак, чтоб появился горизонтальный скролл в index.html?
Rus 1 year ago
+Егор Недбайло снимите галку с Вид - Заворачивать строчки Если я Вас верно сообразил))
Егор Недбайло 1 year ago
+Егор Недбайло и хотелось бы узреть уроки c jade. И файлик gulpfile.js
Valerii Sergheiev 1 year ago
Загрузка бутстрапа в <style> будет резвее чем <link> наружного файла?
WebDesign Master 1 year ago
+Valerii Sergheiev ну-ка, в общем, конечно.
Ostin Free 1 year ago
Здравствуйте, Зачем в хедере подключается манера вот этак: <!-- Load CSS Compilled without JS --> <noscript><link rel= stylesheet href= compiled.min.css ></noscript> Он же вроде подключается в скрипте ниже: <!-- Load CSS compiled without Bootstrap & Header styles (after release) --> <script>var ms=document.createElement( link );ms.rel= stylesheet ; ms.href= compiled.min.css ;document.getElementsByTagName( head )[0].appendChild(ms); </script>
WebDesign Master 1 year ago
+Ostin Free нательный скрип комментится либо удаляется на продакшене.
Никита Синцов 1 year ago
не будет у вас схожее однако на практике? к примеру брать уже готовый веб-сайт и улучшить его будто вы гласите?!
Женя Калениченко 1 year ago
Алексей, выходит, что потом окончания верстки макета либо веб-сайта все стили из файла compilied.min.css мы вставляем в <header><style> -ВОТ СУДА- </style></header>??? Так же?
Никита Синцов 1 year ago
а будто в этом разобраться наименее опытнейшему человеку? будто это нужно скомпилировать?
Gran Torino 1 year ago
+Никита Синцов становится более опытным)
Владимир Петров 1 year ago
Спасибо вам за уроки весьма полезные!!! Использовал Ваш штамп для оптимизации и увидел вот какие трудности!! Загружаем веб-сайт все работает пять!! Шрифты загружаются нормально!! Перезагружаем веб-сайт => ошибки=> Jquery not defined, bootstrap requires Jquery (не лицезреет jquery) Обновляем localStorage => Все ок! Перезагружаем веб-сайт = > все Ok! Перезагружаем = > ОШИБКИ!!!!! И вот этак вот с разными вариантами то загружает без ошибок то с ошибками!!! Делал последующие: 1) Проверил пути => ok 2) Обновил bootstrap 3) Загружаю с локального этак и с рабочего хоста ошибки повторяются Подскажите плиз в чем truble?
Владимир Петров 1 year ago
Подозревал)
WebDesign Master 1 year ago
+Владимир Петров В последней версии Firefox Firebug отваливается, начались какие-то траблы с jQuery. Пока не вылечили. Пользуйтесь стандартным инспектором.
Владимир Петров 1 year ago
Mozila FireBug
WebDesign Master 1 year ago
+Владимир Петров Какой браузер, какой инспектор?
Денис Денисов 2 years ago
Тебя не смущает звук взлетающего компьютера(либо пылесоса) на заднем фоне?
HSA - Обучение | Современная охрана труда 2 years ago
Здравствуйте! Подскажите кто нибудь изволь по ситуации: Подключил fancybox (скрин по ссылке - ) Получил от firebug последующее - Error: Bootstrap's JavaScript requires jQuery bootstrap.min.js:6:36 ReferenceError: jQuery is not defined plugins-scroll.js:1:1 TypeError: b.browser is undefined Понимаю, что не верно подключаю, поясните пжл будто нужно мастерить? Да, css похоже этак же не подключается
Tom Joy 2 years ago
Подскажите изволь, на 6 мин. видео, вы гласите что уже ведали будто компилировать Grid  Bootstrap , где это видео либо статья будто это делается? Буду весьма признателен.
Владимир Петров 2 years ago
Красавчик.Просто красавец))) Очень немало времени сберег благодаря твои урокам. Держи респект!!
WebDesign Master 2 years ago
+Владимир Петров Благодарю! )))
Alex Shalov 2 years ago
А будто включить сжатие странички?
Beladzed 1 year ago
+Михаил Гайдай Хостингу напишите в ТП, если этого в админке дудки
Alex Shalov 1 year ago
+Михаил Гайдай дудки
Михаил Гайдай 1 year ago
+Alex Shalov у вас вышло разрешить этот проблема?
Anser One 2 years ago
Зачем стили из отдельной папки в корень переброшены?
Дмитрий Власов 2 years ago
будто то рассказываете ! можно ли схематично и поэтапно объяснить какой скрипт что подгружает а то здесь этак здесь сяк не че неясно здесь магический скрипт здесь расчудесный скрипт и все инфа весьма отменная благодарю создателю лишь если я не знаю про капиляцию и т.п. и попросту желаю ускорить веб-сайт лендос на HTML  че мне мастерить то
Павел Зарубин 7 months ago
Умнеть. Для таких, будто ты, кушать master-css
Alex Fedotov 2 years ago
Если в шапке веб-сайта употребляются иконки font-awesome, то они не появятся покамест не загрузится font-awesome.min.css. Можно ли какие то стили иконок выплеснуть в head, чтоб они загружались сходу?
Tony Arty 2 years ago
+Alex Fedotov в главный файл стилей либо чрез import, либо прям воткнуть стили иконок в главный файл стилей. И в head будет не два.css файла, а одинешенек. Ну либо инлайном стили иконок и линком style.css в head. Я стили шрифтов обыкновенно чрез import в главный файл стилей, либо, если шрифтов не достаточно, то прям в главный файл стилей их вставляю. В общем чтоб меньше плодить запросов в head.
Alex Fedotov 2 years ago
+Tony Arty в шапке использую три иконки, придется выносить все стили?
Tony Arty 2 years ago
+Alex Fedotov ввозить font-awesome.min.css в ваш файл стилей.
Alex Fedotov 2 years ago
PageSpeed Insights также советует использовать кеш браузера для будто его закешировать?
Юлия Бабченко 2 years ago
Очень животрепещущая тема. бесит когда заходишь  с телефона, а веб-сайт не может в кучу скопиться. Хотелось бы, естественно, по-подробнее. благодарю! ждем продолжения этой темы
ferym26 2 years ago
привет не могу одолеть подключение шрифтов: на локальном сервере их не видать, потом загрузки на хостинг - работают. будто сделать что бы были видны всюду. запускаю на openserver-e проекты
WebDesign Master 2 years ago
+ferym26 Проверьте пути, почистите кеш.
ferym26 2 years ago
ШРИФТ НЕ ПОДКЛЮЧАЕТСЯ!
Arcanennik 2 years ago
Покажите изволь скомпилированный веб-сайт,уже готовый. Хотелось бы узреть это в работе.
Будь здоров 2 years ago
+Arcanennik
ferym26 2 years ago
Привет. И у меня вопросик: скрипты не подключаются в FF. Параллельно смотрю в Хроме - там всё ок. UPD: если поменять src : js/common.js , async : false на true, то тогда в мозиле работает, а в хроме - дудки О_о
Василий Шевченко 2 years ago
Этот вариант дает 100% итог! Интересно если подключить bootstrap.min, нужен ли в шапке Bootstrap Grid Styles?
Василий Шевченко 2 years ago
+WebDesign Master Спасибо! Да любопытно! В шапке километр кода:) PageSpeed Insights пишет 100%! лишь CSS Validation Service бранится.
WebDesign Master 2 years ago
Если это тема для Bootstrap - то лучше ее инлайнить на то пункт, где на данный момент grid. Заменить в head стили.
Василий Шевченко 2 years ago
+WebDesign Master я бы желал поменять манера (тему от bootswatch<point>com) bootstrap.min, это может быть, либо дефолтный резвее работает? а bootstrap.min.js тоже подключен?
WebDesign Master 2 years ago
+Василий Шевченко А он уже кушать :) Только подключен инлайново в HTML.
Ivan Bindusov 2 years ago
Вообщем все понятно покамест, все выходит(скрипты, стили все подключается), не считая 1-го, шрифты будто не желают подключаться, пути инспектировал, что лишь не делал, не выходит ничего. Верстаю я не так давно совершенно, немало не знаю. В чем можеть быть проблемма? Буду весьма признателен.
WebDesign Master 2 years ago
+Ivan Bindusov Проверьте пути еще внимательней и запустите в другом браузере для проверки.
Viktor Ivanov 2 years ago
Спасибо огромное за задание. У меня кушать проблема, я прописал ваш htaccess  однако рокот все равно пишет (60 минут) (2 часа), будто это можно обогнуть?
WebDesign Master 2 years ago
+Виктор Иванов также было увидено схожее. За кеширование скриптов со посторониих серверов здешний htaccess, как досадно бы это не звучало, не отвечает.
Владимир Кулаксизов 2 years ago
Можно Ваше имя выяснить? У меня два глобальный вопроса, решение которых ищуь на данный момент многие, может быть Вы понимаете их решение. 1. На многих хостингах функция mail не работает либо работает нехорошо весьма из-за блокировки антиспам сервисов. SMPT не весьма хочеться настраивать на каждом веб-сайте, в особенности если делаешь веб-сайт клиенту. Есть ли какой-то решение у Вас? 2. Увидел у Вас на веб-сайте Таймер оборотного отчёта и вот проблема: будто сделать авто-обновление таймера к примеру чрез каждых три денька? Через одинешенек денек и сам могу, а вот чрез несколько дней уже дудки.
Владимир Кулаксизов 2 years ago
Честно говоря не всё понятно. Почему вы объясняете не на числом html, в смысле что не все употребляют bootstrap на данный момент. И если у меня к примеру не лендинг, а блог, тогда в _header.css необходимо запихнуть практически все стили веб-сайта, не считая футера что-ли? )))
Владимир Кулаксизов 2 years ago
+WebDesign Master А Disqus неплохой, я не так давно пользуюсь, однако веб-сайт совсем не грузит, минус лишь в наружных ссылках, однако будто я уже увидел, его употребляют пользующиеся популярностью веб-сайте если замечали. Тем более кушать модерация и всё такое. Уверен, что Ваш веб-сайт забъётся комментами стремительно)
Владимир Кулаксизов 2 years ago
+WebDesign Master Вставил из.htaccess Ваш код - посодействовало малость. Для мобильных ранее была 56% стало 63%. Для компьютер. этак и осталось, однако все равно итог кушать хоть какой-то))) Спасибо. По поводу остального, даже не знаю, что получится, этак будто я пишу cms-ку бесплатную и в ней кушать папка с шаблонами веб-сайта, вот будто бы этак сделать что бы любой подключаемый штамп был подстроен будто у вас, наверняка не от меня зависит)))
WebDesign Master 2 years ago
Хорошо, рад посодействовать. Я бы подключил DISQUS, мне будто система достойная.
Владимир Кулаксизов 2 years ago
+WebDesign Master Быстрая реакция))) Это веселит, этак будто на данный момент уникальность, что бы создатель видео отвечал этак стремительно и вообщем отвечал. Теперь сообразил сущность видео, однако вопросы естественно ещё задам, этак будто весьма любопытно узнавать что-то новое, подпишусь на Ваш канал. Вы бы сделали на веб-сайте авторизацию чрез соц.сети либо подключите скрипт комментариев DISQUS либо подобные, комментов было бы больше, сам желал бросить, однако не стал длительно протекать рег. По теме: т.е. если я все стили и скрипты расположу в под-папках, то ничего не поменяться? На счёт сжатие скриптов и кеша, на данный момент попробую воплотить и отвечу непременно на сколько прирастил скорость загрузки собственного веб-сайта. Спасибо за видосик, буду следить)
WebDesign Master 2 years ago
+Владимир Кулаксизов постарался скопить все в одном шаблоне, бест практис этак произнести :) Место, где бутстр вы можене увидеть другим фреймом либо вырезать вообщем. Хотелось показать конкретно на примере бутстрапа. Стили с первого экрана, не непременно все. В корне - поэтому, что вам может придти в конце проекта в голову мысль сделать все стили инлайново в html файле. Чтобы не переписывать пути в css файлах. Почему-то показалось, что это будет удобнее.
Vinder Ornitier 2 years ago
Очень жду практического внедрения данного шаблона в ваших видио. Нужно осознать на примере будто, что и чем лучше сжимать, куда верно вставлять и что устранять/подменять если оно уже идет на продакшен. Спасибо за ваш труд! Вопросов и истина немало, однако это лишь поэтому, что Вы это делаете весьма любопытно.
Vinder Ornitier 2 years ago
+Vinder Ornitier сам и отвечу).delay отвечает за сам умозаключение отображения содержимого веб-сайта. Preloader, будет вертится в зависимости от скорости загрузки странички. Впредь буду внимательней.
Vinder Ornitier 2 years ago
+WebDesign Master Алексей, свойство.delay в скрипте к preloader'у (в _clean_html) не изменяет его задержку при загрузке. Будет ли верным обвернуть все в setTimeout? JS лишь учу, прошу помилование за глуповатый проблема. Только этак вышло удлинить анимацию, однако верно ли это?
WebDesign Master 2 years ago
+Vinder Ornitier В последующих уроках джедая.
default ! 2 years ago
Мужик. Проверил своим веб-сайты. Практически все 70 / 100
Арсений Конохов 2 years ago
Подскажи изволь в каком касте ты говорил про GRIDbootstrap (6:00)?
Андрей Андреев 2 years ago
Леш, подскажи изволь, скрипт подгрузки шрифта из сборки. все перепробовал, линия в _fonts.css верный, чистил кэш, различные браузеры пробовал - не подгружается В консоли две ошибки: 1 - XMLHttpRequest cannot load . Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. 2 - Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load ''. Спасибо для тебя за то, что ты делаешь! Огромное благодарю!
Александр Гамов 2 years ago
+Андрей Андреев Это прикол хрома, он не весьма любит грузить с локалки, для этого нужно или пути прописывать чрез или запускать хром с флагом -allow-file-access-from-files и вроде кушать метод чрез расширенные опции это ограничение прибрать, точно не помню :)
Андрей Андреев 2 years ago
На серваке работает! С теми же способами. Похоже закипел, пора отключать компьютер) Проблема в том, что я пробовал отворить html файл, в нем шрифт не грузится, а на серваке файл php, с ним все работает пять. Чувак, ты слышал это немало один, однако наш брат будет повторять это неумолимо - благодарю для тебя!)  Твои уроки совершенно точно наилучшее из итого что кушать! Спасибо!
WebDesign Master 2 years ago
+Андрей Андреев Попробуй раскатать сервак, к примеру чрез препрос либо апач запустить. Из написанного очевидно вижу, что пути не правильные. Судя по ошибкам. Стараюсь.
Сергей Баев 2 years ago
По поводу кеширования, не все хостинги поддерживают настройку кеширования чрез.htaccess. Например у меня на reg.ru этак не получится
Sergey 1 year ago
+Сергей Баев У меня тоже рег.ру, напиши в тех.поддержку, они включат.
WebDesign Master 2 years ago
+Сергей Баев Да, об этом я упомянул в видео.
Phil M 2 years ago
большой-преогромный плюс :) и благодарю!
danyamarow69 2 years ago
Алексей,если у Вас будет пора сделайте изволь задание по верстке бэкэнда,у Вас афигеть какие достойные внимания уроки!!
Василий Шевченко 2 years ago
Интересно, по теме, стоит ли убирать коментарии из кода?
Andrew Garyga 2 years ago
+Василий Шевченко ключевое слово ненадобные , я думаю, они имели ввиду комменты, которые разработчик пишет сам для себя в процессе выполнения.
Василий Шевченко 2 years ago
+WebDesign Master В Google PageSpeed написано: После того будто веб-сайт был оптимизирован, чтоб трудиться с разными устройствами и загружать принципиальный контент в первую очередность, уменьшите число данных, нужных для отображения странички: Уменьшите объем ресурсов. Объем HTML, CSS и JavaScript можно понизить, удалив ненадобные пробелы и комменты.
WebDesign Master 2 years ago
+Василий Шевченко Их пишут для того, чтоб облегчить существование для себя и разработчикам, которые будут поддерживать проект. Какой-же тогда резон строчить, если позже все равно придется устранять?
Василий Шевченко 2 years ago
+WebDesign Master В Bootstrap шаблонах немало комментариев: молвят удаление упрощает код.
WebDesign Master 2 years ago
+Василий Шевченко Еще бы отыскать таких разработчиков, которые их пишут :D Нет, смысла дудки особенного.
Art iGanza 2 years ago
Будет что по нативному js, либо может по препроцессорам css ?
Vladimir Glushich 2 years ago
У меня адаптивный веб-сайт с 10 размерами ширины экрана. Как я пропишу схожую шапку в HTML, ведь шапки изменяются?:), а валидация будто же? Никак. А будто разъяснять это заказчику? Совет неплохой, однако использовать его проблемно. 2. У вас немало скриптов - а если у пользователя он отключен? Вообще ничего не увидит человек. 3. Больше запросов выходит - мелкота, а неприятно. 4. за htaccess благодарю.
Vladimir Glushich 2 years ago
Переписал цсс - поделил на хедер.цсс и попросту цсс. Сервер на данный момент висит, замерять скорость загрузки не могу; а на локальном сервере ничего не осознать. Спасибо за подсказки! Возьмусь на данный момент за.htaccess
Vladimir Glushich 2 years ago
В этом смысле  - согласен стопроцентно!
WebDesign Master 2 years ago
+Vlad Volgin Этот запрос +- 1 полезней, чем сжатие всех CSS в одинешенек файл, этак будто несет определенный резон. Понятное дело, что трафик канала будет таким-же, главное хорошо его распределить, чтоб юзер не увидел подгрузку. Субъективно это будет смотреться будто мгновенно загружаемый веб-сайт. А это здорово.
Vladimir Glushich 2 years ago
Спасибо за уделенное пора. Да, 10 файлов CSS у меня прописаны одним файлом и подходящий файл подключается медиа-запросом.  Эту доля кода можно вычленить, скопить в отдельный CSS и вписать в HTML.  Получаем еще одинешенек запрос на этот CSS. Ну конечно хорошо:) Если веб-сайт простой, то, мне будто, затеваться смысла дудки. Другое дело, если это портал; еслиэто  большенный, на несколько экранов, монстр со обилием картинок, колонок с текстом.
WebDesign Master 2 years ago
Кажется, я еще сообразил 1-ый проблема. Если 10 шапок, означает все 10 оформляете в _header.css и располагаете head сжатую на продакшен.
Andrey Klementev 2 years ago
Замечательные уроки! Сделай изволь задание по созданию спрайтов.
Dmitriy Stail 2 years ago
у меня, покамест что, появился одинешенек проблема - здесь подгружаются стили и шрифты чрез скрипты, однако я не увидел решения для тех, у кого в браузере в принципе скрипты отключены. потому, как я понимаю, у их вообщем будет белоснежная страничка. будто быть с этой категорией юзеров? (конечно, я понимаю что таких юзеров не немало, однако они кушать) зы. я предполагаю, нужно коротать некоторую проверку на то, работают ли у пользователя скрипты либо дудки, и подсовывать ему соответственный файл index.html. будто это воплотить?
WebDesign Master 2 years ago
+Dmitriy Stail Да, правильно. В noscript также нужно продублировать, апдейтю последующим коммитом. Спасибо, что направили внимание. Благодаря таким будто вы мир становится лучше.
Mega Coder 2 years ago
Чувак благодарю для тебя за твои уроки. Я вроде бы и проходил обучение обучение на фронтендщика платное, однако видимо половины там не осознавал. Сделал по твоему туториолу творение лендинг пейдж, это хотя и заняло немало времени (32 часа) однако я прям чувствую будто скилл адаптивной верстки вырос))
dimaixi 2 years ago
будет ли что-нибудь по препроцессорам? предположу что Вы пользуетесь SASS(иконка рубби в строке браузера)? С чем же был связан выбор? P.S. не для холивара ради(хотя, будто я сообразил любимая тема :D), немало читал статей на хабре и тостере, и в тоге не решил для себя совершенно точно, что же лучше LESS vs SASS vs Stylus(статьи староваты, конечно и некоторе молвят LESS'a хватает c головой). - что же учить.думаю LESS мне хватит для основы, а там уже поглядим SASS либо Stylus. Интересно было бы взглянуть что-нибудь по собирателям - Gulp/Grunt/Brunch. Успехов Вам!
Павел Ильченко 2 years ago
вопросов не немало , однако задавать не буду , буду ожидать урока по верстке шаблона с внедрением итого этого чуда. Спасибо
Павел Ильченко 2 years ago
+WebDesign Master )
WebDesign Master 2 years ago
+Павел KLON Ахаххх чуда :D
Андрей Кот 2 years ago
Из-за янедкс метрики тоже бока, повсевременно на неё показывает чтобы уменьшить.
Александр Машталир 2 years ago
+Андрей Кот Забей на нее. Там асинхронная подгрузка
Alexander 2 years ago
В лекции Виталия Фридмана для Mail.ru гласили будто один об этом, однако для собственного веб-сайта он брал попросту первую 1000px веб-сайта и инлайново кидал в HTML. Тогда они все это делали вручную, это на данный момент делают всякие собиратели проектов.
Арсений Конохов 2 years ago
+WebDesign Master  critical path (если мне не изменяет память) тема крутая. Посмотри чей репоз) Надежно!
deviks 2 years ago
+Main благодарю.
Alexander 2 years ago
+xrom8796 большая часть склоняются к gulp.
deviks 2 years ago
+WebDesign Master Спасибо за задание! А что лучше использовать gulp либо grunt?
WebDesign Master 2 years ago
+Main Абсолютно согласен - ни кто не мешает сделать задание для гранта по сборке css и js. это будет в отдельном уроке - я будто один поразмыслил сделать задание по таскам.
VLThemes 2 years ago
Что означает компиляция. Просто скопировать все css использованные на веб-сайте в одинешенек?
WebDesign Master 2 years ago
+Rudy - Ray - Rama Да, скопить все в кучу и сделать в одну строчку. Можно с помощью онлайн сервисов по запросу в Google compress css & js либо сделать задачку для галпа либо гранта.