More

    Milyen SEO szakembereknek tudniuk kell a SPA webhelyekről

    Ebben a cikkben elmondjuk, hogy milyen gyógyfürdők vannak, hogyan lehet azonosítani őket, és miért van szükség előzetes megjelenítésre. 

    1. Mik azok a SPA oldalak? 

    PA (egyoldalas alkalmazás) – egyoldalas alkalmazás. A névből egyértelmű, hogy ez egy 1 oldalindexből álló webhely.html. 

    Példák a SPA webhelyeire: 

    • https://www.mvideo.ru/, 
    • https://www.utkonos.ru/, 
    • https://www.freelancer.com/, 
    • https://www.ozon.ru/, 
    • https://www.delivery-club.ru.

    Ahhoz, hogy megértsük, hogyan különbözik a gyógyfürdő a szokásos webhelytől, meg kell vizsgálnunk, hogyan működnek összehasonlítva. 

    Egy rendszeres webhelyen a felhasználó HTML-jelölést kap a kiszolgálótól, a kapott CSS-fájlok stílusainak felhasználásával készült, majd a JS szkriptek egymásra vannak helyezve, amelyek “animálják” a webhely interaktív részeit. Amikor egy másik oldalra lép a szerverről, újra HTML-t kap, és minden újra megtörténik. Ez az, ha teljesen leegyszerűsíti a normál webhely működését. 

    A Klasszikus Gyógyfürdő működési elve kissé eltér. A webhely kezdeti látogatása során a felhasználó nem kap HTML jelölést, ehelyett egy vagy több JS fájlt kap, amelyek már tartalmazzák az összes szükséges HTML-t, néha CSS-kódot. Ezzel párhuzamosan kérés érkezik a kiszolgálóhoz dinamikus adatok (tartalom) beszerzésére. 

    A fájlok beérkezése után a JavaScript HTML jelölést generál közvetlenül a felhasználó böngészőjében, majd a tervezéshez szükséges CSS-t írja elő. Ezért, ha megnyitja a klasszikus SPA forráskódját, akkor nem fog látni semmit, kivéve a JS és néha a CSS fájlok csatlakoztatását, mert a felhasználó által igényelt HTML már a JS fájlokban található. 

    Például: 

    A legérdekesebb varázslat akkor történik, amikor a webhely másik oldalára lép. Mivel az Útválasztás (navigáció és útválasztás) a felhasználó böngészőjében történik, nem kell újra fájlokat szereznie a szerverről, mert már megkaptunk mindent, amire szükségünk van, ami azt jelenti, hogy azonnal megjelenítheti a webhely teljes statikus részét, és csak várja meg, amíg a dinamikus tartalom (szövegek, képek) megérkezik a szerverről. 

    Ez a megközelítés nagyban felgyorsítja az oldalak közötti átmenetet, ezért a felhasználó használhatja a webhelyet anélkül, hogy megvárná, amíg a szerver HTML-t generál, majd visszaadja, mert ez a lépés egyszerűen nem létezik itt. Sőt, a SPA fejlesztők még tovább ment, és megtanította a JS kódot betölteni más szükséges JS fájlokat pontosan, amikor szükség van rájuk, nem egyszerre. Ezt a folyamatot lusta betöltésnek hívták. 

    Sajnos a klasszikus SPA nem túl hasznos, ha egy webhelyet szeretne népszerűsíteni, mivel nem minden keresőrobot megtanulta, hogyan kell helyesen értelmezni a JS kódot az indexeléshez. Alapértelmezés szerint a robotok a SPA-t szinte üres HTML fájlnak tekintik, amelyben csak fájlkapcsolatok vannak. De még itt is a fejlesztők találtak kiutat. Ezt “előrendelésnek”nevezik. 

    2. Milyen SPA oldalak vannak?

    Különböző keretek vannak a SPA alkalmazások fejlesztésére. Legnépszerűbb: 

    • Szögletes
    • React (könyvtár)
    • Vue
    • Ember et al. 

    A keretrendszer olyan szoftver, amely megkönnyíti és felgyorsítja a projekt fejlődését. A keretrendszer meghatározza a szoftvertermék kifejlesztésének és architektúrájának felépítésének szabályait, meghatározva egy bizonyos “keretet”, amelyet a meghatározott követelményeknek megfelelően ki kell terjeszteni és módosítani kell. 

    OLVASS TOVÁBB:  Hogyan értékeljük a SEO hatékonyságát és üzleti teljesítményét?

    Ezután megvizsgáljuk a spa helyszíneket a szögletes keretben.

    3. Hogyan állapítható meg, hogy egy hely egy SPA szögletes 

    Ehhez meg kell nyitnia a fejlesztői konzolt a lapon a vizsgált webhelyen (ctrl shift i). 

    Что SEO-специалисты должны знать о SPA-сайтах

    Fejlesztői konzol a Yandex böngészőben

    A SPA webhely felfedezéséhez fülekre lesz szüksége: 

    • Hálózat,
    • Elemek. 

    Számos módja van annak meghatározására, hogy egy webhely a szögletes keretrendszer segítségével épül-e fel. 

    • Kód szerint 

    Az oldal forráskódjában (ctrl shift i) van egy címke az NG-verzió attribútummal az elemek lapon.

    Что SEO-специалисты должны знать о SPA-сайтах

    Ezt a címkét maga az Angular adja hozzá az alkalmazás összeállításakor, majd jelzi a keretrendszer verzióját. Jelenleg az Angular legújabb verziója a 11-es verzió. 

    • Kötegek (JS fájlok) 

    Csomagolás-az összes js alkalmazásfájl kombinálása több nagy fájlba annak érdekében, hogy minimálisra csökkentsék a kiszolgálóra irányuló kérelmek számát. 

    A Hálózat lapon a JS szkriptek betöltődnek: main.js, futás.js, szkriptek.js, polyfills.js. A fő kötegek neve nem változik szögletes. (Ne felejtsük el azonban,hogy más keretrendszerekben a fejlesztők maguk is beállíthatnak hasonló fájlneveket). 

    OLVASS TOVÁBB:  5 könyv egy szakértőtől: Andrey Sebrant (Yandex)

    Что SEO-специалисты должны знать о SPA-сайтах

    Fontos! Ha nincs hash kód a JS fájlok nevében(fő.*.js, ahol * egy tetszőleges betű – és számkészlet, amely jelzi a prod-build használatát), akkor a webhely nem használja az AOT-összeállítást (olvassa el az AOT-összeállítást a ” mit kell figyelni a fejlesztői konzolon?”). 

    • Böngésző plugin használata, amely lehetővé teszi a CMS, a keretrendszer, a programozási nyelv stb. 

    Például Wappalyzer. 

    Что SEO-специалисты должны знать о SPA-сайтах

    4. Mit kell figyelni a fejlesztői konzolon 

    A SPA alkalmazás teljesítményének javítása érdekében a fejlesztő számos optimalizálási módszert alkalmazhat, amelyek ellenőrizhetők a konzolon: 

    • Minification az üres sorok, Megjegyzések és a fel nem használt kód eltávolítása a kódból (fa rázkódás). Ez csökkenti a kötegek méretét. A minified fájl 1-2 sorral rendelkezik, míg a nem minified fájlnak sok sora lesz. 

    Что SEO-специалисты должны знать о SPA-сайтах

    Minified fő köteg.js 

    • Agglifikáció (Uglify) – ez az elemek hosszú nevének (módszerek, változók stb.)) rövidekkel, míg a fájl mérete kisebb lesz. Rendszerint a minifikációval együtt használják. 
    • Tömörítés. A válaszok tömörítése bevett gyakorlat az alkalmazás betöltéséhez használt forgalom csökkentésére. Az Elfogadás-kódolás fejlécének megadásával a böngésző megmondja a kiszolgálónak, hogy mely tömörítési algoritmusokat támogatja az ügyfélszámítógépen. A kiszolgáló viszont beállítja a Tartalomkódolás értékét a válaszfejlécben, hogy megmondja a böngészőnek, melyik tömörítési algoritmust alkalmazták. 

    Az ellenőrzéshez meg kell nézni a Válaszfejléceket – függetlenül attól, hogy van-e tartalom-kódolás, valamint hogy milyen értéket tartalmaz (például gzip). 

    Что SEO-специалисты должны знать о SPA-сайтах

    Ezenkívül ellenőrizheti, hogy az archiválás hogyan valósul meg-minden fájl esetében, vagy csak nehéz fájlok esetén. A könnyű válaszokat (egyenként 1-2 KB) nem szabad archiválni, mert a kicsomagolás időt vesz igénybe. Ennek az ajánlásnak a betartása nem túl kritikus, mert nem ad jelentős teljesítménynövekedést. 

    • AOT – Angolul) – idő előtt – előzetes összeállítás – az url-re kattintva néhány kóddarab előzetesen kialakul. Ez jelentősen növeli a webhely betöltési sebességét. Van is egy JIT összeállítás (éppen időben – összeállítás közvetlenül a böngészőben). 
    OLVASS TOVÁBB:  Az oroszországi digitális marketingszakemberek fizetésének elemzése 2020-ra és a jelöltekre vonatkozó követelmények

    A SPA alkalmazás teljesítménye a továbbított információk méretétől függ. Ezért évről évre az Angular küzd a kötegek (JS fájlok) méretének csökkentése érdekében verzióról verzióra. 

    A JIT-összeállítás során a fordító a kötegekbe kerül, amely először további helyet foglal el, másrészt elveszi az ügyfél erőforrásait a sablonok (html-kód) összeállításához. Az AOT-összeállítás során a HTML-t lefordítják JS-funkciókra, a fordító pedig nem szerepel a csomagokban. Így a köteg mérete csökken, a sablonok összeállításának sebessége pedig növekszik, mivel az előzetes összeállítás már megtörtént. 

    • Lazyloading modulok. Ez a technológia lehetővé teszi az alkalmazás számára, hogy betöltse a darabokat, ahelyett, hogy egyetlen js-becenevet használna az egész webhely betöltéséhez. Ellenőrizheti, hogy van-e lazyloading, amikor a fejlesztői konzolon keresztül navigál (hálózati lap). Ha további JS fájlok vannak betöltve, akkor lazyloading van jelen. Az Angular azt ajánlja, hogy a JS-t darabokra törje, majd csak akkor töltse be, ha a felhasználó hozzáfér hozzájuk. 

    A SPA projekt szerkezete faként ábrázolható: a csomagtartóból sok ág (modul) található. Minden modult úgy kell betölteni, ahogy használják. Abban az esetben, ha az egész fa betöltődik, a webhely kezdeti betöltési sebessége csökken, ami negatívan befolyásolja az összes mutatót.

    • Memória szivárgás: előfizetések (feliratkozás), módszerek. Az alkalmazás összetevői előfizetéseken keresztül kommunikálnak egymással. Egyes fejlesztők elfelejtik megtisztítani az előfizetéseiket, és feltöltik az ügyfél memóriáját. Az előfizetéseket törölni kell. A bal oldali előfizetések befolyásolják az alkalmazás betöltését és sebességét, miközben vele dolgoznak (az oldalak navigálásakor az alkalmazásnak sok eszközmemóriára van szüksége, és jelentősen hosszabb ideig töltődik be). A konzol memória lapján ellenőrizheti az elosztási mintavételi profil bejegyzésével:

    Что SEO-специалисты должны знать о SPA-сайтах

    A felvétel megkezdése után navigálnia kell a webhely oldalain a fejlesztői konzol megnyitásával. Nem kell ezt sokáig csinálnod. A felvétel leállítása után naplót generál: 

    OLVASS TOVÁBB:  Válasszon kategóriát a Google Cégem kártyához

    Что SEO-специалисты должны знать о SPA-сайтах  

    A teljes méret oszlop tájékoztatja Önt az Ügyfélnek küldött adatokról. A képernyőkép azt mutatja, hogy a webhely egyes funkciói sok adatot továbbítottak, amelyek eltömítik az eszköz RAM-ját. Így a mobil eszközökön a webhely hosszú távú használata teljesítményproblémákhoz vezethet. 

    • Szögletes változat – A kilencedik verzió óta az Ivy technológia alapértelmezés szerint engedélyezve van. Ivy egy összeállítás és renderelés technológia. Ez egy áttöréses technológia, mert bizonyos esetekben lehetővé teszi a kötegek méretének akár 40% – kal történő csökkentését, ami pozitív hatással van a webhely kezdeti betöltésére. 

    Az Angular verziót a fejlesztői konzolon az ng-verzió paraméter értékével ellenőrizheti: 

    Что SEO-специалисты должны знать о SPA-сайтах

    Ha a 8-as verzió meg van adva, megkérdezheti a fejlesztőket, hogy engedélyezve van-e az Ivy technológia. 

    • URL routing. A webhely minden oldalának saját URL-jével (útválasztással) kell rendelkeznie. A megadott URL alapján létre kell hozni egy adott, a kívánt tartalommal rendelkező oldalt. Fontos ellenőrizni, hogy az oldalak külön URL-eket generálnak – e: bevásárlókosár, termékszűrés, válogatás, webhely keresési eredmények stb. 

    Friss cikkek

    Hogy megy a mobil fejlesztői interjú?

    Alexander Anikin, dékán a kar Android fejlesztési GeekBrains18 május 20216 perc 29https: / /d2xzmw6cctk25h.cloudfront.net/post/2624 / og_image / d6b0df6963fad75c41266e6f67eabafe. png Már beszéltünk arról, hogy milyen...

    Kommunikációs csatornák a vendéggel az étteremben. Ami fontos, hogy ne felejtsük el

    A kommunikáció nem csak a szavaid és gondolataid szóbeli kifejezése. A kommunikáció marketing is lehet: amikor a promóciós anyagok, a menüben kiválasztott kifejezések...

    Mit tettünk egy olyan helyzetben, amikor egy versenytársat a mi költségünkre népszerűsítettek

    A versenytársak különbözőek. Ügyfelünk-a turistaosztály házának fejlesztője - nagyon leleményes volt. Kitalálta, hogyan reklámozhatja tárgyait hirdetési kampányainkon keresztül.  Elmondjuk a történetet arról,...

    Kapcsolódó történetek

    HOZZÁSZÓLOK A CIKKHEZ

    Kérjük, írja be véleményét!
    írja be ide nevét

    Maradjon op - Ge a napi híreket a postaládájában