CSS optimaliseren voor sitesnelheid - 9 manieren

afdrukken · Probeer het eens: 6мин · Автор: · Опубликовано · Обновлено

reproducerenLuister naar artikel

Website css-optimalisatie.

Een trage site is altijd slecht! Ik denk de zin optimalisatie van CSS-code om de site te versnellen, is ook vaak aanwezig in de zoekopdracht 301 omleiding of robots.txt. Of misschien ben jij het soort ontwikkelaar dat websites indient zonder zich druk te maken over optimale prestaties?

Als u tot de eerste optie behoort, dan is dit artikel iets voor u. Nu zal ik je vertellen over 9 beste manieren om je te helpen je CSS te optimaliseren. Deze tips zullen versnel uw website en stijging van de uitgifte. Dit effect zal de stroom van nieuwe bezoekers naar uw site aanzienlijk vergroten.

Het belang van sitesnelheid voor organische ranking

CSS-code optimaliseren voor sneller laden van de site.

U zult verrast zijn over het belang van snellere websites. Er zijn verschillende hoofdredenen, maar hun invloed heeft een aanzienlijke invloed op de positie van de site. Hoofdredenen:

  1. Websitebezoekers houden er niet van om lang te wachten tot een pagina volledig is geladen;
  2. Uw klanten komen zeker terug naar de site als deze snel werkt Snellere sites scoren altijd hoger in zoekmachines;
  3. Ook sitesnelheid voegt waarde toe aan uw SEO-strategie;
Deze bronnen zijn gewoon geweldig en maken een geweldige indruk. Wat zou u nu doen om uw site sneller te maken? Natuurlijk kan het verbeteren van deze situatie veel acties van u vergen.

Bijvoorbeeld het upgraden van uw server, RAM, opslag of hardware in het algemeen.Maar wist u dat de belangrijkste reden voor een trage site in uw broncode ligt? Gebrek aan geoptimaliseerde CSS is de meest voorkomende reden. Dit betekent dat het verkleinen van de bestandsgrootte van uw stylesheet met zelfs maar een paar kilobytes een aanzienlijke invloed zal hebben op de laadtijd van uw pagina.

Gebruik Image Sprites

CSS Sprites is een manier om meerdere afbeeldingen te combineren tot één afbeeldingsbestand. Gebruik het verder op de website om de prestaties te verbeteren. Dit gebruik van beeldsprites is een oude techniek. Als het gaat om het verkleinen van de CSS-bestandsgrootte en het verkorten van de laadtijden van pagina's, is deze techniek een must.

Met afbeeldingssprites kunt u afbeeldingen verpakken in één groot .png-bestand. Deze methode vermindert HTTP-verzoeken en versnelt de laadtijden van pagina's. Een afbeeldingssprite is een uitstekende keuze als u veel pictogrammen en afbeeldingen op uw site gebruikt. Deze optie vermindert aanzienlijk de overhead van het extraheren van meerdere afbeeldingen.

CSS-optimalisatie

CSS inkorten is simpelweg uw bestand comprimeren tot een nieuw bestand met zo min mogelijk spaties. Hoe kleiner de code, hoe sneller deze wordt gelezen door de browser van de gebruiker.

U hoeft dit natuurlijk niet handmatig te doen, want er zijn automatische compressoren op internet. Alleen dankzij zulke eenvoudige online tools is het mogelijk om binnen enkele minuten compressie uit te voeren. Hier is zo'n minifier: http://www.cssminifier.com

Verminder onnodige code

We hebben geen herhaalde code nodig. Dergelijke code vertraagt het laden van elementen aanzienlijk. De browser moet herhaaldelijk dubbele code doorlopen en besteedt hier een fractie van een seconde extra aan.Een andere truc om de laadsnelheid van pagina's te verhogen, is het verminderen van onnodige code. Een dergelijke verbetering kan worden bereikt door te controleren op overbodige of dubbele code.

Zet CSS-tabellen in de koptekst en JS-scripts in de voettekst

Het is een goede gewoonte om de stylesheet bovenaan te plaatsen (tussen de head-tags) en de JavaScript-code onderaan. Zorg ervoor dat uw code wordt geladen voordat de rest van de pagina wordt geladen. De belangrijkste reden om JavaScript onderaan de site te plaatsen, is het grote formaat. Evenals de verdere impact op de snelheid van de website. Daarom worden dergelijke scripts onderaan de site geplaatst. Hierdoor kunnen ze na de hoofdcomponenten van de pagina worden geladen.

De essentiële stijlen die nodig zijn om de inhoud bovenaan de pagina vorm te geven, zijn inline en worden onmiddellijk toegepast op het document. Het volledige small.css-bestand wordt geladen na de eerste weergave van de pagina. De stijlen worden op de pagina toegepast nadat deze is geladen, zonder de eerste weergave van kritieke inhoud te blokkeren.

Sluit geen big data-URI's in

Wees voorzichtig bij het insluiten van gegevens-URI's in stijlbestanden. Hoewel het zinvol kan zijn om kleine data-URI's in uw CSS te gebruiken, kan het insluiten van big data-URI's ervoor zorgen dat uw CSS groter wordt aan de bovenkant van de vouw, waardoor de weergavetijd van de pagina wordt vertraagd.

Sluit geen CSS-kenmerken in

Het insluiten van CSS-attributen in HTML-elementen (zoals ) moet zoveel mogelijk worden vermeden, omdat dit vaak leidt tot onnodige duplicatie van code. Ook wordt inline CSS in HTML-elementen standaard geblokkeerd door Content Security Policy (CSP).

CSS-bestanden scheiden

U kunt ook CSS-bestanden scheiden, d.w.z. verschillende stylesheets. Als u zich bijvoorbeeld op meerdere browsers richt, zoals IE, Chrome of Firefox. In plaats van bijvoorbeeld te controleren op CSS-hacks in één stylesheet, kunt u IE-conditionele statements gebruiken om een andere stylesheet te laden (bijvoorbeeld voor IE6), zodat u geen IE-code laadt wanneer u Chrome gebruikt. Dit zal de bestandsgrootte aanzienlijk verkleinen.

Verminder het aantal spaties in uw code

Probeer altijd het aantal spaties in uw stylesheet te verminderen. Toenemende witruimte neemt vrije bytes in beslag. Dit kan bij zeer grote projecten het verschil maken tussen een snellere en tragere site.Door het aantal witruimtes te verminderen, wordt de grootte van het bestand verkleind. Zo versnellen we het downloaden van het bestand vanwege het lagere gewicht.

Documenteer je code

U moet uw code waar mogelijk documenteren. Het gebruik van opmerkingen zoals /* Reageer hier */ kan u helpen bij het identificeren van nutteloze code. Hoewel het toevoegen van opmerkingen veel ruimte in beslag neemt, is het gemakkelijk om ze te verwaarlozen.In sommige gevallen worden nutteloze opmerkingen gewoon verwijderd. Met deze techniek kunt u op een zeer productieve manier overtollige CSS verwijderen.

Organiseer uw code

CSS-code optimalisatie is een techniek waar velen niet eens aan zouden denken om erover te praten. Op veel niveaus kan het organiseren van uw code u zelfs helpen de bestandsgrootte aanzienlijk te verkleinen. Hierdoor verhoog je de snelheid van je site, ik vraag me af hoe? Het is heel simpel.

Plaats uw CSS-klassen in de juiste set branches. Deze methode garandeert minimale duplicatie. Ongeorganiseerde code is een veelvoorkomend probleem bij modern webdesign. In sommige scenario's is het organiseren van uw rommelige code in hiërarchische takken alles wat u nodig heeft om uw site te laten laden.Probeer CSS-hacks in een enkele stylesheet te vermijden. Gebruik in plaats daarvan de methoden die worden aangegeven in de punten 5 en 8.

KISS-techniek (Keep it Simple Stupid)

Het laatste woord is om ervoor te zorgen dat alles wat je doet in overeenstemming is met de KISS-techniek. KISS staat voor Keep it Simple Stupid. Als je weer een bestand aanmaakt! Dan ben je zeker op de goede weg naar georganiseerde, goed geschreven, minder overbodige en schone code. Zoals je kunt zien, is het optimaliseren van CSS niet moeilijk. Vooral in sommige gevallen kun je rondkomen met een paar paragrafen van dit artikel. Deze technieken helpen de site soms te versnellen.

Bedankt voor het lezen Nicola Top

Hoe nuttig is de post?

Klik op de smiley om te beoordelen!

gemiddelde score 4.9 / 5. Aantal beoordelingen: 16

Er zijn nog geen beoordelingen. Beoordeel eerst.

Читайте также:

Добавить комментарий

Het e-mailadres wordt niet gepubliceerd. Обязательные поля помечены *

6 + twee =