Jednym z najlepszych sposobów zapewnienia płynnego działania kodu w starszych przeglądarkach i powolnych komputerach jest wydajne pisanie CSS. W ten sposób witryna zajmuje mniej zasobów i pamięci z komputera użytkownika, a zatem działa płynniej.
Twórcy przeglądarek nieustannie starają się przyspieszyć renderowanie. Im szybciej strony się ładują, tym bardziej ludzie korzystają z ich produktów. Google zawsze prowadzi krucjatę, aby przyspieszyć działanie sieci. Mozilla ma również kilka artykułów na temat najlepszych praktyk.
Kilka sposobów na przyśpieszenie renderowania CSS
Aby uniknąć niepotrzebnych przeładowań i odświeżeń, zawsze określ szerokość i wysokość dla wszystkich obrazów, pozwala to przeglądarce renderować stronę nawet przed pobraniem obrazów, w przeciwnym razie przeglądarka będzie wymagać ponownego załadowania i odświeżenia po pobraniu obrazów. Możesz określić szerokość i wysokość wszystkich obrazów, albo w tagu HTML img, albo w CSS. Jeśli potrzebujesz mniejszych obrazów, przeskaluj je w edytorze obrazów i ustaw odpowiednie wymiary, unikaj używania specyfikacji szerokości i wysokości do skalowania obrazów w locie.
Zawsze umieszczaj zewnętrzne bloki CSS i style w sekcji head. Określenie zewnętrznych arkuszy stylów i wbudowanych bloków stylów w treści dokumentu HTML może zająć znacznie więcej czasu, zanim przeglądarka wyrenderuje dokument.
Selektory CSS3 (np. first-child) są niesamowite, pomagając nam stylizować elementy, jednocześnie utrzymując nasz kod w czystości i semantyce. Ale w rzeczywistości te fantazyjne selektory wymagają więcej zasobów przeglądarki. Smutnym faktem związanym z tymi selektorami jest to, że nie powinieneś ich używać, jeśli zależy Ci na wydajności strony www.
Aby uzyskać najbardziej efektywne renderowanie dla danej strony, można po prostu przesadzić, nadając każdemu elementowi na stronie unikalny identyfikator i stosując styl z selektorami pojedynczego identyfikatora. Jest niezwykle nie semantyczny i niezwykle trudny w utrzymaniu. Nawet najbardziej wymagające witryny nie poświęcają łatwości konserwacji ani semantyki na rzecz wydajnego CSS.
Równie dobrze możesz robić to co oni, ale nie powinieneś być do tego dogmatyczny. Może warto sprawdzić CSS i poszukać lepszych rozwiązań, zwłaszcza jeśli docelowi odbiorcy korzystają głównie z urządzeń mobilnych o ograniczonej mocy obliczeniowej. Może to być ratownik, w przeciwnym razie nie martw się.
Podsumowanie
Te najlepsze praktyki wymagają pewnych wstępnych inwestycji, ale koszt jest niewielki – zwłaszcza w porównaniu z zyskami. Po wprowadzeniu tych ulepszeń nadal zwiększają wydajność przez cały czas trwania procesu rozwoju. Mam nadzieję, że te zasady będą eleganckimi ulepszeniami, które przyniosą korzyści Tobie i Twoim użytkownikom.