Elementor de performanță și o singură pagină, prea mult CSS și JavaScript rezolvate - HTMLCSS - Programare -

[Rezolvat] Elementor de performanță și o pagină, prea mult CSS și Javascript

Buna ziua !

singură

Am construit un site Wordpress, bazat pe tema Astra, cu Elementor (+ câteva modificări CSS personalizate prin Astra), în modul „o singură pagină”, găzduit la o2switch. Se afișează la o viteză decentă, cu toate acestea site-urile de testare a performanței îmi dau un rating slab, până la doar 60% pentru Google (mai rău pe mobil 12%!), Ceea ce mă face să mă tem pentru SEO.

În mod ciudat, conform PageSpeedTest, Google CDN/Maps/Fonts pierde multe secunde pentru mine. În afară de asta, Google mă încurajează să-mi îmbunătățesc foile de stil CSS și JavaScript. Prin intermediul unui inspector web, observăm că am multe dintre ele. De asemenea, observ că unele foi de stil sunt „min” în timp ce mi-am eliminat pluginurile de cache/minification (rezultate dezamăgitoare sau erori). Observ în sfârșit că am foi de stil duplicat.

=> Ar fi util să curățați și/sau îmbinați mai multe foi de stil CSS ? Dacă da, cum (sunt autodidact.) ?
=> În ceea ce privește Javascript, despre care nu știu absolut nimic, ar trebui să-l ating în vreun fel ?
=> Vedeți slăbiciuni sau erori majore în construcția site-ului, care ar împiedica performanța ?

mulțumesc foarte mult

Mai mult de 5 MB de fișiere de încărcat pe pagina de pornire și durează mai mult de 6 secunde în timp ce sunt pachet, este clar că există un pb cu site-ul dvs.

Pui totul pe o singură pagină, nu este deloc o idee bună. Cei care vă vizitează site-ul cu un telefon mobil vă vor blestema. Puteți încărca diferitele secțiuni la cerere în funcție de poziția derulării verticale (necesită js) sau o pagină dedicată fiecărei secțiuni.

De asemenea, încercați să optimizați dimensiunea imaginilor dvs. pentru a reduce greutatea.

Editați: de ex. Imaginea de fundal cu triunghiuri repetate. Faceți o imagine mai mică pe care o veți duplica pe x și eventual pe y cu css.

Exemplu prost: logoul tău în SVG are 429 kb, trecând o lovitură de SVGO peste el merge la 16kb, i-am împărțit greutatea la 26 fără pierderi de calitate.
există 4 apeluri către recaptcha_en.js, trebuie să existe o integrare defectuoasă a acestuia.

Multumesc amandurora

Tocmai am comprimat sigla conform recomandărilor (17kb) și am șters reCaptcha cu totul (a fost pentru formularul de contact sau WPforms include un honeypot, așa că ar trebui să fie suficient), dar ar trebui să verific dacă există mai multe întrebări: pot vedea acest lucru acolo unde ?

Celelalte imagini sunt optimizate cu Imagify. Fundalul triunghiurilor rămâne puțin greu, dar nu este o simplă multiplicare a acelorași triunghiuri. Așadar, fie las această mică greutate, fie sacrific sacrificiile estetice: încă mă gândesc la asta.

Designul „cu o singură pagină”, îl respect (pentru moment): este destul de obișnuit pentru un site de prezentare, în coduri de navigare mobile/rețele sociale și nu am mult conținut, așa că îl păstrez. ' sper să optimizăm toate acestea.

Nu ați spus nimic despre multiplele foi de stil CSS și JavaScript: problema nu este acolo ?

Plănuiesc să copiez și să lipesc conținutul diferitelor coli în același fișier. Nu știu dacă ar trebui să trec printr-o temă pentru copii, pe care nu am creat-o până acum pentru că nu atinsesem direct fișierele, am lucrat doar cu Elementor.

Printre altele, provii din tot ce apare pe o pagină. Personal, mi se pare oribil și deloc ergonomic. Acest concept de pe o pagină este un verset cu încărcare dinamică sau scroll infinit

configurați, de asemenea, încărcarea lazy pentru imagini, încărcați imaginile numai atunci când acestea apar în fereastra de vizualizare

Multumesc amandurora

Nu ați spus nimic despre multiplele foi de stil CSS și JavaScript: problema nu este acolo ?

De asemenea, dar manual, este complicat să optimizați dacă nu este treaba dvs.
Deci, puteți utiliza un plugin precum https://wordpress.org/plugins/shins-pageload-magic/
Faceți câteva cercetări în pluginuri, unii plătesc și ei.
Vedeți dacă scorul dvs. este mai bun și păstrați-l pe cel care funcționează cel mai bine.

+1 pentru faptul că totul pe o pagină este oribil (dar la modă). Și adăugarea lazy-loading înseamnă adăugarea de JS, nu-i așa? Și mai rău, totuși, un site care nu va funcționa fără.

Site-urile js complete reprezintă o adevărată durere pentru accesibilitatea web, în ​​special pentru persoanele cu deficiențe de vedere.
Am impresia că puțini dezvoltatori web sunt conștienți de această problemă în cursul instruirii lor. Cu toate acestea, reprezintă între 10 și 15% din pop-ul francez. Prin urmare, nu este deloc neglijabil în ceea ce privește activitatea.

Site-urile js complete sunt o adevărată durere pentru accesibilitatea web, în ​​special pentru persoanele cu deficiențe de vedere.
Am impresia că puțini dezvoltatori web sunt conștienți de această problemă în cursul instruirii lor. Cu toate acestea, reprezintă între 10 și 15% din pop-ul francez. Prin urmare, nu este deloc neglijabil în ceea ce privește activitatea.

un cititor de ecran se bazează pe DOM, deci dacă site-ul este plin, JS poate merge, schimbarea paginii sau altele poate fi cu adevărat plictisitoare

Cu toate acestea, reprezintă între 10 și 15% din pop-ul francez. Prin urmare, nu este deloc neglijabil în ceea ce privește activitatea.

[HS] Aș dori să am mai multe detalii cu privire la aceste cifre, pentru că dacă nu numără persoanele care poartă dispozitive de corecție a vederii (ochelari sau lentile) nu văd cum putem ajunge la un număr atât de mare. Și, evident, nu are sens să folosești această statistică dacă îi numără pe acești oameni de acolo, deoarece aceștia au deja o soluție care face ca problema învechită a utilizării JS să fie învechită.
După aceea, nu spun că nu ar trebui să depuneți eforturi, ci doar că numărul mi se pare înșelător. [/ HS]


---------------
Scriind orice, devii oricine.

un cititor de ecran se bazează pe DOM, deci dacă site-ul este plin, JS poate merge, schimbarea paginii sau altele poate fi cu adevărat plictisitoare

Ceea ce reprezintă pb este schimbarea conținutului după ce pagina s-a încărcat. NVDA, unul dintre cele mai populare și gratuite cititoare de ecran, nu se poate descurca.

Unul dintre membrii școlii fiicei mele este 85-90% orb. Ea îmi spune din când în când pbs-urile pe care le întâlnește în timp ce navighează pe site-uri. Mi-a spus în special că multe site-uri de comerț electronic nu sunt potrivite pentru ea. La un moment dat, în procesul de cumpărare, există ceva care înseamnă că nu poate merge până la capăt singură.

La fel de mult pentru mine, am amestecat statutul handicapului vizual cu setul de persoane cu handicap care întâmpină PBS pentru a accesa site-urile web (și, în acest caz, statisticile mele au fost subestimate):
https://ircf.fr/actualites/accessib [. ] -Internet/
https://www.aveuglesdefrance.org/qu [. ] e-vizual

Handicapul vizual este puțin mai puțin de 3% din pop în Franța (1,7 milioane), îmi pare rău.

+1 pentru faptul că totul pe o pagină este oribil (dar la modă). Și adăugarea lazy-loading înseamnă adăugarea de JS, nu-i așa? Și mai rău, totuși un site care nu va funcționa fără.