Diétás helyek
Ma egy kis étrenddel optimalizáljuk webhelye betöltési idejét. Évente bizonyos statisztikákat tesznek közzé a webhelyek helyzetéről szerte a világon. Az elmúlt években könnyen megfigyelhető a weblap méretének növekedése. Nos, megértem, hogy az általunk elért sebességek meglehetősen sokat fejlődtek (a 100Mb/s sebesség már nagyon gyakori sok nagyvárosban és nem csak), a mobiltelefon-társaságok forgalmi terveit is előremozdították (némileg, kínos, hogy vannak 250 MB-os tervek a piacon - legalább 1 GB-ot készítenék). De vajon eljutottak-e olyan messzire, hogy elhanyagolják a weboldal méretét?
Akár fejlesztő, akár rendszergazda vagy egyszerűen van blogja, amelyet büszkén ír, olvassa tovább.
Tényleg olyan rossz?
Lássuk a HTTP Archive Report szerint, hogy egy weblap átlagos mérete mennyivel nőtt minden év végén 2012-től 2015-ig. A weblap mérete az előző évhez képest nőtt: 30% 2012-ben, 32% 2013-ban, 15% 2014-ben és 16% 2015-ben. Így 2015 végén egy weboldal átlagosan 2262 KB volt. Természetesen ez a szám óriási mértékben változhat (a főoldalunk valamivel meghaladja a 700 KB-ot).
Természetesen csendesen böngészve x száz mb/s előfizetéssel valószínűleg felnevet egy weboldal 2,2 MB-ján. De miközben fellélegezel, mert Romániában még mindig elég gyors a hálónk, tartsd szem előtt a következő ötleteket:
-nem ideális forgatókönyv szerint élünk, és vannak késések (minden látogató számára lenne egy 1 ms-os ping pingelése a webhely gazdájával?);
-az emberek egyre türelmetlenebbek, és az online kereskedelem esetében pénzt veszíthetnek a hosszú betöltési idők miatt;
-egyre több okostelefon-felhasználó. Ha egy fáradt és túlterhelt routerrel rendelkező kávézóból próbálnak hozzáférni a hálózathoz, akkor alacsony sebességgel járnak, vagy a telefonhálózatok által kínált internetet használják (ami gyakran nem túl nagy és forgalmi korlátokkal rendelkezik);
-A Telekom továbbra is élő ADSL hálózattal rendelkezik, 12mb/s sebességgel. És sajnos elég előfizető.
-a betöltési idők (amelyeket az oldal mérete befolyásol, logikus volt?) ugyancsak befolyásolják a Google indexelésének és megjelenítésének sebességét. A Google a gyors webhelyeket támogatja. - SEO lendület. Ráadásul a Google közvetlenül bünteti azokat a webhelyeket, amelyek keményen töltődnek be a mobileszközökön.
És ... ahogy az várható volt, a legtöbb oldal hatalmas méretű a rosszul megjelenített vagy optimalizálatlan képek és képek miatt. Van elég olyan oldal, amelynek 6 MB vagy annál nagyobb oldalai vannak. Még egy rakás is! Figyelem, azt mondom, hogy nem online áruházak, ahol kissé elvárható lenne, hogy egy 12 terméket tartalmazó oldal és egyéb elemek foglaljanak helyet.
Tehát az egyes webhelyektől függ, hogy mennyire súlyos ez a probléma. Főleg a képek optimalizálásának módszereit fogom megvitatni, mert innen származik az oldalak legnagyobb fogyása.
És mit csináljunk most?
Először is megtudja, hogyan áll. Olyan webhelyet használ, mint a http://tools.pingdom.com/fpt/, amely elemzi a kívánt oldalt, és megmondja, hogy egy látogató hány kérést küld a szervernek, betöltési időket és oldalméretet. Azt tanácsolom, hogy próbáljon olyan alacsony szinten maradni, mint 1-2 MB egy webhely/blog oldala, és 4 MB alatt maradjon egy online kereskedési webhely összetett oldala esetén - nyilván minél kisebb az oldal, annál jobb mindenkinek . Attól függően, hogy milyen rosszul állsz, a különbségek drámaiak lehetnek a töltési idők tekintetében.
Néhány gyakorlati tipp, röviden, a képek intelligensebb használatához a webhelyén:
.Jpg és .png képek optimalizálása
Ha magának kell foglalkoznia az első 3 ötlettel, a képoptimalizálás szempontjából néhány tippet tudunk segíteni. Vannak ingyenes oldalak, amelyek optimalizálják a képeket, és gyakran nagyszerű munkát végeznek. Két nagyon jó példa: https://tinypng.com/ és https://tinyjpg.com/, pngs és jpeg esetén.
Egy dolgot meg kell jegyezni, hogy nem szabad elbátortalanodni néhány kb-os megtakarítással. Különösen az online áruházak esetében, ahol ha 15kb/képet spórolunk, és annyit gyűjtünk, amennyi nekem van
De néha nem elég. Ezután olyan programokat használunk, mint az Adobe Photoshop, Gimp, IrfanView (rendkívül képes és könnyen konfigurálható tömeges feldolgozási funkcióval rendelkezik) vagy .NET Paint, amelyek lehetővé teszik, hogy kiválasszuk, mennyit akarunk tömöríteni egy .jpg fájlba. Ideális a jó minőség/elfogadható méret közötti határra lépni. Sokszor, még ha meg is spóroljuk az eredeti minőség 85% -át, nem veszünk észre minőségromlást, de azt észleljük, hogy a kép sokkal kisebb méreteket kap. Ha átméretezzük a képet úgy, hogy az megfelelő legyen az internet számára, akkor már drámai csökkentéseket észlelünk.
De honnan tudhatjuk a kép megfelelő méretét, amikor azt egy webhelyen akarjuk használni?
Ha a webhely háttérképéről beszélünk, akkor hivatkozunk a látogatóink által alkalmazott állásfoglalásokra. Nagyon jó feltételezés az lenne, ha 1920px vagy 2550px szélességű lenne a háttérképeknél. Ezek az adatok a közös monitorok felbontásából származnak. Az 1920 képpontos széles kép kifogástalanul fog kinézni háttérként egy még kisebb FullHD monitoron. A 2550px-es kifogástalanul fog kinézni a felsőbb kategóriás 1440p monitorokon is. Így nem használjuk a képet 4000-6000px-nél, és mégis tökéletesen néz ki - ezért a jelentős súlycsökkenés.
Ha a fénydobozokban más elemekről vagy képekről beszélünk, akkor az vitatható. Általában ugyanazt a szabályt követem, ha megpróbálok képernyőképet vagy általános képet megjeleníteni. Nyilvánvaló, hogy a láblécben található Facebook ikon nem 1920, hanem 32 képpont széles.
Tesztként, hogy megmutassam, mennyit tud spórolni, készítettem egy gyönyörű téli háttérképet, meglehetősen összetett (annyira nehezebb optimalizálni), és 6,7 MB-ról 464 kb-ra csökkentettem. Fél MB-nál kisebb, a kép nagyon jól néz ki, szélessége 1920 képpont, ezért könnyen használható háttérként egy weboldalon.
Természetesen 60-70 JPEG tömörítéssel megmenthettük volna, és jó eséllyel nem fogunk egy pillanat alatt észrevenni látható minőségi cseppeket. Így kisebb méreteket kapunk.
Ha a végletekig el akar menni a helytakarékossággal, vegye figyelembe a következőket:
-a tiszta fehér szín (#fff) kevesebb helyet foglal el, mint egy színátmenet vagy egy árnyalat;
-Olyan szűrők használatával, mint az Adobe Photoshop 'Blur More', jelentősen csökkenthetjük a kép méretét (példa: olyan képet kapunk, amelyben van egy fő elem. Ha a Blur More alkalmazást többször is alkalmazzuk a háttérben, hogy az egyértelműség csak a tárgyunkon maradjon, akkor a végső kép méretének csökkenését észleljük)
Igen, de…
Néhány kérdés, amelyet feltehet, és a gyors válasz arra, hogy bebizonyítsa, érdemes optimalizálni minden képet a webhelyén.
Sokan nem foglalkoznak a mikrooptimalizálási dinasztiával
Nem nevezném őket mikrónak, ha a webhely első oldalát 6 MB-ról 2 MB-ra hozza, észrevehető minőségromlás nélkül. És ha a legtöbb ember figyelmen kívül hagyja vagy nem tudja ezeket a dolgokat, ez nem azt jelenti, hogy rendben van ugyanez.
Nem számít. Először nehezebb betölteni, majd a kép a gyorsítótárból készül
És mi van, nem tudom bezárni a lapot a webhelyével, mielőtt befejezné az oldal betöltését? A gyorsítótár egy bizonyos idő alatt jön létre a böngészőben és a megfelelő eszközön. Ha CCleanert használok, a 2. látogatás ugyanolyan horror lesz. Ha a mobiltelefonommal próbálom meg elérni a webhelyét, amely éppen feltölti a fotókat az asztalomra, az akkumulátorom már lemerült.
És most azt kérdezem tőled:
Van dedikált szervere, CDN-mel és garantált 1gbps kapcsolattal a webhelyéhez? Nagy eséllyel közepes VPS vagy akár megosztott tárhely-fiókot használ. Tehát a szerver felesleges gondjait is megtakarítaná a webhely tartalmának optimalizálásával. Képzelje el, hogy friss linket tesz közzé (tehát a gyorsítótár még nincs teljesen felépítve, ha megvalósította) a webhelyére a Facebookon, és a házigazdának azonnal el kell küldenie a 8 MB oldalt a 20 barátnak aki kattintott. Néhányuknál horror betöltése várható.
Az összes látogató 500 MB-os szálon van? Azt hittem, nem.
Következtetés
Bár 2016-ban járunk, és talán sokan élvezzük a wi-fi hálózatot és a nagy teljesítményű kábelcsatlakozást az esetek 80% -ában, nem szabad elragadnunk. Az utolsó dolog, amit el kell tennie, hogy elveszíti az ügyfelét vagy az olvasót, mert unatkozik, amikor valamit keres az Ön webhelyén, de az oldalai túlságosan nehezen töltődnek be átlagos telefonján, a kávézó vezeték nélküli hálózatán. sarok. A töltési idők optimalizálásakor mindig gyenge kapcsolatokra és gyengébb eszközökre kell utalnunk. Számomra igazságosnak tűnik, hogy egy 3G-s internethasználó elolvashatja kedvenc cikkét anélkül, hogy 30 évig ülne, amíg az oldala betöltődik.
Felelősek vagyunk azért, amit a netre tettünk. Akár tervezők, fejlesztők, adminisztrátorok vagy bloggerek vagyunk. Ha mindannyian odafigyelnénk webhelyeink oldalainak méretére, jobb élményt kapnánk minden felhasználó számára.
Az én kihívásom az Ön számára: mindent optimalizál. Optimalizálja és tekintse meg a betöltési időket a 32 x 32 képpontos .png-től a legújabb .jpg-ig. A felhasználók értékelni fogják, a Google értékelni fogja, és csak annyit kell tennie, hogy nyerjen. Csak időbe kerül. Ha a következő szintre akar lépni, optimalizálja a .js és a .css fájlokat is. Ha 200kb-nál többet takarít meg anélkül, hogy képet adna, akkor sikeresnek nyilvánítom optimalizálását. Kíváncsiak vagyunk az eredményeire.
Ha tetszett a cikk, ne felejtsd el megosztani, hogy az összes webhelyet gyorsabbá tudjuk tenni. Itt a diéta ideje!
[social_buttons facebook = ”true” twitter = ”true” google_plus = ”true” linkedin = ”true”]