lv.allworldrating.com
Raksti

Kā samazināt DOM lielumu pakalpojumā WordPress

Vai arī GTmetrix "Samazināt DOM elementu skaitu":

Kas ir DOM?

Kad jūsu pārlūkprogramma saņem HTML dokumentu, tas ir jāpārvērš koka struktūrā, kas tiek izmantota renderēšanai un zīmēšanai ar CSS un JavaScript.

Šo koka struktūru sauc par DOM vai dokumenta objektu modeli.

  • Mezgli Visi HTML elementi DOM tiek saukti par mezgliem. (aka "lapas" uz koka).
  • Dziļums – Cik ilgi “zars” iet kokā, sauc par dziļumu. Piemēram, iepriekš redzamajā diagrammā img taga dziļums ir 3. (HTML -> body -> div -> img).
  • Bērnu elementi – visi mezgla atvasinātie mezgli (bez tālākas atzarošanas) ir bērni.

Lighthouse un Google PageSpeed ​​​​Insights sāk atzīmēt lapas, ja ir izpildīts kāds no šiem nosacījumiem:

  • Kopā ir vairāk nekā 1500 mezglu.
  • Dziļums ir lielāks par 32 mezgliem.
  • Vecuma mezglam ir vairāk nekā 60 pakārtotu mezglu.

Kā DOM izmērs ietekmē veiktspēju?

Pārmērīgs DOM lielums var ietekmēt veiktspēju dažādos veidos.

  • Augstāks parsēšanas un renderēšanas laiks (FCP) . Liels DOM koks un sarežģīti stila noteikumi lieliski darbojas pārlūkprogrammā. Pārlūkprogrammai ir jāparsē HTML, jāizveido renderēšanas koks utt. Ikreiz, kad lietotājs mijiedarbojas vai kaut kas mainās HTML, pārlūkprogrammai tas ir jāaprēķina vēlreiz.
  • Palielina atmiņas izmantošanu - Jūsu JavaScript kodam var būt funkcijas, lai piekļūtu DOM elementiem. Lielāks DOM koks liek JavaScript izmantot vairāk atmiņas to apstrādei. Piemērs varētu būt vaicājumu atlasītājs, indocument.querySelectorAll('img')kurā ir uzskaitīti visi attēli, ko parasti izmanto slinkas ielādes bibliotēkas.
  • Palielina TTFB – Palielinoties DOM izmēram, palielinās HTML dokumenta izmērs (KB). Tā kā tīklā ir jāpārsūta vairāk datu, tas palielina TTFB.

Kā tehniski samazināt DOM izmēru?

Piemēram, tehniski ir viegli samazināt DOM lielumu:

lietojums:

<ul id="navigation-main">etc..</ul>

tā vietā:

<div id="navigation-main"><ul>etc..</ul></div>

Būtībā atbrīvojieties no visiem iespējamiem HTML elementiem. Varat arī izmantot Flexbox vai Grid, lai vēl vairāk samazinātu DOM izmēru.

Bet, tā kā jūs izmantojat WordPress, tas jums daudz nepalīdzēs!

Kā samazināt DOM lielumu programmā WordPress?

Sadaliet lielas lapas vairākās lapās

Vai jums ir lapa ar visu vietnē esošo? Vai jums patīk pakalpojumi, saziņas veidlapas, produkti, emuāra ziņas, atsauksmes utt.?

Mēģiniet tos sadalīt vairākās lapās un izveidot saiti uz tām no galvenes/navigācijas joslas.

Slinka ielādēšana un visa iespējamā lapošana

Slinka visu veidu elementu iekraušana. Šeit ir daži piemēri:

  • YouTube video slinka ielāde - Izmantojiet WP YouTube Lyte vai WP Rocket Lazy Load.
  • Ierobežojiet emuāra ziņu/produktu skaitu vienā lapā – Es parasti cenšos saglabāt ne vairāk kā 10 emuāra ierakstus vienā lapā, bet pārējos izkārtoju lapas.
  • Slinka emuāra ierakstu/produktu ielāde - Pievienojiet pogu Ielādēt vairāk vai bezgalīgu ritināšanu, lai ielādētu vairāk emuāra ziņu vai produktu.
  • Slinki ielādē komentārus - Es izmantoju Disqus nosacīto ielādi, jo izmantoju Disqus . Ja izmantojat savus komentārus, izmantojiet tādus spraudņus kā Lazy Load for Comments .
  • Komentāru lappušu šķirošana - ja jums ir simtiem komentāru, tas var ietekmēt arī DOM lielumu. Lai sakārtotu komentārus, atveriet sadaļu Iestatījumi -> Diskusija -> Komentāru lapas.
  • Ierobežojiet saistīto ziņu skaitu - Mēģiniet ierobežot saistīto ziņu skaitu līdz 3 vai 4.

Piezīme: slinka attēlu ielāde nesamazinās DOM izmēru

Neslēpiet nevēlamos elementus, izmantojot CSS

Dažreiz jums var būt nepieciešams noņemt motīva/dizainera ieviestos elementus. Piemēram, preču lapās pievienojiet grozam pogu, cenas pogu, informāciju par autoru, publicēšanas datumu utt.

Ātrs risinājums ir to paslēpšana, izmantojot CSS:

.cart-button {display:none;}

Lai gan šis risinājums izskatās vienkāršs, jūs pakļaujat lietotājus nevēlamam kodam (kas ietver gan HTML marķējumu, gan CSS stilu).

Pārbaudiet motīva/spraudņa iestatījumus, lai redzētu, vai ir iespēja to noņemt. Pretējā gadījumā atrodiet attiecīgo PHP kodu un noņemiet/komentējiet to.

Izmantojiet labi uzrakstītas tēmas un lapu veidotājus

Labai tēmai ir svarīga loma DOM izmērā. Izmantojiet labi uzrakstītas tēmas, piemēramGeneratePress vaiAstra .

Lapu veidotāji arī ievieš pārāk daudz div. Izmantojiet tādus konstruktorus kāskābeklis, kas neievieš nevēlamus div blokus un vairāk kontrolē HTML struktūru.

Secinājums

Var būt vairāk spraudņu vai motīvu iestatījumu, kas ievieš pārāk daudz div. Piemērs varētu būt "mega menu" spraudņi, piemēram, UberMenu.

Dažreiz tie ir ļoti svarīgi jūsu vietnes lietotāja pieredzei. Bet dažreiz lietotāji tos nekad neizmanto.

Iespējams, uz jūsu kājenes saitēm nekad netiek noklikšķināts, jo lielākā daļa apmeklētāju ritina tikai līdz 75%.

Izmantojiet tādus rīkus kā HotJar vai Google Analytics Events, lai uzzinātu, ko apmeklētāji faktiski izmanto un ko neizmanto.Analizējiet, izmēriet un atkārtojiet.

Interesanti Raksti