11 Sty 2019

Jak przyspieszyć ładowanie CSS

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 😉