CSS-bestanden combineren
Elk CSS-bestand dat u voor uw website gebruikt, voegt tijd toe aan de laadsnelheid van uw pagina. Soms is dit onvermijdelijk, maar in de meeste gevallen kunt u twee of meer CSS-bestanden combineren met niets meer dan “kopiëren en plakken”.
Vaak is de enige reden waarom u meerdere CSS-bestanden gebruikt, omdat uw website-ontwerper het gemakkelijker vond om met afzonderlijke bestanden te werken. CSS-code maakt het niet uit waar het zich bevindt of in hoeveel bestanden het zich bevindt. Eén CSS-bestand dat alle informatie van uw afzonderlijke CSS-bestanden bevat, zal net zo goed werken en uw paginasnelheid verbeteren.
Omdat alle CSS-bestanden standaard worden geblokkeerd, is het essentieel om zo min mogelijk CSS-bestanden te hebben.
Door al uw CSS in één bestand te plaatsen, vermindert u aanzienlijk de tijd die nodig is om uw webpagina’s te laden, omdat u het aantal dingen dat de webbrowser moet laden voordat uw pagina wordt weergegeven, vermindert.
Tip – Om te bepalen hoeveel CSS-bestanden uw webpagina’s laden, gebruikt u de CSS-bezorgtool die elk bestand weergeeft dat wordt aangeroepen.
WordPress en CSS
U moet speciale aandacht besteden aan deze richtlijn als u WordPress gebruikt. Vrijwel elk WordPress-thema heeft verschillende CSS-bestanden die worden geladen. Als u vindt dat dit het geval is met uw blog en u zich comfortabel voelt bij het bewerken van bestanden, kunt u de inhoud van elk van de CSS-stijlbladen die worden aangeroepen, opnemen in het hoofd CSS-bestand (degene die u vaak zult vinden wanneer u opent “Uiterlijk> Editor” vanaf uw dashboard). Vergeet niet om de oproepen te verwijderen voor de CSS die u hebt gecombineerd.
Hoe uw CSS te combineren
U kunt de inhoud van elk CSS-bestand vaak gewoon kopiëren en plakken om één CSS-hoofdbestand te maken.
Soms worden er veel CSS-bestanden opgeroepen en kunt u slechts één nieuw CSS-bestand maken dat alle inhoud van de andere bevat.
kopieer de inhoud van het ene css-bestand en plak het in een ander om ze te combineren
Met deze methode blijven al uw oude CSS-bestanden veilig en krijgen ze de juiste naam als u ernaar terug moet gaan. U zou dan uw HTML bijwerken om het nieuwe bestand aan te roepen en alle oproepen voor de oude bestanden te verwijderen.
Vaak hebt u slechts twee of drie CSS-bestanden en kunt u de inhoud van één gewoon toevoegen aan een bestaand bestand …
Laten we bijvoorbeeld zeggen dat u drie css-bestanden hebt …
main.css
other.css
third.css
In deze situatie kunt u uw “other.css” openen, de inhoud van dat bestand kopiëren en in “main.css” plakken.
Je zou hetzelfde kunnen doen voor “third.css”.
Zodra u dat hebt gedaan, verwijdert u de aanroep voor “other.css” en “third.css” uit uw HTML. U hebt nu slechts één CSS-bestand in plaats van drie dat een webbrowser moet downloaden voordat uw webpagina wordt weergegeven. Uw webpagina wordt nu sneller geladen.
laadvolgorde van css
Andere CSS-optimalisaties en onderwerpen door Patrick Sexton
Misschien wilt u uw CSS-levering verder optimaliseren zoals aanbevolen 1 door Google …
Inline css.
Vermijd de import css-methode (@import).
Meer informatie over het blokkeren van CSS.
Meer informatie over de CSSOM.
