Teljesítményelem és egy oldal, túl sok CSS és JavaScript megoldva - HTMLCSS - programozás -

[Megoldva] Teljesítményelem és egy oldal, túl sok CSS és Javascript

Szia !

Építettem egy Wordpress webhelyet, az Astra téma alapján, az Elementorral (+ néhány egyedi CSS módosítás az Astrán keresztül), "egy oldal" módban, az o2switch tárhelyén. Megfelelő sebességgel jelenik meg, azonban a teljesítményteszt-webhelyek rossz minősítést adnak nekem, a Google-nál csak 60% -ot (mobilon 12% -nál rosszabb!), Ami féltővé tesz a SEO-val szemben.

Furcsa módon a PageSpeedTest szerint a Google CDN/Maps/Fonts sok percet pazarol nekem. Ettől eltekintve a Google arra ösztönöz, hogy javítsam a CSS-stíluslapjaimat és a JavaScript-et. Egy webellenőr útján láthatjuk, hogy sokan vannak nálam. Azt is megjegyzem, hogy egyes stíluslapok "min" -ek, még akkor is, ha eltávolítottam a gyorsítótár/tömörítő bővítményeimet (kiábrándító eredmények vagy hibák). Végül megfigyelem, hogy vannak duplikált stíluslapjaim.

=> Hasznos lenne tisztítsa és/vagy egyesítse a több CSS stíluslapomat ? Ha igen, hogyan (én autodidakta vagyok.) ?
=> Ami a Javascript, amiről semmit sem tudok, hozzá kellene-e nyúlnom valamilyen módon ?
=> Látsz-e valamilyen gyengeséget ill a helyszín megépítésében bekövetkezett nagyobb hibák, ez akadályozná a teljesítményt ?

nagyon szépen köszönjük

Több mint 5 MB fájl töltődik be a kezdőlapra, és több mint 6 másodpercbe telik, míg a csomagban vagyok, egyértelmű, hogy van egy pb a webhelyével

Mindent egy oldalra tesz, ez egyáltalán nem jó ötlet. Azok, akik mobilon látogatják az Ön webhelyét, átkoznak. Vagy betöltheti a különböző szakaszokat igény szerint a függőleges görgetés pozíciójától függően (js szükséges), vagy az egyes szakaszokhoz rendelt oldalt.

Próbálja meg optimalizálni a képek méretét a súly csökkentése érdekében.

Szerkesztés: pl. A háttérkép ismétlődő háromszögekkel. Készítsen egy kisebb képet, amelyet az x-re és esetleg y-re másol a css-sel.

Példa csak hülyére: az emblémád SVG-ben 429 kb, azáltal, hogy egy SVGO-löketet adunk át rajta, ez 16 kb-ra megy, súlyát 26-ra osztottam minőségromlás nélkül.
4 hívás van a recaptcha_en.js címre, rossz integrációra van szükség.

Köszönöm mindkettőtöknek

Csak tömörítettem a logót az ajánlások szerint (17 kb), és teljesen kitöröltem a reCaptchát (a kapcsolatfelvételi űrlapra volt szükség, vagy a WPforms tartalmazott egy mézes edényt, így elégnek kellett lennie), de ellenőriznem kell, hogy van-e további lekérdezés: ezt látom, ahol ?

A többi képet az Imagify alkalmazással optimalizálták. A háromszögek háttere kissé nehéz marad, de ez nem ugyanazok a háromszögek egyszerű szorzata. Tehát vagy otthagyom ezt a kis nehézséget, vagy feláldozom az esztétikát: még mindig gondolkodom rajta.

Az "egyoldalas" kialakításhoz ragaszkodom (pillanatnyilag): meglehetősen gyakori egy kirakatos webhely, mobil navigációs kódokban/közösségi hálózatokban, és nincs sok tartalmam, ezért megtartom. " remélem, hogy mindezt optimalizálom.

Nem mondtál semmit a több CSS stíluslapról és a JavaScript-ről: a probléma nincs ott ?

Tervezem másolni és beilleszteni a különböző lapjaim tartalmát egy fájlba. Nem tudom, át kellene-e mennem egy gyerek témán, amelyet eddig nem hoztam létre, mert nem közvetlenül nyúltam hozzá a fájlokhoz, csak az Elementorral dolgoztam.

Többek között egy oldal mindenéből származik. Személy szerint szörnyűnek és egyáltalán nem ergonómikusnak tartom. Az 1 oldalon található koncepció dinamikus betöltéssel vagy végtelen görgetéssel rendelkező vers

állítsa be a képek lustanyomását is, csak akkor töltse be a képeket, amikor megjelennek a nézetablakban

Köszönöm mindkettőtöknek

Nem mondtál semmit a több CSS stíluslapról és a JavaScript-ről: a probléma nincs ott ?

Ha igen, de kézzel bonyolult optimalizálni, ha nem ez a dolga.
Tehát használhat egy plugint, például https://wordpress.org/plugins/shins-pageload-magic/
Végezzen némi kutatást a beépülő modulokban, mások fizetnek is.
Nézze meg, hogy jobb-e a pontszáma, és tartsa meg azt, amelyik a legjobban működik.

+1-et azért, hogy egy oldalon minden borzalmas (de trendi). És a lusta betöltés hozzáadja a JS-t, nem? Még ennél is rosszabb, mégis egy webhely, amely nélkül nem fog működni.

A teljes js oldalak valódi fájdalmat jelentenek a webelérhetőség szempontjából, különösen a látássérültek számára.
Az a benyomásom, hogy kevés webfejlesztő ismeri ezt a kérdést a képzés során. Mégis a francia pop 10–15% -át képviseli. Ezért üzleti szempontból egyáltalán nem elhanyagolható.

uh a képernyőolvasó a DOM-on alapul, tehát ha a webhely tele van JS, akkor mehet, akkor az oldalváltás vagy más lehet igazán unalmas

Mégis a francia pop 10–15% -át képviseli. Ezért üzleti szempontból egyáltalán nem elhanyagolható.

[HS] Szeretnék részletesebben megismerni ezeket az adatokat, mert ha nem számolom azokat az embereket, akik látásjavító eszközöket (szemüveget vagy lencsét) viselnek, nem látom, hogyan érhetnénk el ilyen magas számot. És nyilván nincs értelme ezt a statisztikát használni, ha ezeket az embereket ott számolja, mivel már van megoldásuk, amely elavulttá teszi a JS használatának problémáját.
Ezek után nem azt mondom, hogy nem szabad erőfeszítéseket tenni, csak az a szám, hogy félrevezetőnek tűnik számomra. [/ HS]

---------------
Bármit megírva bárkivé válhatsz.

uh a képernyőolvasó a DOM-on alapul, tehát ha a webhely tele van JS, akkor mehet, akkor az oldalváltás vagy más lehet igazán unalmas

Amit a pb jelent, az a tartalom változása, miután az oldal betöltődött. Az NVDA, az egyik legnépszerűbb és ingyenes képernyőolvasó, nem képes kezelni.

A lányom egyik iskolatagja 85-90% -ban vak. Időről időre elmondja a pbs-ket, amelyekkel a helyszíneken szörfözve találkozik. Különösen azt mondta nekem, hogy sok e-kereskedelmi webhely nem alkalmas rá. Valamikor a vásárlási folyamatban van valami, ami azt jelenti, hogy nem tudja egyedül végigmenni.

Nekem annyit tettem, hogy a vizuális hátrány statisztikáját összekevertem a fogyatékkal élők csoportjával, akik pbs-vel találkoztak a weboldalak elérése érdekében (és ebben az esetben a statisztikámat alábecsülték):
https://ircf.fr/actualites/accessib [. ] -Internet/
https://www.aveuglesdefrance.org/qu [. ] e-vizuális

A vizuális hátrány valamivel kevesebb, mint 3% -a a francia popszámnak (1,7 millió), sajnálom.

+1-et azért, hogy egy oldalon minden borzalmas (de trendi). És a lusta betöltés hozzáadja a JS-t, nem? Még ennél is rosszabb, mégis egy webhely, amely nélkül nem fog működni.