Adnoddau sy'n rhwystro rendro

Mae Silktide yn gwirio am ddalennau arddull a sgriptiau y mae'n rhaid i'r porwr eu lawrlwytho'n llwyr cyn y gall ddangos unrhyw beth ar eich tudalen. Mae pob un ohonynt yn cadw ymwelwyr yn syllu ar sgrin wag ychydig yn hirach.

Yn ddiofyn, mae dalen arddull neu sgript y cyfeirir ati ger brig tudalen yn rhwystro rendro: ni fydd y porwr yn paentio unrhyw beth nes bod y ffeil wedi cyrraedd, gan y gallai'r ffeil newid sut mae popeth yn edrych neu'n ymddwyn.

Pam mae hyn yn bwysig

Yr eiliadau gwag cyn i dudalen ymddangos am y tro cyntaf yw pan fydd ymwelwyr yn penderfynu a ydynt am aros. Mae pob ffeil sy'n rhwystro rendro yn ychwanegu taith gron rwydwaith at yr amser gwag hwnnw, ac mae'r oedi'n cronni'n gyflym ar gysylltiadau symudol - gall llond llaw o ffeiliau rhwystro gadw tudalen sydd fel arall yn gyflym yn wyn am eiliadau.

Mae'r rhan fwyaf o'r rhwystro hwnnw'n ddiangen. Fel arfer, dim ond rhan fach o tudalen sydd ei hangen i lunio'r sgrin gyntaf, ac nid oes angen i'r rhan fwyaf o redeg cyn i'r dudalen ymddangos.

Sut i'w drwsio

Llwythwch sgriptiau heb rwystro drwy ychwanegu defer (neu async ar gyfer sgriptiau annibynnol fel analytics):

<!-- Problem: blocks rendering until downloaded and run -->
<script src="app.js"></script>

<!-- Fixed: downloads in parallel, runs after the page is parsed -->
<script src="app.js" defer></script>

Rhowch y swm bach o CSS sydd ei angen ar gyfer y sgrin gyntaf yn uniongyrchol yn y dudalen, a llwythwch y dalennau arddull llawn heb rwystro.
Rhowch briodoledd media i ddalennau arddull sydd ond yn berthnasol mewn sefyllfaoedd penodol (fel media="print"), fel eu bod yn peidio â rhwystro rendro ym mhobman arall.
Lleihau'r hyn sydd i'w rwystro: tynnwch arddulliau a sgriptiau nas defnyddir, a chadwch y gweddill yn fach - gweler lleihau CSS a JavaScript wedi'i leihau.

Sut mae Silktide yn profi hyn

Llwythwch y dudalen mewn porwr go iawn, gan ddefnyddio'r math o ddyfais, cyflymder cysylltiad, a lleoliad prawf sydd wedi'u ffurfweddu ar gyfer eich profion cyflymder.
Nodwch bob dalen arddull a sgript a rwystrodd baentiad cyntaf y dudalen.
Amcangyfrifwch yr amser y gwnaeth pob un ohonynt ddal rendro yn ôl, a rhowch wybod am bob ffeil gyda'i harbediad amcangyfrifedig.
Graddiwch y dudalen yn ôl cyfanswm yr amser y gellid ei arbed: caiff tua 100 milieiliad ei raddio'n is, a chaiff 200 milieiliad neu fwy ei raddio'n wael.

Datrys problemau

Onid oes rhaid i CSS rwystro rendro?

Mae'r ddalen arddull sy'n llywio'r sgrin gyntaf yn gwneud hynny - mae hynny'n fwriadol, fel nad yw ymwelwyr byth yn gweld cynnwys heb arddull. Nid tynnu CSS yw'r ateb, ond lleihau'r hyn sy'n rhwystro: rhowch y rhan hanfodol yn uniongyrchol yn y dudalen, a llwythwch y gweddill mewn ffordd nad yw'n rhwystro.

Sgript trydydd parti yw'r ffeil rwystro

Mae rheolwyr tagiau, ffontiau a theclynnau sgwrsio yn droseddwyr cyffredin. Mae'r rhan fwyaf yn gweithio'n gywir gyda defer neu async - gwiriwch gyfarwyddiadau mewnosod cyfredol y darparwr, sydd yn aml eisoes yn ei gynnwys.