Prezentacja przygotowana na webinar Semrush 01.2021

1. JavaScript
Performance
Jak ładujemy skrypty i jakie ma to
znaczenie?
Barbara Gaca-Tworek

3. Ładowanie
skryptów

4. <script>
//inline script
</script>
<script src=„/script.js”>
</script>

5. Najważniejsze czynniki
Network
Jak JavaScript konkuruje z
innymi zasobami.
Parser
Jak JavaScript wpływa na
parsowanie HTMLa.

6. Optymalnie
ładowany skrypt
Nie wykorzystuje sieci bardziej niż to konieczne
(adekwatny priorytet ładowania) oraz możliwie
nie opóźnia renderowania strony.

7. Parser
HTML
JS
Network
1. Klasyczne podejście
<script>
//inline script
</script>
<script src=„/script.js”>
</script>
</head>
High priority
(Chrome, Edge, Safari, Firefox)

8. Parser
HTML
JS
Network
2. Skrypty ładowane na końcu HTML
<script>
//inline script
</script>
<script src=„/script.js”>
</script>
</body>
High priority
(Chrome, Edge)Medium priority
(Safari, Firefox)

9. BBC: 284 kb
Amazon: 517 kb
Walmart: 200 kb
HTML
https://http.cat/404
19 kb

10. Parser
HTML
JS-1
Network
3. Skrypty ładowane asynchronicznie
<script async
src=„/script.js”></script>
High priority
(Chrome, Edge, Safari)Low priority
(Firefox)
JS-2

11. Parser
HTML
JS-1
Network
4. Skrypty „odroczone” (defer)
<script defer
src=„/script.js”></script>
High priority
(Chrome, Edge)Low priority
(Firefox, Safari)
JS-2

12. <script defer
src=„/script.js”></script>
<link rel=„preload”
href=„/script.js” as=„script”>

13. Podsumowanie
Async Defer
Wysoki priorytet.
Blokuje parser na
pobieranie i
przetwarzanie
Head
Średni / wysoki priorytet.
Blokuje parser na
pobieranie i przetwarzanie
Bottom of HTML
Niski priorytet.
Niezachowana kolejność skryptów.
Pobieranie JS nie blokuje parsera
HTML.
Blokuje parser na przetwarzanie JS.
Niski / wysoki priorytet.
Zachowana kolejność skryptów.
Nie blokuje parsera HTML.
Skrypty przetwarzane są zaraz po
złożeniu DOM.

14. CREDITS: This presentation template was created by
Slidesgo, including icons by Flaticon, infographics &
images by Freepik and illustrations by Stories
THANKS!
W razie pytań można mnie łapać na
LinkedIn i Twitterze!

15. Warto przeczytać
1. Scripts: async, defer (JavaScript.info, 2019)
2. Efficiently load JavaScript with defer and async (flaviocopes,2018)
3. Asynchronous vs Deferred JavaScript (Ire Aderinokun,2017)