Podam dwa sposoby na przyspieszenie renderowania się stron.
I. Sposób
Pierwszy sposób dotyczy najnowszych przeglądarek ale w przyszłości będzie działać wszędzie. Tego sposobu używa aliexpress.com 🙂 Chyba największy sklep na świecie, więc czy Chińczycy mogą się mylić 😉
Poniższy przykład wyrenderuje stronę dopiero wtedy kiedy przetworzy całą zawartość app.css
<head>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<header class="page-header">...</header>
<section class="sidebar">...</section>
<main class="content">...</main>
<footer class="page-footer">...</footer>
</body>
Możemy lekko poprawić wydajność powyższego rozwiązania a przynajmniej tak nam się może wydawać.
<head>
<link rel="stylesheet" href="common.css" />
<link rel="stylesheet" href="page-header.css" />
<link rel="stylesheet" href="sidebar.css" />
<link rel="stylesheet" href="content.css" />
<link rel="stylesheet" href="page-footer.css" />
</head>
<body>
<header class="page-header">...</header>
<section class="sidebar">...</section>
<main class="content">...</main>
<footer class="page-footer">...</footer>
</body>Niestety ale powyższe rozwiązanie pod http/2 połączy wszystko i będzie tak samo działo jak rozwiązanie pierwsze czyli blokowało renderowanie strony.
Inne podejście które używa aliexpress.com to umieszczanie styli w samym body w poszczególnych sekcjach. Przeglądarka renderuje poszczególne sekcje niezależnie od siebie. Coś na styl web components.
<head>
<link rel="stylesheet" href="common.css" />
</head>
<body>
<link rel="stylesheet" href="page-header.css" />
<header class="page-header">...</header>
<link rel="stylesheet" href="sidebar.css" />
<section class="sidebar">...</section>
<link rel="stylesheet" href="content.css" />
<main class="content">...</main>
<link rel="stylesheet" href="page-footer.css" />
<footer class="page-footer">...</footer>
</body>II. Sposób
Praktycznie wszystkie strony posiadają skrypt google analytics który umieszczamy w head. Zazwyczaj przed zamknięciem head i tutaj jest błąd.
Okazuje się ze takie rozwiązanie jak poniżej jest błędne bo tak jak w przykładzie pierwszym renderuje się najpierw cały css, a później tworzony jest script.
<head>
<link rel="stylesheet" href="style.css" />
<script>
var script = document.createElement('script');
script.src = 'speed.js';
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>Wystarczy zmiana kolejności wykonywania się elementów.
<head>
<script>
var script = document.createElement('script');
script.src = 'speed.js';
document.getElementsByTagName('head')[0].appendChild(script);
</script>
<link rel="stylesheet" href="style.css" />
</head>Oczywiście najlepszym rozwiązaniem jest dodanie async do skryptów i wtedy nasz problem znika 😉