A JS és CSS webhelykód optimalizálása online – részletes útmutató

nyomtatás · Время на чтение: 8мин · Автор: · Опубликовано · Обновлено

szaporodniHallgassa meg a cikket

JS és CSS kód optimalizálás.

Weboldal JS és CSS kód optimalizálása, az egyik legfontosabb szempont weboldal technikai optimalizálás. Ennek oka az adatbázishívások csökkenése és magának a kódszerkezetnek a jobb olvashatósága miatt több webhely-erőforrás felszabadítása.

Általában, JavaScript és CSS kód optimalizálása jelentősen megnöveli a webhely válaszadási sebességét. Így az oldal gyorsabban működik, és kevésbé komolyan terheli a szerverrészt.

JS és CSS webhelykód – mi ez?

Hogyan optimalizáljuk a JS-t és a CSS-t.

JavaScript és CSS elterjedt programozási nyelvek, amelyek mindegyike bizonyos funkciókat hoz a webhelyre. A fő webes programozási nyelvek HTML, JS, CSS használatának köszönhetően ideális felhasználói interakció érhető el az oldallal.

JavaScript egy elterjedt programozási nyelv. Lehetővé teszi különféle szkriptek létrehozását. A legtöbb ilyen szkript a felhasználó böngészőjében fut le. A JavaScript javítja a felhasználó interakcióját az oldallal. Bizonyos információk megjelenítése minialkalmazások (szkriptek) segítségével a webhelyen. A JS szkriptek megjelenítése és kimenete az utóbbiak összekapcsolásával történik az oldal HTML kódjában. Szinte minden webhely JS-t (JavaScript) használ az összetételében.

css - az oldal egyik fő programozási nyelvére utal. CSS (stílusfájl) - információkat hordoz az oldal szinte bármely elemének megjelenéséről. A színtől és a helyszíntől egy adott oldalelem hírhedt animációjáig.

JS és CSS kód optimalizálása – miért van rá szükség?

JS és CSS - önmagukban meglehetősen nagy súlyú kóddal rendelkeznek, amelyben sok felesleges. Egy böngészőnek nehéz a másodperc törtrésze alatt elolvasni egy hatalmas kódvászont. Így lelassul az oldal és az egész oldal betöltése. Ezeknek a fájloknak az optimalizálása a kód méretének csökkentését célozza, minden felesleges levágását. Ez a következőkre vonatkozik:

  • Fel nem használt és extra karakterek;
  • terek;
  • Befejezetlen és nem működő kódsorok.
Maga a folyamat hasonló a normál fájl tömörítéséhez. Az utóbbi súlya és mérete sokkal kisebb lesz. Ennek ellenére a kód teljesen olvashatatlanná válik az emberek számára. De a keresőrobotok és a böngészők tökéletesen megkerülik és megértik a fájl teljes szerkezetét. A körben eltöltött idő többszörösére csökken. Ennek a tömörítésnek köszönhetően nő a letöltési sebesség és javul az általános válasz.

Gzip modul Apache, Nginx és Node.js számára

A Gzip egy csodálatos technológia, amelyet akkor hoztak létre, amikor az internet még nem volt olyan gyors, mint manapság. Az archiválás népszerű technológia volt (a népszerűségük azóta csökkent, mivel az USB flash meghajtók akár 1 TB tárhelyet is biztosítanak).

Az ötlet az volt, hogy archiválókat használjanak az internetes webforgalomhoz (hasonlóan a webhelyfájlok létrehozásához), ezért a gzip-et a webszervereken lévő fájlok tömörítésére tervezték úgy, hogy a statikus (szöveges) fájlokat az eredeti méretük 99% méretűre tömörítik. Mivel a JavaScript egy szöveges fájl, a gzip használható JavaScript-fájlok tömörítésére, valamint az oldalak betöltési idejének csökkentésére.

Optimalizálja a Javascriptet kicsinyítéssel

Az optimalizálás a JavaScript kicsinyítés egy speciális típusa. Az ilyen minimalizálók nemcsak eltávolítják a felesleges szóközöket, vesszőket, megjegyzéseket stb., hanem segítenek elkerülni a „halott kódot” is:

  • Google bezárási fordító
  • UglifyJS
  • Microsoft AJAX minifier

CSS-optimalizálás webes betűtípus-használathoz

A Google Fonts és a hasonló betűtípusgyártók forradalmasították a webes betűtípusokat, de néhány soros betűtípus kódja több száz kilobájt sávszélességet is felemészthet.

  1. Csak a szükséges betűtípusokat töltse le: távolítsa el a nem használt betűtípusokat, és ellenőrizze, hogy szükség van-e új betűtípusokra.
  2. Csak a szükséges súlyokat és stílusokat töltse le: A legtöbb betűtípus-gyártó korlátozhatja a letöltést bizonyos karakterkészletekre (például csak latin), súlyokra (vastagság) és dőlt betűkre (ferde). A böngészők automatikusan megjeleníthetik a hiányzó stílusokat, bár az eredmények gyengeek lehetnek.
  3. Korlátozza a szükséges karakterek számát: A ritkán használt betűtípusok bizonyos karakterekre korlátozhatók. Például a "CSS oktatóanyag" cím az Open Sans programban úgy határozható meg, hogy hozzáadja a & text= paramétert a Google Fonts lekérdezési karakterláncához: fonts.googleapis.com/css? family=Open+Sans&text=CStuorial
  4. Vegye figyelembe a változó betűtípusokat: A változó betűtípusok stílusok, súlyok és dőlt betűk széles skáláját határozzák meg vektorinterpoláció segítségével. A font fájl valamivel nagyobb, de csak egy kell, nem több. A rekurzív betűtípus a változó betűtípusok rugalmasságát mutatja.
  5. Töltse le a betűtípusokat a helyi szerverről. Az önkiszolgáló betűtípusok hatékonyabbak. Kevesebb DNS-keresésre van szükség, és korlátozhatja a WOFF2 betöltését, amelyet minden modern böngésző támogat. A régebbi böngészők (IE) visszatérhetnek az operációs rendszer betűtípusához.
  6. Fontolja meg az operációs rendszer betűtípusait: Ez az 500 000 webes betűtípus remekül néz ki, de észreveszi valaki, ha átvált a köztulajdonban lévő Helvetica, Arial, Georgia vagy Verdana használatára? Az operációs rendszer számára biztonságos vagy webes betűtípusok egyszerű módja a termelékenység javításának.

A megfelelő betűtípus letöltési lehetőség használatával

A webes betűtípusok betöltése és feldolgozása néhány másodpercig tarthat. Szükséged van:

  1. Egy villanásnyi stílus nélküli szöveg megjelenítése (FOUT): A rendszer először az első elérhető tartalék betűtípust használja, de lecseréli, amikor a webes betűtípus készen áll.
  2. Láthatatlan szöveg felvillanása (FOIT): A szöveg addig nem jelenik meg, amíg a webes betűtípus készen nem áll. Ez az alapértelmezett folyamat a modern böngészőkben, amelyek általában három másodpercet várnak, mielőtt visszaállnának egy tartalék betűtípusra.
    Egyik sem tökéletes.
A font-display CSS-tulajdonság és a Google Font & display= beállítás választhat alternatívát:
  • auto: A böngésző alapértelmezett viselkedése (általában FOIT).
  • blokk: Hatékonyan FOIT. A szöveg legfeljebb három másodpercig láthatatlan. Nincs betűtípuscsere, de egy idő után megjelenhet a szöveg.
  • csere: Hatékonyan FOUT. Az első tartalékot addig használjuk, amíg a webes betűtípus elérhetővé nem válik. A szöveg azonnal olvasható, de a betűtípuscsere hatás bosszantó lehet. A Font Style Matcher használható hasonló méretű tartalék definiálására.
  • tartalék: kompromisszum a FOIT és a FOUT között. A szöveg rövid ideig láthatatlan (általában 100 ms), majd az első tartalékot használják, amíg a webes betűtípus elérhetővé válik.
  • opcionális: Hasonló a tartalékhoz, azzal az eltéréssel, hogy nincs betűkészlet-csere. A webes betűtípus csak akkor kerül felhasználásra, ha a kezdeti időszakban elérhető. Az első oldalnézet nagy valószínűséggel a tartalék betűtípust jeleníti meg, míg a további oldalnézetek a letöltött és gyorsítótárazott webes betűtípust fogják használni.

A csere, a biztonsági mentés vagy az opcionális használata észrevehető teljesítménynövekedést biztosíthat.

JS és CSS kód optimalizálás online

Az interneten meglehetősen nagy számú online szolgáltatás található. Amik néhány perc alatt képesek elvégezni a JavaScript- és stílusfájlok tömörítésének minden rutinmunkáját. Mindegyiknek megvan a saját algoritmusa a kóddal való munkához. E sokszínűség hátterében két legjelentősebb szolgáltatás különíthető el. A hatékony tömörítési küszöbük sokkal magasabb, mint a hasonló versengő online eszközöké. Nézzük meg közelebbről ezt a két internetes eszközt:

cssresizer.com
A 84% tömörítési hatékonysága a közeli versenytársakhoz képest. A kód érvényessége még jelentős tömörítés mellett is megmarad. Így nagyszerű optimalizált kódot kaphat. Az eszközzel való munkavégzés intuitív, és számos tömörítési módszer létezik:

  • Maximális;
  • gyors;
  • Dekompresszió;

Tömörítheti a következőket:

  • URL - cím;
  • Fájlfeltöltés;
  • Közvetlen kódbevitel;

CSSResizer - Professzionális CSS-tömörítés.

Refresh-sf.com

Egy másik, de ugyanolyan hatékony webes felület a JavaScript, CSS és HTML minimalizálásához. Az eszköz az UglifyJS 2-t, a Clean-CSS-t és a HTML Minifier-t használja a működéshez. A tömörítési hatékonyság ebben az esetben eléri a 85%-t, a kód érvényességének látható megsértése nélkül. A tömörítés a kód közvetlen beírásával végezhető el az eszköz ablakában.

A Refresh-SF egy online JavaScript és CSS tömörítő.

Minimalizálja a JS-t és a CSS-t a CMS Wordpress beépülő moduljaival

Mint mindannyian tudjuk, jelentős elterjedése van az egész világon. A 2018-as adatok szerint ez a cms vezető helyet foglal el. Vegyünk néhány népszerű optimalizálási beépülő modult kifejezetten a WordPresshez:

Beépülő modul engedélyezése

HTML, JS és CSS optimalizáló bővítmény. Ez az egyik legnépszerűbb bővítmény a CMS Wordpress webhelyeinek felgyorsítására. Egyszerű és funkcionális konfigurációs felülettel rendelkezik. A tömörítési folyamat menet közben történik.

  • Optimalizálás (HTML, JS, CSS) és CDN beállítása.
  • Hangulatjelek, Google betűtípusok, lekérdezési karakterláncok eltávolítása statikus forrásokból.
  • Kép optimalizálása.

Automatizálás – a beépülő modul tömöríti a stílusokat/szkripteket/HTML-t.

Webcraftic Clearfy plugin

Nem olyan régi, mint az előző plugin. De a hasonló versenytársak körében is keresett és népszerű. Webcraftic Clearfy - meglehetősen bonyolult konfigurációs felülettel rendelkezik. A legjobb eredmény érdekében bővítmények kombinált kombinációjából áll.

A beállítási oldalak menürészekre vannak felosztva. Így lehetőség van a webhely bizonyos részei, például a HTML optimalizálására. Mit tud ez a plugin?

  • Optimalizálás (képek, JS, CSS, HTML és szkriptek);
  • Cirill betűs átírás és a másolatok eltávolítása. Munka az alt attribútumokkal és a megfelelő robots.txt létrehozása. Munka a szerver fejléceivel és válaszaival.
  • A nem igényelt WordPress widgetek eltávolítása.
  • A WordPress verzió elrejtése és a lekérdezési változók eltávolítása a statikus lekérdezésekből. A szerző bejelentkezési adatai és az adminisztrátori bejelentkezési oldal elrejtése.
  • A megjegyzések globális eltávolítása vagy tisztítása. Mentse el az irányítást a megjegyzésekben.
  • A WordPress pulse és a felső adminisztrációs panel beállítása.
  • A plugin összetevőinek vezérlése.

A Webcraftic Clearfy egy ingyenes optimalizáló bővítmény.

Összegzésképpen egy bizonyos következtetést le lehet vonni. A fentiek alapján a js és a css tömörítése nem olyan nehéz dolog. Ezeknek a műveleteknek köszönhetően projektje válaszideje jelentősen megnő.

Köszönjük, hogy elolvasta Nicola Topot

Mennyire hasznos a poszt?

Kattintson a smiley-ra az értékeléshez!

átlagos értékelés 5 / 5. Értékelések száma: 14

Még nincsenek értékelések. Értékelje először.

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

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

Az e-mail címet nem tesszük közzé. Обязательные поля помечены *

három × 3 =