bejáratHogyan lehet gyorsabban betölteni az oldalakat. Öt módja annak, hogy felgyorsítsa az oldal letöltési idejét
Jó nap! Bizonyára mindenki akkor jön az idő, amikor meg kell növelni a webhelyoldal letöltési sebességét azért, hogy a webhely túl hosszú és a felhasználók betöltése nélkül várakozás nélkül a teljes csomagtartó, hagyja el a webhelyet. A mai felvételben részletesebben megmondom, hogy milyen eszközöket szeretne használni a webhely betöltési sebességének optimalizálásához, és amely kulcsfontosságú pontok zavarhatják az oldalakat. Ezenkívül megismerheti, hogy milyen szolgáltatásokkal mérheti a webhely oldal letöltési sebességét.
A webhely oldalának sebességének mérésére szolgáló szolgáltatások
A webhely oldalának letöltési sebességének ellenőrzésére használt szolgáltatások közül tetszett a szolgáltatás: Pingdom.com, amely egyértelműen bemutatja a szükséges oldalak részleteit és letöltési sebességét, például a főoldal Blog webhely, a beállítások kiválasztásakor - "Amsterdam, Hollandia", az oldal letöltési sebessége 1,08 másodperc lesz, ami nem olyan rossz. 
Az összes szükséges információt a csatlakozási sebesség szolgáltatás, a várakozás és a válasz, mint harmadik félszerverek, adatokat kérik és a belső kiszolgálót. 
A megadott adatokból meghatározhatja a leglassabb pillanatokat és javíthatja a webhelyoldalak letöltési sebességét, amely befolyásolja ezeket a helyeket. Ez segít egy csodálatos eszközt, amelyet a Google - a Google PageSpeed \u200b\u200bInsights fejlesztett ki.
A weboldalak letöltési sebességének optimalizálása a Google PageSpeed \u200b\u200bhasználatával
Tény, hogy minden könnyebb, mint az első pillantásra, de meg akarom ünnepelni a pillanatot használja a Google-t A PageSpeed \u200b\u200bInsights nem látható minden olyan pillanatra, amely rontja a webhely oldal letöltési sebességét, de ez meglehetősen alkalmas az összes elem elvégzésével a szolgáltatás kérésére, jelentősen javíthatja a sebességet. A webhely letöltési sebességét befolyásoló tényezők részletesebb elemzésénél a Mozilla Firefox böngészőt a Firefox Firefox-hez és oldalpeed plugin segítségével kell használni.
Miért Firefox? A Firefox esetében ez a bővítmény kényelmesebbnek tűnik, még a webhelyoldalak plugin elemzését követően megjelenő tartalom is kompakt, ezért javaslom, hogy elemezze az oldalakat a Firefox segítségével.
Tehát, miután telepítette a plug-in és a Firebug hozzáadása a jobb felső sarokban, megjelenik egy gomb a beetle képével.
Ugrás a webhelyre, az elemzés, amelyre végrehajtani szeretne, kattintson a gombra a bogárral. Az ablak megnyílik az Ön előtt, amelynek utolsó lapja egy gombnyomással lesz egy gombnyomással. Oldalsebesség. A lapra kattintva. Elemezze a teljesítményt.Kattints a gombra, és várjon, amíg az oldal elemzi. Ezenkívül megjelenik az összes ajánlás listája, amelyet végrehajtani szeretne, hogy javítsa a webhely oldalainak letöltési sebességét. A blogoldalak tartalma után egy rövid manipuláció után elértem az eredményt a PageSpeed \u200b\u200b\u003d 94-ből 100 lehetséges pontból, ami elég jó, természetesen lehet, hogy javíthatja az eredményt, de eddig nem kritikus, a fő dolog az, hogy az összes fő zavaró pillanat megszűnt. 
De a zöld kullancsok arra törekszenek, hogy minden rendben van, ténylegesen javíthatja a mutatót, és elérheti a 94-nél nagyobb értéket.
Tehát vegyük figyelembe az alapoldalak letöltési sebességének optimalizálásához szükséges alapvető ajánlásokat:
Kapcsolja be a tömörítést - Az XML tömörítés, a CSS, a JS és a HTML gombok konfigurálásához a GZIP formátumhoz hozzá kell adnia a következő kódot a file.htaccess-hez az FTP webhelykiszolgálón:
Adjon képeket a megfelelő arányokkal - CSS-fájlokban meg kell adnia egy rögzített arányt a képekhez, ahelyett, hogy megváltoztatná őket a CSS használatával.
Használja a böngésző gyorsítótárát, itt van a gyorsítótár-hitelező és az elem elvégzése. Adja meg a gyorsítótár-hitelezőt - A böngésző oldalán gyorsítótárazást kell használni, azaz Az ügyfél szükséges hozzáadásával V.htaccess a következő sorok Kód:
Ebben a részben a kódot, caching 7 napon hajtják végre, ne felejtsük el, hogy nem kell mindig elvégezni a követelményeknek keresők, ha a terméket a webhelyen frissülnek gyakran úgy kell beállítani caching mindegyik külön-külön.
A képek optimalizálása - Az oldalak méretének csökkentése érdekében, és ennek megfelelően növelni kell a letöltési sebességet, meg kell használnia a webhely összes képének az FTP-kiszolgáló és a köteglet letöltését a további feldolgozáshoz a szolgáltatásra /www.smushit.com/, az eljárás elég hosszú, ha a szolgáltatási oldalán a képek száma több ezer. Lehet, hogy hibák vannak gIF fájlok a JPG vagy PNG-ben eltolódnak, és a fájlnév megváltozik, meg kell fontolnia ebben a pillanatbanHa vannak képek gIF formátum, jobb, ha külön betölti őket, majd manuálisan szabályozza őket. Ajánlások:
- Minden egyes csomag letöltése után frissítse az oldalt, különben a képek hozzáadódnak az aktuális listához.
- Az összes optimalizált fájlt egy archívum letölti a szolgáltatásból, így a kiszolgálóhoz való túlterhelés előtt el kell távolítani az archívumot.
Java Script Syntax analízis lerakódása - A kód használatával egy időtartamú letöltési időt futtathat:
Csökkentse a JS parancsfájlokat és a CSS stílusokat - Használja a szolgáltatást: http://www.refresh-sf.com/yui/, amely eltávolítja az extra tereket a kódban, ezáltal megmenti a fájl helyét.
Csökkentse a HTML-t - Hogy csökkentsék HTML oldalak Eltávolíthatja az extra hézagokat és segédfájlokat, amelyek specifikus helyzetekben elhagyhatók.
Adja meg a képméreteket - Az összes kép, méretük kell határozni azoknak, akkor nem kell, hogy csökkentse a képméret beállítástól egyébként sem a kép méretezhető görbe, vagy a CMS folyamodnak majd önálló felírása CSS stílusokat képeket, ezzel növelve a méretük.
Adja meg a címet Vary: Elfogadás-kódolás - A gyorsítótárhoz nyitott valamennyi fájlnak vissza kell adnia a címet, elegendő a v.htaccess kód hozzáadása az FTP-kiszolgálón:
P.S.: A fájlok iránti kérelmek számának csökkentése érdekében csökkenteni kell a CSS stílusok számát, és ötvözi azokat az 1 fájlban, a JS parancsfájlok ideális esetben az 1 fájlba kell egyesíteniük.
Következtetés
A megadott ajánlások listája segít javítani a sebesség letölti a honlapjára, de ne felejtsük el, hogy egyes pontokon növelheti a terhelés a szerveren, például amikor a GZIP tömörítés a kiszolgáló eszközök és a caching A böngésző oldalán (kliens) az optimalizálási szakaszok megközelítéséhez szükséges. A másik oldal és előkészítés gzip fájlok Egyedül, és a v.htaccess beállította a megfelelő feldolgozást, és a böngészőtől függően biztosítja a felhasználók tömörített vagy tömörítetlen fájlokat.
Ne feledje, hogy az oldal betöltési sebességének javítása pozitív hatással van a SEO webhelyére, és más dolgok egyenlőek, ha a webhelye gyorsan nyer, akkor magasabb lesz, mint a versenytársak.
Sikerek az Ön oldalainak sebességének optimalizálásában!
Azt hiszem, ez nem titok, hogy az oldal letöltési sebessége sok tényezőt érint. Ha valaki nem ismeri, akkor röviden azt mondja, hogy a következő, hogy a letöltési sebesség nem csak akkor érinti, ha a látogató várja, amikor a webhely betöltődik, hanem a SEO optimalizálás. Végtére is, ma, sok keresőmotor, amikor a rangsorolási helyek elkezdték figyelembe venni az oldal letöltési sebességét. Ezért a gyorsabb webhelye növekszik, annál több látogatót kaphat a keresőmotorokból, és ezért és több pénzt.
Ezért ebben a cikkben úgy döntöttem, hogy összeszedi az első 10 tippet, hogy hogyan növelheti a weboldal sebességét és a webhely egészét. A cikk nem azt állítja, hogy zseniális, és az újoncok számára készült.
Akkor gyerünk:
1. Csökkentse a HTTP-kérések számát
Az oldal letöltésének 80% -a összpontosul az oldalelemek letöltésére: szkriptek, fotók, CSS fájlok, vaku. A http / 1.1 specifikáció azt tanácsolja, hogy a böngészők párhuzamosan betöltve legfeljebb 2 weboldal komponenst egy gazda. Az összetevők számának csökkentésével csökkentjük a HTTP lekérdezések számát a kiszolgálóhoz, és az eredmény növeli az oldal betöltési sebességét.
De hogyan lehet csökkenteni a kérelmek számát a szerverre anélkül, hogy befolyásolná megjelenés oldalak?
2. Helyezze a CSS fájlokat az oldal elején.
Csatlakozás a CSS-fájlokhoz az oldal fejlécében, akkor az oldal fokozatos megjelenését kapjuk, azaz. Az oldal fokozatosan kerül betöltésre - először a cím, majd az emeleten, a navigáció stb. - és ez viszont kiváló oldaladási mutató a felhasználó számára és javítja Általános benyomás a helyszínről.
Ha a CSS fájlokat az oldal alján helyezi el, akkor nem teszi lehetővé számos böngésző számára, hogy fokozatosan hozzák az oldalt. Ezt azzal magyarázza, hogy a böngésző "nem akarja", hogy átrajzolja az elemeket, hogy a stílus megváltozhat az oldal betöltése után. Tehát az összes CSS fájl mindig csatlakozik az oldal tetején a fejrészben.
3. Helyezze a JavaScriptet az oldal végén.
Plynow JavaScript fájlok lefelé az oldal Lehetővé teszi a böngésző feltöltését a tartalom első, és csak akkor indítsa el a JavaScript fájlok letöltését. Ha webhelye megtartja az időt, és tartalmazza az összes lehetséges interaktív "bullshits" -t, akkor ezek a JavaScript-fájlok némileg és mérlegelhetik őket több száz kilobájt, így letöltötte az oldalt, hogy kényszerítse a felhasználót, hogy várjon, amíg az összes Javaszkfájl betöltődik .
Ezenkívül a külső .js fájlok párhuzamos betöltést blokkolnak. A http / 1.1 specifikáció azt tanácsolja, hogy a böngészők párhuzamosan betöltve legfeljebb 2 weboldal komponenst egy gazda. Így, ha a webhelyre vonatkozó képek különböző gazdagépeken találhatók, több mint 2 párhuzamos letöltést kapnak. És ha a szkript betöltődik, a böngésző nem indulhat meg más letöltésekből is, még más házigazdákból is.
4. Minimalizálja a CSS-t és a JavaScriptet
A fájl minimalizálása az összes jelentékeny karakter eltávolítása a kódból a fájl összegének csökkentése és felgyorsítása érdekében. Minimizált fájlban minden észrevételt és jelentéktelen teret, karakterlánc-transzplantációt, füleket, lapokat törölnek. Minden itt egyszerű. Minél kisebb a fájl mérete, annál kevesebb idő lesz a böngésző letöltéséhez. És a kód minimalizálása segíti ezeket a 24 online szolgáltatást a tömörítéshez és a CSS optimalizálási kódhoz
5. Használjon aldomaineket a párhuzamos letöltéshez
Amint fent említettem, a HTTP / 1.1 specifikáció szerint a korlátozások a webhely egyszerre letölthető komponenseinek számát helyezik el, nevezetesen legfeljebb 2 komponens egy gazda. Ezért, ha sok grafika van a webhelyén, akkor jobb, ha egy külön aldomain vagy aldomainre veheted. Az Ön számára ugyanaz a kiszolgáló, és egy böngésző - más. Minél több aldomaineket hoztál létre további fájlok A böngésző képes lesz egyszerre letölteni, és gyorsabban a webhely teljes oldala elindul. Csak a képek címét módosíthatja az újnak. Nagyon egyszerű, de hatékony.
6. Használja a böngésző gyorsítótárát
A Keching rendkívül fontos a modern weboldalakhoz, amelyek a JavaScript és a CSS kiterjedt csatlakoztatását használják. A tény az, hogy amikor a látogató ment a helyszínen az első alkalommal, a böngésző letölti minden JavaScript és CSS fájlok is betölti az egész menetrend és a flash, de helyesen állítsa a HTTP fejléc lejár, akkor, hogy a komponensek az oldal gyorsítótárazott. Így, amikor a látogató ismét a webhelyére megy, vagy a webhely következő oldalára megy, a böngésző gyorsítótárában lesz néhány fájlok És a böngészőnek nem kell újra feltöltenie őket. Innen és nyerte meg az oldal betöltési sebességét.
Ezért a HTTP fejléc kiáradása mindenhol, ahol több napig, akár hónapokig is lehetséges. Annak érdekében, hogy az Apache webszerver megfelelő legyen a HTTP fejléc ajánlásainak lejárataival, hozzá kell adni a file.htaccess-hez, amely a webhely gyökérmappájában található, a következő sorok:
Ez az Apache webkiszolgáló konfigurációs töredéke ellenőrzi a mod_expies modult, és ha a mod_expies modul elérhető, magában foglalja a lejárati http fejlécek visszatérését, amelyek meghatározzák a fent felsorolt \u200b\u200bobjektumok eltarthatóságát a böngészők és a proxy szerverek gyorsítótárában, amely egy évvel egyenlő az első csomagtartó ideje. A böngésző gyorsítótárának ilyen életének telepítésével nehéz lehet frissíteni a fájlokat. Ezért, ha megváltoztatta a CSS vagy a JavaScript fájl tartalmát, és szeretné, hogy ezek a módosítások frissüljenek a böngésző gyorsítótárában, meg kell változtatnod a fájl nevét. Általában a fájlnév hozzáadja a verzióját például az alábbiak szerint: styles.v1.css
7. Használja a CDN-t a népszerű JavaScript-könyvtárak letöltéséhez
Ha webhelye népszerű JavaScript-keretrendszert használ, például a jQuery, akkor jobb, ha a CDN-t csatlakoztathatja.
8. A képek optimalizálása
Meg kell határozni a képek megfelelő formátumát. Helytelen képformátum kiválasztása jelentősen növelheti a fájlméretet.
- GIF - ideális képek több színben, mint például a logó.
- JPEG - nagyszerű a részletes képekhez nagy mennyiség Virágok, például fotók.
- A PNG az Ön választása, ha kiváló minőségű képre van szüksége az átláthatósággal.
Itt van több online szolgáltatások A képek optimalizálása:
9. Ne skálázza a képeket
Ne változtassa meg a képméretet a szélesség és a magasság attribútumok címke használatával, vagy a CSS használatával. Ez negatívan befolyásolja az oldal letöltési sebességét. Ha van egy kép mérete 500x500px, és a betét a kívánt webhely egy kép mérete 100x100px, akkor jobb megváltoztatni a mérete az eredeti képet a PhotoShop grafikus szerkesztő, vagy bármilyen más. A kép kisebb súlya, annál kevesebb idő van a letöltéshez.
10. Használja a GZIP tömörítést
Mint látható tanulmányok, gzip tömörítés szöveges fájl "A repülés során" az esetek 95-98% -ában csökkenti az időt, hogy átvegye a fájlt a böngészőre. Ha az archivált fájlok másolatát tárolja a kiszolgálón (a proxy-kiszolgáló memóriájában, vagy egyszerűen a lemezen), az általános kapcsolat 3-4-szer gyorsabb.
A http / 1.1 protokoll verzióból kiindulva a webes ügyfelek azt mutatják, hogy melyik tömörítési típusok támogatják az elfogadás-kódoló fejlécet a HTTP kérésbe.
Elfogadás-kódolás: GZIP, Deflate
Ha a webszerver ilyen fejlécet lát a lekérdezésben, akkor az ügyfél által felsorolt \u200b\u200bmódszerek egyikével válaszolhat. Válasz kiadásakor a tartalomkódoló fejlécen keresztül a kiszolgáló értesíti az ügyfelet arról, hogy a válasz tömörüljön.
Tartalomkódolás: gzip
Az ilyen módon továbbított adatok kevesebb mint 5-szeresek, és jelentősen felgyorsítja a szállításukat. Azonban van egy hátránya: a webszerver terhelése növekszik. De a kiszolgálóval kapcsolatos probléma mindig megoldható. Tehát nem fogunk figyelmet fordítani rá.
Annak érdekében, hogy a GZIP tömörítést a webhelyén engedélyezze, a fájlhoz szükséges a következő kódsorok regisztrálásához:
Ha egy ez a módszer dolgozott, majd kiváló, ha nem, megpróbálhatja ezt itt a kód:
De ismét, ez a kód Nem minden kiszolgálón működik, így jobb kapcsolatba lépni a hosting szolgáltatójával, és tisztázza ezt a problémát.
Nos, sőt, mindent meg akartam mondani. Ebben a cikkben megpróbáltam felsorolni az ügyfelek optimalizálásának alapvető módját, hogy növeljék a weboldal rendszerindítási sebességét. Az ügyféloptimalizálás mellett is van szerveroptimalizálás. De ez a téma egy külön cikkhez.
Ha hiányzott valamit, vagy van valami hozzáadása - Írja meg véleményét az alábbi hozzászólás észrevételeiben. Kösz a figyelmet!
A lassú hely nem tetszik senkinek - sem a felhasználók, sem a keresőmotorok. Az internet aktuális sebességével az emberek már nem hajlandók várni az oldal letöltésére. Ez nem dial-APA kapcsolat, ahol a várakozás elkerülhetetlen volt. És keresőmotorok, küzd a keresési eredmények minőségéért, nem akarnak rossz felhasználókat kiadni (ebben az esetben lassú) webhelyeken. Ezért a többi dolog egyenlő, a lassú hely lesz a kiadatásnál alacsonyabb, mint a romboló versenytársak.
Milyen terhelési sebességet kell figyelembe venni a normának
Minél gyorsabb annál jobb. De átlagosan 2-3 másodperc, hogy letöltse az oldal tartalmának fő részét meglehetősen normális.
Amelyből a letöltési sebesség függ
A letöltési helyszínen két fél részt vesz - egy felhasználói böngésző és egy kiszolgáló, ahol az oldalfájlok fizikailag találhatóak. Adatcsere ezeknek a feleknek.
A gengszter webhely betöltése problémákat okozhat az egyes felek és az intervallum között.
- Lassú kiszolgáló: Nem lehet eltömődni véletlen hozzáférési memória Vagy magok a processzorban, mint egy rendszeres számítógép.
- Lassú webhely motor (CMS): Ha a kódot tapasztalatlan programozókban írták, figyelembe véve a sebességét.
- A kiszolgáló messze van a felhasználótól: például a webhelyfájlokkal rendelkező kiszolgáló fizikailag Moszkvában van, és a felhasználó a Vladivostok webhelyére érkezik.
- Sok fájl: A böngésző oldal megjelenítéséhez sok képet, fájlt, stílust, szkriptet és betűtípust kell letöltenie.
- Nehéz fájlok: plusz Ezek a fájlok sokat mérnek.
A webhelysebesség optimalizálásához szükséges összes lépés célja ezeknek a problémáknak a kiküszöbölése.
A webhely sebességének ellenőrzése
Az online szolgáltatások halmazából a webhelysebesség ellenőrzéséhez a legnépszerűbb, talán a Google PageSpeed \u200b\u200beszköz. Munka vele egyszerűen - Adja meg a webhely címét, és kattintson az "Elemzés" gombra.
Ennek eredményeként látni fogjuk az ilyen mutatókat (külön a számítógépek és a mobil):
- Miután a böngésző megkapja a választ a kiszolgálón, és elkezdi felhívni az oldal tartalmát (FCP - első körülményes festék).
- Miután a felhasználó meglátja a böngésző fő tartalmát (DCL - DOM tartalom betöltött).
- Ami a webhelyet a rendszerindítási sebesség szempontjából optimalizálja.
- Specifikus optimalizálási ajánlások. A "Hogyan kell javítani" linkekre kattintva megjelenik a problémák és fájlok címei, amelyekkel valamit kell tennie (főként tömörítés).
Javasoljuk, hogy bejusson a zöld zónába - és az oldalsebességblokkban (oldalsebesség) és az "optimalizálás" blokkban.
Egy másik jó szolgáltatás A letöltési sebesség ellenőrzése azonban angolul - Pingdom. Megkülönböztető tulajdonság - ezek a gyönyörű grafika (az úgynevezett vízesés - vízesés) mutatják, hogy mely fájlokat, milyen sorrendben és mennyi idő betöltődik:
És most a pontra:
Hogyan kell felgyorsítani az oldalt
1. lépés: Képoptimalizálás
A nem optimalizált képek a webhely legmagasabb "nehéz" része. Ezért a képekkel való munka jelentősen növelheti a sebességet.
Mit nézünk:
Képméret (szélesség és magasság)
Ha felvette az árut, és fotókat kapott mintegy 5000 képpont széles, akkor biztonságosan csökkentheti a szélességet 1600-ra, a legtöbb esetben elegendő lesz. A kivétel lesz azok a helyek (főként online áruházak), ahol figyelembe veheti az árut a "nagyítóval", de nincs azonnal betöltve, de csak akkor, ha egy személy úgy döntött, hogy kihasználja ezt az eszközt.
Képsúly (kilobájt)
A fényképezőgépből származó képek (és szükségük van) a webhely megjelenítése előtt az összegre tömöríthetők. Végezze el a Photoshop (vagy más képszerkesztő), vagy az online szolgáltatások, például a Tinypng vagy az Optimizilla segítségével.
Előnézet a nagy képekhez
Ha van fényképei az árukról (vagy elvégzett munka), és van egy oldal a listájukkal, ésszerűen kis előnézeteket (csökkentett képek). Ezután a termékek, munkák vagy fotók listája gyorsabb lesz.
Például a Sportmaster három változatban használja az áruk képeit:
Kép az áruk listájához (súlya 7 kb)
Kép a termékkártyára (súlya 18 kb)
Kép, hogy megtekinthesse az árut egy nagyítóval (súlya 942 KB)
Képzeld el, hogy mennyi ideig tartanak az áruk listája, ha a sportmaster csak a forrásképeket használta (azok, amelyek 900, egy felesleges kilobájtal).
A webhely sebességének ellenőrzésekor a Google PageSpeed \u200b\u200bsegítségével készen áll a képekre, amelyeket optimalizálni kell:
2. lépés: Gzip tömörítés
A GZIP egy olyan program, amely tömöríti a szerveren található fájlokat (a zip-archívum analógja a számítógépen). A GZIP kiszolgáló engedélyezve, mielőtt elküldi az oldalkódot a böngészőre (valamint a szkriptek, stílusok és egyéb) szöveges információk), először archiválja ezeket a fájlokat. A böngésző archívumot kap és kicsomagolja a felhasználó számítógépén. A tömörített információkat gyorsabban továbbítják a böngésző és a szerver között.
A GZIP tömörítés engedélyezése:
Ha hozzáférhet a HTCCESS fájlhoz, adjon hozzá ilyen sorokat (a fájl végén):
AddoutoutputfilterbyType deflate szöveg / html szöveg / sima szöveg / css alkalmazás / JSON
AddoutoutputFilterbyType defle szöveg / JavaScript alkalmazás / JavaScript alkalmazás / X-JavaScript
AddoutoutputFilterbyType deflate szöveg / XML alkalmazás / XML szöveg / x-komponens
AddoutoutputFilterbyType Deflate Application / X-Font-TTF alkalmazás / X-Font-Opentype Image / SVG + XML
Ha nincs apache, de Nginx (aki tudja, meg fogja érteni), akkor szüksége lesz egy nginx.conf konfigurációs fájlra. Kód hozzáadása a HTTP (...) részhez, és indítsa újra a kiszolgálót:
gzip be;
gzip_static on;
gZIP_COMP_LEVEL 5;
gZIP_MIN_LENGTH 1024;
gzip_proxied bármilyen;
gZIP_TYPES Text / sima szöveg / CSS alkalmazás / JSON Application / X-JavaScript szöveg / XML alkalmazás / XML alkalmazás / XML + RSS szöveg / JavaScript alkalmazás / JavaScript;
Ha nincs hozzáférése a HTACCKESS vagy SERVER konfigurációhoz, írjon a GZIP tömörítés engedélyezéséhez szükséges technikai támogatást.
Ha a tömörítési munkálatok, akkor a mappák ellenőrzésének eredményeiben megjelenik (a "mellékelt optimalizálási technikákban"):
3. lépés: Caching a böngésző oldalán
Amikor a böngésző betölti a webhelyet, megmenti az információs információkat (stílusfájlok, szkriptek, képek) a saját memóriájában (gyorsítótár, gyorsítótár). Ezután az oldal más oldalain vagy az aktuális oldal újbóli beírásakor a böngésző nem kéri ezt az információt a kiszolgálóról (hosszú ideig), és betölti azt saját memória (ami gyorsabb). Ezért a böngésző beállításaiban vannak "Clear Cache" gombok, és mindannyian ismerjük a Ctrl + F5 billentyűkombinációt (frissítsük a gyorsítótár tisztító oldalát).
A böngésző gyorsítótárának használatához meg kell adnia, hogy milyen típusú fájlok a webhelyről menteni a gyorsítótárba. Hogyan kell csinálni:
A htcress fájlon keresztül (Statikus fájlok gyorsítótárazása 10 napig):
Lejárati.
ExpiresDefault "Access Plus 10 nap"
A kép / gif "hozzáférés plusz 10 nap"
A kép / jpg "hozzáférés plusz 10 nap"
A kép / jpeg "hozzáférés plusz 10 nap"
A kép / png "hozzáférés plusz 10 nap"
A kép / svg + xml "hozzáférés plusz 10 nap"
A szöveg / CSS "Access Plus 10 nap"
A Nginx esetében add hozzá a konfigurációhoz:
szerver (
...
Hely ~ * \\. (JPG | JPEG | GIF | png | ico | CSS | js | txt) $ (
root /var/www/user/data/www/site.ru;
Lejár a 10d;
}
...
}
Ha nincs hozzáférési kiszolgáló beállítása, ismét technikai támogatásra írunk, és kérjük, állítsa be a statikus fájlok gyorsítótárazását.
A képek listájához hasonlóan a Google PageSpeed \u200b\u200bmegadja az erőforrások listáját, amelyekre a gyorsítótárazás nincs konfigurálva, és lehetséges lenne:
Kérjük, vegye figyelembe, hogy csak az erőforrásaihoz konfigurálhatja a gyorsítótárazást. Módosítsa a gyorsítótár beállításait, például a Yandex.metric parancsfájlokat nem fog működni.
4. lépés: A CSS- és a JS fájlok minimalizálása
A minimalizálás egy fájl hiánya a terek eltávolítása, üres karakterláncok, megjegyzések, rövidebb változó nevek stb. A böngésző még mindig milyen fájlt kell dolgozni - rendes vagy minimálisra csökkentve, és kisebb mértékben mérlegel.
Példa egy rendszeres kódra:
Sebességmérő-wrapper (
pozíció: relatív;
}
.speedometer-wrapper .list (
margó-top: 80px;
margó-balra: -20px;
padding alsó: 85px;
}
Minimizálás után:
Sebességmérő-wrapper (position: relative) .Speedometer-wrapper .list (margin-top: 80px; margin-left: -20px; padding-bottom: 85px)
Népszerű pluginok és könyvtárak (jquery, bootstrap stb.) Mindig minimalizált verziói szkriptjeik és stílusai - Csatlakoztassa őket az oldalhoz. Például a jQuery parancsfájl szokásos verziója súlya 265 kb, és tömörített verziója 85 kb. Érzi a különbséget?
Az egyetlen mínusz minisztérium - a fájl olvashatósága elveszett. Ha módosítania kell tömörített fájl. - Nehéz lesz megcsinálni, az ilyen fájlnál dolgozó személy kényelmetlen (van egy szilárd karakterlánc). Ezért a CMS-hez általában további pluginokat használnak a szkriptek minisztériumának - automatikusan tömörítik a CSS-t és a JS fájlokat, mielőtt letöltenék a webhelyre. És a tiltómű biztonságosan működik a fájlok rendszeres verzióival.
A PÁLÁSOK ÉS INTEKI TARTALMAZOTT TÁMOGATÁSOK MEGJEGYZÉS A MINIMIZÁCIÓK MINIMÁCIÓJÁNAK MINŐSÉGÉRE VONATKOZÓ FÁJLÁSÁNAK listáját:
5. lépés: CSS és JS-fájl letöltése
A böngészőknek saját algoritmusai vannak a leggyorsabb oldal betöltésére (senki sem akarja lejátszani a "fék" böngészőt). Ezért, miután megkapta az oldalkódot, a böngésző megpróbálja kiszámítani, hogy melyik plug-in fájlokat kell elkezdeni az első feltöltést. Néha ez megtörténik, hogy a böngésző már elérte az egyik űrlap rajzát az oldalon, és a stílusokkal rendelkező fájl még nincs betöltve - akkor a rajz leáll.
Ahhoz, hogy a böngésző optimális módon letöltse az oldalfájlokat, az összes stílus (CSS) és betűtípusok az oldalkód elején vannak konfigurálva (a címkében)
), és az összes szkriptfájl (JS) - az oldal végén, a záró címke előtt.
...
rel \u003d "stylesheet" href \u003d " //fonts.googleapis.com/css?family\u003droboto: 00,400,500 & Subset \u003d latin.cirillic"Típus \u003d" szöveg / css "\u003e
rel \u003d "stylesheet" href \u003d "/ inc / perc / styles.min.css" Type \u003d "Text / CSS"\u003e
rel \u003d "Stylesheet" href \u003d "/ CSS / Main.css" Type \u003d "Text / CSS"\u003e
...
...
Ezután a böngésző betölti a rajzhoz szükséges stílust, és elkezdi megjeleníteni az oldalt a felhasználónak, párhuzamosan letöltve a szükséges parancsfájlokat (amely ezután interaktív - csúszkákat, lapokat stb.).
6. lépés: Extra bővítmények vagy számlálók
Néha az oldalkódban vannak olyan kapcsolatok, amelyek a webhelyen már nem használt modulokra vagy modulokra vonatkoznak. Például először a Proxigátor csatlakoztatta az egyik plugint a csúszkákhoz, majd egy újra cserélte, de nem törölte a régiet. Vagy továbbra is kódok számlálók, statisztikák, amelyekre már nem keres. Ügyeljen arra, hogy távolítsa el az ilyen "szemetet" a kódot.
Próbálja meg optimalizálni a további szkriptek használatát. Például, ha a webhely három oldalán lévő csúszkák vannak, akkor minden oldalon használd ugyanazt a bővítményt a csúszkához - nem kell minden egyes parancsfájlt csatlakoztatni.
7. lépés: CDN használata
CDN (tartalomszállítási hálózat, tartalomszállítási hálózat) egy olyan hálózat, amely a földrajzilag országonként vagy világszerte földrajzilag elosztott szerverből származik. A szerverek mindegyike megismétli a tartalmat a fő kiszolgálón (a tartalmat az első felhasználói kérelem megismétli, és egy ideig tárolják).
Ha egy felhasználó, például a Khabarovskból szeretne valamit betölteni a CDN-től, akkor a tartalmat nem a fő kiszolgálón (amely például Moszkvában), hanem a felhasználóhoz legközelebb eső kiszolgálóból (amely lehet) ugyanabban a Khabarovskban). Az ország az én anyanyelvem, így a Query Khabarovsk-Khabarovsk gyorsabban halad, mint Khabarovsk-Moszkva kérése. Hagyja milliszekundumot, de a fájlok számának és méretének szorzásában jó növekedést adhat.
Általános szabályként a CDN-t két esetben használják:
- Harmadik fél szkriptek betöltése. Ezek ugyanazok a jquery, bootstrap, web betűtípusok. Például megadhatja a böngészőt, hogy letöltse őket a kiszolgálón, hanem a rubelszerverekből, a bootstrap vagy más cdnsből.
- Képek és szkriptek betöltése a CDN-ről. Nagy helyek (ozon, avito stb.) Saját CDN konfigurálása saját kiszolgálókkal, vagy (gyakrabban) CDN hálózatokkal, például a Google Cloud vagy Stackpath segítségével. Egyes CMS már tartalmazza a CDN-támogatást a funkcionalitásában. Például a Bitrixnak van egy szabad modulja "webhely gyorsítása (CDN)".
8. lépés A HTTP-kérések számának csökkentése
Ahhoz, hogy a böngésző kevesebb hívást tegyen a kiszolgálóra (és ez HTTP kérések), akkor csökkenteni kell a szükséges fájlok számát. Például, ha három külön parancsfájl van (egy csúszka, mert modális ablakok És pop-up tippekhez), akkor egy fájlba is kombinálhatja őket, majd minimalizálhatja (lásd a 4. lépést).
Mivel nem teljesen kényelmes a fájlok kézi kombinációjához (ha az egyik szkriptet a jövőben kell cserélnie), akkor általában beállíthatja automatikus fúzióját. A legtöbb CM-nek saját bővítményei vannak erre (például Autoptimize for WordPress).
Zavaros gyorsítótárazás a böngésző (3. lépés) és a felesleges szkriptek törlése (6. lépés) szintén csökkenti a HTTP-kérések számát.
9. lépés. Font optimalizálás
Próbáljon meg egyetlen betűtípust használni az egész webhelyen. Ez nem csak az esztétikai helyet ad hozzá, hanem csökkenti a betűtípusok megjelenítéséhez szükséges letöltött fájlok mennyiségét is.
Szintén csökkentette a fájlok számát az elavult formátumok használatához. Korábban minden betűtípust az EOT, TTF, WOFF, SVG formátumok betöltötte a böngészők helyes megjelenítéséhez. Most a modern böngészők csak két formátumra korlátozódhatnak - Woff és Woff2.
Ezenkívül a népszerű betűtípusok letölthetők a Google betűtípusokból. Először is eltávolítja a terhelést a szerverről. Másodszor, a betűkészletekkel rendelkező fájlok már optimalizálva lesznek, a vállától a Google-on (mit látsz, szép).
10. lépés: HTML kód csökkentése
A stílusfájlok és szkriptek tömörítése mellett (4. lépés) konfigurálhatja a minimalizálást és az oldal HTML kódját. Azt hiszem, fontos a hosszú oldalakra - a blogok, az áruk nagy listája stb. A konfiguráláshoz érdemes megfelelő plugint keresni a CMS-hez (például a Joomla HTML-minifier) \u200b\u200bszámára.
11. lépés: Szerveroptimalizálás
Ha van egy dedikált szerver (az Ön rendszergazda Kezelheti a beállításokat), megpróbálhatja profitálni paramétereit. Például add hozzá a RAM-t vagy cserélje ki a processzort. A sysadmin is elvégezheti a "Tisztítás" funkciót a kiszolgálón - törölheti a fel nem használt és frissítheti az aktuális modulokat.
Virtuális tárhely esetén (a kiszolgáló beállításaihoz való hozzáférés nélkül), akkor az átmenet irányába a drágább tarifákra nézhet, ha jobbak előírások Szerverek.
12. lépés: Szkriptek és adatbázisok optimalizálása
A webhely letöltésének egyik szakasza a végleges HTML-kódkiszolgáló generációja, amelyet a böngészőnek ad. Ezt a kódot a webhely motorja (CMS) generálja. Ha a motor írástudatlanul íródott, akkor nagyon hosszú lehet az oldal nagyon hosszú, szükségtelen kéréseket tesz a fájlok és adatbázisok "lassú" programozási algoritmusok stb.
Ezért a webhely CMS kiválasztásakor ajánlott megnézni a népszerű motorok irányába (Bitrix, nyitott kosár, WordPress, Modx stb.), Amelyek bizonyították a sebességet és a megbízhatóságukat. És mivel ezeket a rendszereket folyamatosan véglegesítik (beleértve a sebesség szempontjából), akkor a CMS-t rendszeresen frissíteni kell a weboldalán.
Nincs Slopokama
Vigyázzon a webhely gyors letöltésére. Ne feledje, hogy a keresési eredmények sok versenyzője van, és a gyorsabb webhelye elindul, annál kisebb a többi webhely, amelyet egy személynek meg kell nyitnia a szomszédos füleken.
Ha segítségre van szüksége a webhely letöltési sebességének optimalizálásához - Írja meg a webhelyét, és megmondja, hogy felgyorsíthatja-e.
A webhely betöltési ideje az egyik legfontosabb mutató, amely befolyásolja a helyszíni felhasználók viselkedését. Foglaljunk.
Az oldal letöltési sebességének csökkentése 1 másodpercig:
- a nézetek számának csökkentése 11% -kal;
- a felhasználó elégedettségi aránya 16% -kal csökkentve;
- csökkentve a konverziót 6% -ra.
Az alábbiakban az érdekek növekedését tükröző grafikon zárt oldalak A helyszíni betöltési idő növekedése miatt.
Néhány extra másodperc helyszíni terhelési idő csökkenti a látogatók érdeklődésének esélyeit.
Kismetrics tanulmányt folytatott arról, hogy a webhely letöltési sebessége hogyan befolyásolja a felhasználók és a vásárlók viselkedését:
- A felhasználók 47% -a azt várja, hogy az oldal kevesebb, mint 2 másodperc alatt nyitható;
- A felhasználók 40% -a zárja be a webhelyet, ha 3 másodpercnél hosszabb ideig betöltött;
- A vásárlók 79% -a, akik továbbra is elégedetlenek maradtak a webhely kényelmével, valószínűleg nem vásárolnak rajta keresztül a jövőben;
- Az internetes vásárlók 44% -a elmondja az ismerősökről, hogy nem elégedettek velük.
A webhely gyorsított letöltése különösen fontos a mobileszközök webhelyére érkező felhasználók számára. És óta a részvény mobil forgalom Folyamatosan növekszik, majd a mobil gyorsulásának szüksége van egy speciális akcentussal.
A mobil internethasználók türelme
Növelje a helyszíni terhelési sebességet a konverzió növelésének módjaként
A webhely letöltési ideje befolyásolja a konverziót. Fontolja meg a Walmart hálózat példáját.
Konverziós jelzőfüggőség az oldal betöltési idejétől
Itt látjuk, hogy minél nagyobb az oldal terhelés sebessége, annál nagyobb a konverziós arány.
A Walmart eredményei szerint kiderült, hogy a második terhelési idő csökkenése segíti az átalakulás 2% -ra történő növelését.
A webhely letöltési optimalizálásának hatása a szerves forgalomra
2010-ben a Google azt mondta, hogy figyelembe veszi a sebesség letöltési helyek, amikor a keresési eredmények rangsor.
Az ok, amiért a keresőmotoroknak meg kell tennie, nyilvánvaló. Ha a keresőmotor "lassú" webhelyeket kínál, akkor valószínűleg kevésbé valószínű, hogy használja ezt.
Ezért fontos, hogy csökkentse az oldal letöltési idejét, hogy webhelye a magasabb versenytársak kibocsátásában legyen.
Összefoglalva a fentieket, arra a következtetésre jutunk, hogy a webhely gyorsulása:
- átalakítási növekedés;
- csökkentse a hibaarányt (a látogatók százalékos aránya, akik közvetlenül a bejelentkezési oldalról közvetlenül a bejelentkezési oldalon elhagyták, vagy legfeljebb egy oldalt láttak el);
- emelés a keresőmotorokban.
20 módja annak, hogy felgyorsítsa az oldal betöltését
1. Csökkentse a HTTP-kérések számát
A Yahoo kutatásának megfelelően az oldal betöltésekor a képek, stílusfájlok és szkriptek letöltésére szolgál.
Minden ilyen fájl letöltéséhez külön HTTP lekérdezést hoz létre. Minél több ilyen kérés, minél hosszabb ideig halad, amíg az oldal teljesen letölt.
Ellenőrizze, hogy hány HTTP-kérelmet generálunk, a böngészőfejlesztő panel használható.
Tekintsük a példa szerinti eljárást google böngésző Króm.
Az első lépés az elemzett oldalra megyünk, kattintson jobb gombbal minden üres oldalra, és válassza a kontextus menü Tétel "View Code". A Chrome Devtools panel a képernyő alján nyílik meg. Menjen a Hálózat fülre, és indítsa újra az oldalt. Látjuk az összes kérés listáját, a válaszok állapotait és a fájlok letöltésének idejét.
2. Kombinálja és minifizi CSS és JS fájlok
Most, amikor tudjuk, hogy hány kérést keletkezik, folytathatjuk csökkenteni őket.
A kérések számának csökkentésének legegyszerűbb módja, hogy egyesítsen és minimaláljon (tömörítse) HTML, CSS és JavaScript fájlokat. Helyesebb, hogy ezt a feladatot a fejlesztőknek tegye. Ha nincs ilyen lehetőség, megpróbálhatod magadat csinálni.
Nyitott szöveg szerkesztőAz összes olyan CSS fájl tartalmának behelyezése, amelyet a sablonba csatlakoztatott sorrendben használnak. Ezután bármilyen minifikációs szolgáltatás (például CSminifier) \u200b\u200bsegítségével tömöríti a kódot.
Ennek eredményeképpen csökkentjük a lekérdezések számát, és a szimbólumokat (rések, fülek, string transzplantátumok stb.) Eltávolítjuk a záró kódból.
3. A aszinkron betöltése CSS és JS
Mindannyian használtunk a CSS-fájl HTML-re történő feltöltéséhez egy címke beillesztésével
Azonban nem minden kódelem olyan kritikus, hogy azokat azonnal letölteni kell. Például a helyszínen ritkán használják az áruk összehasonlításának. Érdemes betölteni a stílusokat és a JS kódot közvetlenül abban a pillanatban, amikor a felhasználók szeretnék kihasználni az ilyen funkcionalitást.
A CSS és a JS aszinkron terhelésének végrehajtása gyakran csak a szakmai fejlesztőkkel képes. Csak azt vegye figyelembe, hogy figyelni kell arra, hogy a rel attribútum előterhelési értékének az Onload attribútummal együtt, vagy töltse be a JS szkript stílusát.
4. Konfigurálja a halasztott letöltést JavaScript kódot
Annak megértéséhez, hogy a JavaScript-kód ilyen halasztott letöltése a kezdethez elemezzük, hogyan történik. A standard Javaspit módban a fájlok megszakítják a HTML dokumentum elemzését, amíg az összes ilyen fájl beérkezik és végrehajtásra kerül.
Gyakran be kell illesztenie a különösen jelentős widgeteket közösségi hálózatok Az oldal alagsorában. Nem számít számunkra, hogy azonnal vagy néhány másodpercig megjelenik az oldalon.
A halasztott terhelés végrehajtása, vagy inkább feldolgozás, egy ilyen szkript, mindannyiunknak meg kell regisztrálnunk az attribútum Defer címkét