Hogyan lehet javítani az oldal teljesítményét és kihozni a legtöbbet a tárhelyből

Ingyenes JavaScript könyv!

Írjon hatékony, tiszta és karbantartható JavaScript-et.

lehet

Ezt a cikket a Hosting Facts szponzorálta. Köszönjük, hogy támogatja a szponzorokat, akik lehetővé teszik a SitePoint használatát.

Hónapokat tölthet el egy csodálatos weboldal készítésével, csak hogy az utolsó szakaszban cserbenhagyja magát a nem megfelelő optimalizálás vagy tárhely miatt.

Az átlagos oldaltömeg elérte a 2300 KB-ot, és évente körülbelül 15% -kal nő. Az olyan projektek növekedése, mint a Google Accelerated Mobile Pages, a Facebook Instant Articles és a hirdetésblokkolók, kiemeli a felhasználók csalódottságát az általunk létrehozott web iránt. Elhízott oldalak:

  • lassabban tölthetők be és renderelhetők
  • küzd a mobil hálózatokon, és pénzbe kerülhet a felhasználóknak
  • kevésbé reagálnak lassabb eszközökön és okostelefonokon
  • hatással lesz a keresőmotorok rangsorára
  • nehezebb frissíteni és karbantartani.

Kevés fejlesztő veszi fontolóra webhelyeinek optimalizálását, miért kellene?

Az ok: nincs hátránya. A keresőmotorok rangsora javul. A felhasználóinak előnye a gyengébb élmény. Konverziói növekednek. Csökkennek a tárhely díjai. A való élettől eltérően a legdrasztikusabb fogyás minimális erőfeszítéssel érhető el…

Webhelyelemző eszközök

A változtatások végrehajtása előtt értékelje a problémák mértékét. Számos ingyenes eszköz áll rendelkezésre, amelyek jelentik a kérések számát, a fájlméreteket és a szerver válaszidejét. Egyesek fejlesztési javaslatokat adnak.

Alternatív megoldásként használja a Hálózat vagy Profilozó eszközök a böngésző fejlesztői eszközeiben, hogy felmérje webhelyét. Készítsen másolatot a statisztikákról, hogy később összehasonlíthassa a fejlesztéseket.

A következő szakaszok optimalizálási javaslatokat nyújtanak a legegyszerűbb módosításokkal kezdve.

Keressen megfelelő webszolgáltatót

Lehet, hogy webhelyének létrehozása jelentős időt és pénzt igényelt. Ha valóban havi 5 dolláros szolgáltatással látja el?

Szánjon időt annak felmérésére, hogy szüksége van-e helyre egy megosztott kiszolgálón, saját magánkiszolgálón vagy egy felhőalapú virtuális kiszolgálón. Olvassa el a tárhely-áttekintéseket olyan webhelyeken, mint a Tárhely-tények, és kérjen tanácsot másoktól, akiknek hasonló követelményei vannak. Ebben a pillanatban javasolják az A2 Hosting vagy az A Small Orange használatát.

Tartalomszolgáltató hálózat (CDN) használata

A böngészők tartományonként négy és nyolc egyidejű kapcsolatra korlátozzák a HTTP-kéréseket. 40 oldalas tartalom egyszerre történő betöltése nem lehetséges - a fájlok minden kérési szálon sorban vannak.

Ezenkívül előfordulhat, hogy a felhasználók a szerverétől eltérő földrajzi helyen találhatók. Egy franciaországi felhasználó gyorsabban reagálna egy brit szerverről, mint az ausztrál hasonló hardver.

A CDN növeli a letöltési sebességet azáltal, hogy a webhely eszközeit más szerverekre terjeszti. Ezek a gépek fizikailag közelebb lehetnek a felhasználóhoz, és különböző tartományokról futtathatók, amelyek több mint kétszeresére növelik a HTTP kérési korlátokat.

A CDN-ek használata egyszerűbbé vált, és sokan automatikusan kezelik az eszközöket, miután konfigurálták a DNS-beállításokat. A népszerű lehetőségek a következők:

Engedélyezze a GZIP tömörítést

A webhelyek körülbelül egyharmada nem engedélyezi a Gzip-tömörítést, de drasztikusan csökkentheti a böngészőbe küldött adatok mennyiségét. A Gzip-tömörítést gyakran a webszolgáltató állítja be a szerveren - további tanácsért forduljon hozzájuk.

Engedélyezze a gyorsítótárat

A gyorsítótárazás biztosítja, hogy a böngésző egyszer letöltse az eszközfájlokat. A helyi verzió megmarad, amíg webhelye nem utasítja a frissítés beolvasására. Az első oldal betöltése nem lesz gyorsabb, de a későbbi oldalak betöltése jelentősen javulni fog.

Vannak olyan bővítmények a tartalomkezelő rendszerek számára, mint például a WordPress, amelyek egyszerűsítik a gyorsítótárat, pl. W3 teljes gyorsítótár vagy WP Super gyorsítótár.

Más rendszerek olyan technológiákat is átvehetnek, mint például az Expires, Last-Modified, Keep-Alive vagy Etag a HTTP fejlécben. A gazdagép konfigurációs lehetőségeket adhat meg, vagy megadhatja sajátjait. Például egy Apache .htaccess beállítás az összes kép gyorsítótárazására egy hónapig:

Optimalizálja a médiát

A képek az oldal súlyának több mint 60% -át teszik ki. Az átlagos oldal 55 külön képet igényel 1457 KB-os, 126 KB betűtípus, 400 KB videó és 45 KB Flash. Ez kissé utólagosnak tűnik, tekintve az egyszerű, sima színű lapos minták jelenlegi tendenciáját!

Az első lépés: távolítsa el a felesleges eszközöket. Szüksége van arra a háttérvideóra, hősképre, dőlt betűtípusra vagy 300 ikonra, amelyet kevesen látnak? Használhat egy betűtípus egy részhalmazát? Cserélhetne néhány képet CSS3 effektusokra, például színátmenetekre vagy szegélyekre?

Kép feltételezése szükséges, győződjön meg arról, hogy a leghatékonyabb formátumot használja. Általában:

  • Az SVG alkalmas vonaldiagramokra
  • A webes betűtípusok opcióként szolgálhatnak az egyszínű ikonokhoz
  • A PNG vagy talán a GIF a legalkalmasabb olyan világos képekhez, amelyek világos színmeghatározással rendelkeznek, például ikonok, gombok és képernyőképek
  • A JPG a legjobb fényképekhez vagy bármi máshoz, ahol a finom részletek kevésbé fontosak.

Ha kétségei vannak, kísérletezzen különféle típusokkal, amíg meg nem találja a legjobb kompromisszumot a minőség és a fájlméret között.

A nagy képeket át kell méretezni a felbontás csökkentése érdekében. Egy belépő szintű okostelefonos fényképezőgép nagyfelbontású fényképeket készít több megabájtról, de a mai képernyők legjavához ritkán van szükség 2000 képpontnál nagyobb képre.

Következő: győződjön meg róla, hogy a képei az optimális méretűek. Kevés grafikus csomag távolítja el az összes lehetséges adatot, és a legtöbb megtartja a felesleges színeket vagy az EXIF ​​metaadatokat, például a dátumokat, a helyeket és a kamera beállításait. Egyszeri tömörítési feladatokat olyan online eszközökkel lehet elérni, mint a TinyPNG/JPE vagy a smush.it. Az olyan telepíthető feldolgozó eszközök, mint az OptiPNG, a PNGOUT, a jpegtran és a jpegoptim, tömöríthetik a képeket. Bevezethet olyan tömörítési rendszereket, mint például az imagemin, a beépítési folyamatba, vagy a CMS-felhasználók olyan opciókkal rendelkeznek, mint a WP Smush, amely automatikusan tömöríti a feltöltött fájlokat.

A kisebb képeket egyetlen képkombinációvá lehet kombinálni a HTTP-kérelmek számának csökkentése érdekében. Ennek kevesebb előnye van a HTTP/2-ben, de az egyes oldalakon használt ikonok még mindig részesülhetnek az egyesítésből.

Végül vegye fontolóra a Base64 által kódolt inline adatok URI-kat kisebb, rendszeresen használt képek, pl.

Ez csökkenti a kérések számát, bár a karbantartás nehezebb lehet. Az olyan online eszközök, mint a DataURL.net és az adatok: Az URI Generator remek az egyszeri konverziókhoz. Lehet, hogy kódoló pluginok is vannak a szerkesztőhöz/IDE-hez, de a legegyszerűbb megoldás a PostCSS Assets - egy PostCSS plugin -, amely varázslatosan konvertál bármilyen képet, pl.

Összekapcsolja és minimalizálja a CSS-t és a JavaScript-et

Az átlagos oldal 360 KB JavaScript-t tölt be 22 külön fájlra és 76 KB CSS-re osztva 8 stíluslapon. Ezek egy részét harmadik féltől származó közösségi média vagy hirdetési kütyü biztosíthatja, de a saját fájljai lehetnek:

  1. Összekötve az összes kód egyetlen fájlba történő összekapcsolása a HTTP kérések csökkentése érdekében, és
  2. Csökkentve a felesleges megjegyzések és szóközök eltávolításához. Az extrémebb eszközök átnevezhetik a változókat és a függvényeket rövidebb alternatívákra, pl. A launchWidget () w () lesz .

Egyszerűbb grafikus felület érdekében egy olyan eszköz, mint a Koala, CSS és JavaScript tömörítési lehetőségeket biztosít.

Az olyan előfeldolgozók, mint a Sass, a LESS és a Stylus, vagy a PostCSS-hez tartozó cssnano-t tartalmazó építőeszközök optimalizálhatják a CSS-t, ha bármikor változtat.

A JavaScript egy kicsit nehezebb lehet, mivel a forrás sorrendje kritikus lesz. Megfontolhatja egy olyan rendszert, mint például a Browserify, hogy összegyűjtse a függőségeket. Gyakran használok egyszerűbb Gulp beépülő modulokat, beleértve:

  • kulcstartó a függőségek ellenőrzésére. Minden forrásfájl tetején található opcionális megjegyzés meghatározza a megfelelő sorrendet, pl. // szükséges: config.js, lib.js
  • nyelés-összefűzés egyetlen fájlba összefűzéshez
  • gulp-strip-debug a konzol és a hibakereső utasítások eltávolításához
  • nyelni-rúgni, hogy minimalizálódjon.

A HTTP/2 e technikák egy részét feleslegessé teheti, ha minden oldalon más CSS és JavaScript eszközöket használ, de ennek ellenére figyelembe kell venni a ritkábban változó fájlokat.

Távolítsa el a felesleges kódot

Könnyebb tömegesen hozzáadni, mint eltávolítani, de gyanítom, hogy a legtöbb webhely eltávolíthatja a kód felét anélkül, hogy észrevehető különbségeket tenne. A fő bűnösök:

CMS témák és sablonok

A legtöbb téma általános, hogy a felhasználók széles körét vonzza. Csak a funkciók töredékét használhatja, ezért ellenőrizze, hogy rendelkezésre áll-e könnyebb alternatíva.

CMS bővítmények

Kerülje a beépülő modulok használatát, kivéve, ha ez feltétlenül szükséges. Általában a front-end bővítmények, például a körhinta vagy a kütyük a legrosszabbul elkövetők, mivel gyakran külön CSS és JavaScript készleteket tartalmaznak.

CSS keretrendszerek

Az olyan keretrendszerek, mint a Bootstrap, számos stílust tartalmaznak - amelyek többségét soha nem fogja használni. Az olyan eszközök, mint az UnCSS, elemezhetik az oldalakat és azonosíthatják a felesleges szabályokat.

JavaScript keretrendszerek

Kerülje el a több keretrendszer használatát, és lehetőség szerint vegye figyelembe a kisebb vagy moduláris lehetőségeket. Lehet, hogy teljesen ki tudja dobni a keretrendszerét.

JavaScript effektusok

Az egyszerű effektusok, például a kicsúszás és az elhalványulás, könnyebb CSS3 animációkkal és transzformációkkal valósíthatók meg, nem pedig kevésbé hatékony JavaScript használatával.

Közösségi média widgetek

Ez az ártalmatlan, hasonló gomb fél megabájt rejtett kódot képes hordozni. Ritkán van szükség - linkre van szükséged.

Hirdető

Ha 57 hirdetési hálózathoz regisztrál, mindegyik megadja a saját kódrészletét, amely lelassítja webhelyét. Becsülje meg bevételeit, és dobjon el kevésbé jövedelmező widgeteket.

További optimalizációk

A fenti opciók észrevehető változást jelentenek a webhely sebességében, időigényes változtatások nélkül. Futtassa újra oldalait a fenti eszközökkel, hogy ellenőrizze a megtakarításokat és ellenőrizze, hogy nőtt-e a felhasználás és a konverziók száma.

Radikálisabb optimalizáláshoz ...

Fogadjon el egy építési folyamatot

A leglelkiismeretesebb fejlesztő elfelejti tömöríteni a képet vagy összefűzni a CSS-t, amikor ez kézi feladat. Egy összeállítási folyamat menet közben automatizálhatja az unalmas feladatokat; könnyű változtatni a JavaScriptet, amikor elkészült az Ön számára, valahányszor változtatást hajt végre.

A két legnépszerűbb lehetőség a Gulp és a Grunt, de vannak megoldások a legtöbb nyelvre és rendszerre. A kezdeti beállítás egy kis időt vesz igénybe, de a továbbfejlesztett munkafolyamat több órás erőfeszítést takarít meg később.

Egyszerűsítse tervét

Számos modern weboldal és alkalmazás elkerüli a bonyolultságot, hogy korszerű, ügyfélközpontú élményt nyújtson. Az egyszerűsítés nehéz lehet, és gyakran könnyebb újrakezdeni a projektet. Kérdezzen meg minden funkciókérést, vagy követelje meg, hogy minden hozzáadott elemnél távolítson el egy funkciót.

Vegyünk egy statikus oldalt

A CMS a weboldalak többségénél túlteljes. Kevesen kapnak egynél több frissítést hetente, de a CMS továbbra is fut a háttérben, és ritkán változik az oldal tartalma. Alternatív megoldás lehet a statikus helygenerátor. Ezek számos CMS-előnyt kínálnak, például sablonokat, de jobb teljesítményű, biztonságosabb és megbízhatóbb lapos HTML-fájlokat hoznak létre.

Változtassa meg fejlesztési életmódját

Kevés kifogás van a 2,3 MB-os oldalakra, ha a tartalom ritkán haladja meg a több száz szót. Könnyű elhanyagolni a teljesítményt, amikor gyorsan fejleszt egy webhelyet, minimális költség mellett. De mi értelme van, ha az eredmény egy lassú, ügyetlen termék, amelyet senki sem akar használni?

Tervezze meg a teljesítményt a kezdetektől fogva. Lehet, hogy ügyfelei nem fogják azonnal értékelni az előnyöket, de a magasabb rangok és a jobb elkötelezettség hosszú távú előnyei elősegítik a projekt kiemelkedését. Fontolgat:

  • korlátozza a kapcsolatot. Webhelyét gyenge mobil lefedettségű területen vagy zsúfolt nyilvános hálózaton érheti el. Csalódottságát naponta több ezer felhasználó tapasztalhatja.
  • minden projekt súlyának felmérése és az oldalhoz hozzáadott minden eszköz megkérdőjelezése.

A weblapok elhízása járvány, de nyilvánvalóan kevés fejlesztőt érdekel. Hozzon létre vékony oldalakat értékes készségek elsajátításához, amelyek segítenek megtartani és új ügyfeleket szerezni.
További irodalom: