Preloading and Prefetching Webpage Assets

Подписаться 101 тыс.

Просмотров 27 тыс.

50% 1

When you are looking to create great efficiencies for your webpages, one of the things you can do to save time is preload or prefetch assets such as fonts, images, styles, scripts, audio or video files.
Make use of time where the browser is not busy to retrieve and cache files for the user.
CODE GIST: gist.github.com/prof3ssorSt3v...
MDN preload reference: developer.mozilla.org/en-US/d...

Опубликовано:

20 июн 2018

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 30

@antonmladenov 4 года назад

Awesome, Steve!

@rakibahmed5202 5 лет назад

Nice explanation guy thanks

@cyrilmorin9547 3 года назад

Well explained, thx !

@bobobo1673 3 года назад

Great video, thanks

@absamindiacatra1901 4 года назад

what is wrong if i put the preload link at the very top of the pages. I mean even before ? I thought it is a hint to the browser about what to load first and then the next. Correct my understanding: Preload - High priority (good for fonts and at the top of the page css) Prefetch - Low priority (down to the footer css) Prerender - Prefetch + render (good for video). defer/async for js.

@SteveGriffith-Prof3ssorSt3v3 4 года назад

The Doctype MUST be the first line in every HTML file, no exceptions. preload is for assets that you want to use on the current page. prefetch is for future pages and assets that you are not going to use now but are for the user when they navigate away from this page. Load all your CSS for the current page through link tags that are grouped together to load at the same time, with no preload or prefetch. Both preload and fetch are used in the head of the html file. Doesn't matter where in the head. defer and async are for JS - I have a separate video on those. They are different.

@absamindiacatra1901 4 года назад

@@SteveGriffith-Prof3ssorSt3v3 I see. tnx. only if

@SteveGriffith-Prof3ssorSt3v3 4 года назад

@@absamindiacatra1901 if you are creating pages with PHP, then the very first line of output must be the html doctype.

@nomadealex Год назад

Can i setting a timeout for start the transition from pré-Load at principal html page? How?

@SteveGriffith-Prof3ssorSt3v3 Год назад

setTimeout should not be used for animations. If you want to start a script running based on an event then you have to listen for that event - window.DOMContentLoaded or window.load or window.readystatechange If animating something in your UI then loading or preloading scripts isn't really a good trigger to do things. You want your interface animations tied to when things happen in the interface and user interactions. Instead of setTimeout use requestAnimationFrame to control your animations. - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-zBRqnSiq_VM.html

@Yetipfote 4 года назад

I have a question: at 2:00 you said that rel="preload" is used to load a resource AFTER all other resources while the browser is rendering the page. But the MDN documentation says > ... which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance. I am confuseld. Can you explain?

@SteveGriffith-Prof3ssorSt3v3 4 года назад

A webpage can be open for days. The content on the page can be dynamically loaded at any time or after any interval. Preload gets resources that will likely be used in the future, during the lifecycle of the page.

@Yetipfote 4 года назад

@@SteveGriffith-Prof3ssorSt3v3 well but this doesn't distinguishes it from any other resource loaded on the page, does it?

@SteveGriffith-Prof3ssorSt3v3 4 года назад

@@Yetipfote It is to preload and cache things for later use.

@aminkhaled4758 3 года назад

So that means that if I put images and videos on my webpage and put the preload as videos Videos will display and appear before images? Is that what preload used for ? It is like onload event ?

@SteveGriffith-Prof3ssorSt3v3 3 года назад

@@aminkhaled4758 no. Preload is for assets that you will need later. Think about the user clicking a "more" button and then you show an image. If the image has been preloaded it appears immediately

@randiapriliyadirahmat5230 3 года назад

what about dns-prefetch and preconnect ?

@SteveGriffith-Prof3ssorSt3v3 3 года назад

All these are roles being filled now more by service workers. I will be doing more tutorials on those soon

@EnglishRain 3 года назад

Great video, thanks! But for me, "prefetch" worked correctly for my single webpage app. "preload" didn't make any difference.

@SteveGriffith-Prof3ssorSt3v3 3 года назад

It all depends on what you are doing with the assets

@EnglishRain 3 года назад

@@SteveGriffith-Prof3ssorSt3v3 Yes, i think i need to study more about preload & prefetch. Even the Prefetch works properly only for my PWA, & not the actual webpage.

@SteveGriffith-Prof3ssorSt3v3 3 года назад

@@EnglishRain If you are building PWAs then you would be using the Service Worker to accomplish a lot of this too.

@EnglishRain 3 года назад

@@SteveGriffith-Prof3ssorSt3v3 True, but for my webpage to make the first run lag-free for the user, i'm having to use the "prefetch" in the HTML. Otherwise the webpage & even the PWA lags on the initial run as images are not pre-loaded into cache.

@brantazena7419 2 года назад

is this a script to speed up blog loading, can it be installed on a NON AMP blogger?

@SteveGriffith-Prof3ssorSt3v3 2 года назад

preloading and prefetching is to help make any webpage more efficiently load.

@shujaatonline 4 года назад

what about prerender?

@SteveGriffith-Prof3ssorSt3v3 4 года назад

That is something different - on the serverside.

@globalcomplianceservice-us5745 4 года назад

Hi guys, wondering if you can assist me with a problem please, i am struggling for a while now and cont figure it out, I"m getting an error message on my google page speeds insights : "Warnings: A preload was found for "gcsregistrar.com/" but was not used by the browser. Check that you are using the `crossorigin` attribute properly." when i expand the message it points to this url: "gcsregistrar.com/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.woff2?5.6.2" I tried to optimize my website to get the fastest load speed but i just can seem to figure my way around this one in my wordpress. Can anyone assist in pointing my in the right direction please, I would really appreciate it.