JS- en CSS-sitecode online optimaliseren - een gedetailleerde gids

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

reproducerenLuister naar artikel

JS- en CSS-code-optimalisatie.

Website JS- en CSS-code-optimalisatie, is een van de belangrijkste aspecten website technische optimalisatie. De reden hiervoor is het vrijgeven van meer sitebronnen, dankzij de vermindering van database-oproepen en verbeterde leesbaarheid van de codestructuur zelf.

Gebruikelijk, optimalisatie van JavaScript en CSS-code verhoogt de reactiesnelheid van de site aanzienlijk. Zo werkt de site sneller en wordt het servergedeelte minder zwaar belast.

JS- en CSS-sitecode - wat is het?

Hoe JS en CSS te optimaliseren.

Javascript en CSS zijn gemeenschappelijke programmeertalen, die elk bepaalde functionaliteit aan de site toevoegen. Dankzij het gebruik van de belangrijkste webprogrammeertalen HTML, JS, CSS wordt een ideale gebruikersinteractie met de site bereikt.

javascript is een veelgebruikte programmeertaal. Hiermee kunt u verschillende scripts maken. De meeste van deze scripts worden uitgevoerd in de browser van de gebruiker. JavaScript verbetert de interactie van de gebruiker met de site. Een bepaalde set informatie naar buiten brengen met behulp van mini-applicaties (scripts) op de site. Visualisatie en uitvoer van JS-scripts vindt plaats door deze laatste te verbinden in de HTML-code van de pagina. Bijna alle sites gebruiken JS (JavaScript) in hun samenstelling.

CSS - verwijst naar een van de belangrijkste programmeertalen van de site. CSS (stijlbestand) - bevat informatie over het uiterlijk van bijna elk element van de site. Van kleur en locatie tot de beruchte animatie van een bepaald pagina-element.

Optimalisatie van JS- en CSS-code - waarom is het nodig?

JS en CSS - op zichzelf hebben ze een vrij grote, zware code die veel overbodig is. Het is moeilijk voor een browser om een enorm canvas met codes in een fractie van een seconde te lezen. Het laden van de pagina en de hele site als geheel vertraagt dus. De optimalisatie van deze bestanden is gericht op het verkleinen van de code en het afsnijden van al het overbodige. Dit heeft betrekking op:

  • Ongebruikte en extra karakters;
  • spaties;
  • Onvoltooide en niet-functionele coderegels.
Het proces zelf is vergelijkbaar met het comprimeren van een gewoon bestand. Het gewicht en de grootte van de laatste wordt veel kleiner. Maar toch wordt de code volledig onleesbaar voor mensen. Maar zoekrobots en browsers omzeilen en begrijpen perfect de volledige structuur van het bestand. De tijd die aan de ronde wordt besteed, wordt verschillende keren verkort. Dankzij deze compressie neemt de downloadsnelheid toe en verbetert de algehele respons.

Gzip-module voor Apache, Nginx en Node.js

Gzip is een geweldige technologie die is gemaakt in een tijd dat internet niet zo snel was als nu. Archiveringsmiddelen waren een populaire technologie (ze zijn sindsdien in populariteit afgenomen omdat USB-flashstations tot 1 TB aan opslagruimte kunnen bieden).

Het idee was om archiveringsmiddelen te gebruiken voor webverkeer op internet (vergelijkbaar met het maken van websitebestanden), dus gzip is ontworpen om bestanden op webservers te comprimeren door statische (tekst)bestanden te comprimeren tot 99% van hun oorspronkelijke grootte. Omdat JavaScript een tekstbestand is, kan gzip worden gebruikt om JavaScript-bestanden te comprimeren en de laadtijden van pagina's te verkorten.

Optimaliseer Javascript met minificatie

Optimalisatie is een speciaal type JavaScript-verkleining. Dergelijke minimalizers verwijderen niet alleen onnodige spaties, komma's, opmerkingen, enz., maar helpen ook om "dode code" te vermijden:

  • Google sluitingscompiler
  • UglifyJS
  • Microsoft AJAX-minifier

CSS-optimalisatie voor het gebruik van weblettertypen

Google Fonts en vergelijkbare makers van lettertypen hebben een revolutie teweeggebracht in weblettertypen, maar een paar regels lettertypecode kunnen honderden kilobytes aan bandbreedte verbruiken.

  1. Download alleen de lettertypen die u nodig hebt: verwijder ongebruikte lettertypen en controleer of er nieuwe lettertypen nodig zijn.
  2. Download alleen de gewichten en stijlen die u nodig hebt: de meeste lettertypefabrikanten kunnen downloads beperken tot bepaalde tekensets (bijvoorbeeld alleen latin), gewichten (dikte) en cursief (schuin). Browsers kunnen automatisch ontbrekende stijlen weergeven, hoewel de resultaten slecht kunnen zijn.
  3. Beperk het aantal tekens dat u nodig hebt: Zelden gebruikte lettertypen kunnen worden beperkt tot bepaalde tekens. De titel "CSS Tutorial" in Open Sans kan bijvoorbeeld worden gedefinieerd door de parameter & text= toe te voegen aan de queryreeks van Google Fonts: fonts.googleapis.com/css? family=Open+Sans&text=CStuorial
  4. Overweeg variabele lettertypen: Variabele lettertypen definiëren een grote verscheidenheid aan stijlen, gewichten en cursief met behulp van vectorinterpolatie. Het lettertypebestand is iets groter, maar je hebt er maar één nodig, niet meerdere. Het recursieve lettertype demonstreert de flexibiliteit van variabele lettertypen.
  5. Download lettertypen van uw lokale server. Zelfhostende lettertypen zijn efficiënter. Er zijn minder DNS-lookups nodig en u kunt het laden van WOFF2, dat door alle moderne browsers wordt ondersteund, beperken. Oudere browsers (IE) kunnen terugkeren naar het OS-lettertype.
  6. Overweeg OS-lettertypen: dit 500K weblettertype ziet er misschien geweldig uit, maar zal iemand het opmerken als u overschakelt naar het publieke domein Helvetica, Arial, Georgia of Verdana? OS-veilige of webveilige lettertypen zijn een gemakkelijke manier om de productiviteit te verbeteren.

Gebruik de juiste downloadoptie voor lettertypen

Het kan enkele seconden duren voordat weblettertypen zijn geladen en verwerkt. Jij hebt nodig:

  1. Toon een flits van niet-opgemaakte tekst (FOUT): Het eerste beschikbare fallback-lettertype wordt als eerste gebruikt, maar wordt vervangen wanneer het weblettertype gereed is.
  2. Toon flits van onzichtbare tekst (FOIT): De tekst wordt pas weergegeven als het weblettertype gereed is. Dit is het standaardproces in moderne browsers, die meestal drie seconden wachten voordat ze terugkeren naar een fallback-lettertype.
    Geen van beide is perfect.
De CSS-eigenschap font-display en de instelling Google Font & display= kunnen een alternatief kiezen:
  • auto: Standaard browsergedrag (meestal FOIT).
  • blok: Effectief FOIT. Tekst is maximaal drie seconden onzichtbaar. Er is geen lettertypevervanging, maar de tekst kan na een tijdje verschijnen.
  • swap: Effectief FOUT. De eerste fallback wordt gebruikt totdat het weblettertype beschikbaar is. De tekst is direct leesbaar, maar het effect van het vervangen van lettertypen kan vervelend zijn. De Font Style Matcher kan worden gebruikt om een fallback van vergelijkbare grootte te definiëren.
  • terugval: een compromis tussen FOIT en FOUT. De tekst is korte tijd onzichtbaar (meestal 100 ms), daarna wordt de eerste fallback gebruikt totdat het weblettertype beschikbaar is.
  • optioneel: Vergelijkbaar met de fallback, behalve dat er geen lettertypevervanging is. Het weblettertype wordt alleen gebruikt als het in de beginperiode beschikbaar is. Bij de eerste paginaweergave wordt hoogstwaarschijnlijk het fallback-lettertype weergegeven, terwijl volgende paginaweergaven het gedownloade en in de cache opgeslagen weblettertype gebruiken.

Het gebruik van swap, back-up of optioneel kan een merkbare prestatieverbetering opleveren.

JS- en CSS-code-optimalisatie online

Op internet is er een vrij groot aantal online services. Die in een paar minuten al het routinematige werk kunnen doen van het comprimeren van JavaScript en stijlbestanden. Ze hebben allemaal hun eigen algoritmen voor het werken met code. Tegen de achtergrond van een dergelijke diversiteit kunnen twee belangrijkste diensten worden onderscheiden. Hun effectieve compressiedrempel is veel hoger dan vergelijkbare concurrerende online tools. Laten we deze twee webtools eens nader bekijken:

cssresizer.com
Compressie-efficiëntie van de 84% in vergelijking met naaste concurrenten. De geldigheid van de code blijft behouden, zelfs bij aanzienlijke compressie. Op deze manier kunt u geweldige geoptimaliseerde code krijgen. Het werken met deze tool is intuïtief en er zijn verschillende compressiemethoden:

  • Maximaal;
  • snel;
  • Decompressie;

U kunt comprimeren door:

  • URL - adres;
  • Bestand upload;
  • Directe code-invoer;

CSSResizer - Professionele CSS-compressie.

Refresh-sf.com

Een andere maar even krachtige webinterface voor het verkleinen van JavaScript, CSS en HTML. De tool gebruikt UglifyJS 2, Clean-CSS en HTML Minifier om te werken. De compressie-efficiëntie bereikt in dit geval 85%, zonder zichtbare schendingen van de codegeldigheid. Compressie kan worden gedaan door de code rechtstreeks in het toolvenster in te voeren.

Refresh-SF is een online JavaScript- en CSS-compressor.

Verklein JS en CSS met CMS WordPress-plug-ins

Zoals we allemaal weten, heeft het een aanzienlijke verspreiding over de hele wereld. Volgens de gegevens van 2018 neemt dit cms een leidende positie in. Overweeg een paar populaire optimalisatie-plug-ins specifiek voor WordPress:

Autoptimize-plug-in

HTML-, JS- en CSS-optimalisatie-plug-in. Het is een van de meest populaire plug-ins voor het versnellen van sites op CMS Wordpress. Het heeft een eenvoudige en functionele configuratie-interface. Het compressieproces gebeurt on the fly.

  • Optimalisatie (HTML, JS, CSS) en CDN-instellingen.
  • Emoji's, Google-lettertypen, zoekstrings van statische bronnen verwijderen.
  • Mogelijkheid om afbeeldingen te optimaliseren.

Autoptimize - plug-in comprimeert stijlen/scripts/HTML.

Webcraftic Clearfy-plug-in

Niet zo oud als de vorige plug-in. Maar het is ook in trek en populair bij vergelijkbare concurrenten. Webcraftic Clearfy - heeft een nogal ingewikkelde configuratie-interface. Bestaat uit een gecombineerde combinatie van plugins, voor het beste resultaat.

De instellingenpagina's zijn onderverdeeld in menusecties. Zo is het mogelijk om specifieke onderdelen van de site te optimaliseren, bijvoorbeeld HTML. Wat kan deze plug-in doen?

  • Optimalisatie (afbeeldingen, JS, CSS, HTML en scripts);
  • Cyrillische transliteratie en verwijdering van duplicaten. Werken met alt-attributen en het maken van de juiste robots.txt. Werken met serverheaders en hun antwoorden.
  • Niet-opgeëiste WordPress-widgets verwijderen.
  • De WordPress-versie verbergen en queryvariabelen uit statische query's verwijderen. De login van de auteur en de admin-loginpagina verbergen.
  • Wereldwijde verwijdering of opschoning van opmerkingen. Bewaar de controle in de opmerkingen.
  • Opzetten van WordPress pulse en top admin panel.
  • Controle over plug-incomponenten.

Webcraftic Clearfy is een gratis optimalisatie-plug-in.

Concluderend kan een bepaalde conclusie worden getrokken. Op basis van het bovenstaande is het comprimeren van js en css niet zo moeilijk. Dankzij deze acties zal de responssnelheid van uw project aanzienlijk toenemen.

Bedankt voor het lezen Nicola Top

Hoe nuttig is de post?

Klik op de smiley om te beoordelen!

gemiddelde score 5 / 5. Aantal beoordelingen: 14

Er zijn nog geen beoordelingen. Beoordeel eerst.

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

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

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

3 × vijf =