Chciałbym wdrożyć kiedyś obsługę krytycznego CSS w Sealpage’u. Komponenty zgłaszałyby niektóre style jako krytyczne i te style byłyby osadzane w <style> u góry dokumentu HTML, dzięki czemu będą mogły być aplikowane bez czekania na wczytanie głównego pliku CSS. Krytyczny CSS oznacza CSS potrzebny do poprawnego wyrenderowania strony “above the fold” - tzn pierwszego ekranu, który widzi użytkownik, przed zescrollowaniem na dół.
Trochę więcej detali technicznych umieściłem tutaj:
https://hub.sealcode.org/T1601
O ile style niektórych komponentów w oczywisty sposób zasługują na miano krytycznych (np. navbar - zawsze będzie się wyświetlał u góry strony, więc jego style będa zawsze potrzebne na samym początku ładowania strony). Z innymi komponentami już nie jest tak fajnie - bo musimy określić, czy dany komponent jest umieszczony u góry strony, czy nie - i na podstawie tej informacji zrobić style inline lub idące do osobnego pliku CSS.
Widzę dwie główne opcje rozwiązania tej niepewności - zachęcam do komentowania i/lub proponowania kolejnych:
-
Licznik komponentów na stronie
Zliczamy, ile już wyrenderowaliśmy komponentów na danej stronie. Ustalamy jakiś punkt graniczny - np. pierwsze 3 (albo inna, konfigurowalna liczba) komponenty zawsze są oznaczone jako krytyczne
-
Szacowanie rozmiarów komponentów
Komponenty podają swój minimalny rozmiar pionowy w widoku desktopowym w pikselach. Przy każdym renderowanym komponencie badamy jego minimalny rozmiar i dodajemy do aktualnej puli. gdy pula przekroczy np. 1000px, to przestajemy oznaczać komponenty jako krytyczne
Obydwie z powyższych opcji wymagają implementacji jakiegoś mechanizmu zliczającego ilosć dotychczas wyrenderowanych komponentów dla danej podstrony. Pewnie wystarczyło by robić + na jakimś liczniku przy każdym wywołaniu funkcji render klasy Component - nie trzeba będzie w tym celu zmieniać kodu każdego komponentu z osobna.
Komponenty będą dostawały informację o tym, czy są krytyczne czy nie, i na tej podstawie samodzielnie będa podejmowały decyzję o tym, czy i które ze swoich styli oznaczać jako krytyczne.
Będę wdzięczny za wszelkie przemyślenia i komentarze