Tilföng sem hindra birtingu

Silktide prófar hvort stílsnið og skriftur séu til staðar sem vafrinn þarf að hlaða að fullu niður áður en hann getur birt eitthvað á síðunni þinni. Hvert og eitt þeirra lætur gesti stara aðeins lengur á auðan skjá.

Sjálfgefið hindra stílsnið eða skrift sem vísað er í nálægt efst á síðu birtingu: vafrinn birtir ekkert fyrr en skráin er komin, þar sem hún gæti breytt útliti eða hegðun alls efnisins.

Hvers vegna þetta skiptir máli

Auðu augnablikin áður en síða birtist í fyrsta sinn eru þegar gestir ákveða hvort þeir ætli að bíða. Hver skrá sem hindrar birtingu bætir við einni ferð yfir netið meðan skjárinn er auður, og tafirnar hlaðast fljótt upp á farsímatengingum – örfáar skrár sem hindra birtingu geta haldið annars hraðri síðu hvítri í margar sekúndur.

Mest af þessari hindrun er óþörf. Yfirleitt þarf aðeins lítinn hluta af síðu til að teikna fyrsta skjáinn og flestar -skriftur þurfa ekki að keyra áður en síðan birtist.

Hvernig á að laga þetta

Hlaðið skriftum án þess að hindra birtingu með því að bæta við defer (eða async fyrir óháðar skriftur á borð við vefgreiningu):

<!-- Vandamál: hindrar birtingu þar til skránni hefur verið hlaðið niður og hún keyrð -->
<script src="app.js"></script>

<!-- Lagað: hleður niður samhliða og keyrir eftir að síðan hefur verið þáttunarlesin -->
<script src="app.js" defer></script>

Setjið það litla magn CSS sem þarf fyrir fyrsta skjáinn beint inn á síðuna og hlaðið öllum stílsniðunum án þess að hindra birtingu.
Gefið stílsniðum sem eiga aðeins við við ákveðnar aðstæður media-eigind, til dæmis media="print", svo þau hætti að hindra birtingu við aðrar aðstæður.
Minnkið það sem þarf að bíða eftir: fjarlægið ónotuð stílsnið og skriftur og haldið því sem eftir er smátt – sjá Lágmörkun CSS og Lágmarkað JavaScript.

Hvernig Silktide prófar þetta

Hlaðið síðunni í raunverulegum vafra með því að nota tækjagerð, tengihraða og prófunarstaðsetningu sem stillt er fyrir hraðaprófin ykkar.
Finnið hvert stílsnið og hverja skrift sem hindraði fyrstu birtingu síðunnar.
Áætlið hversu lengi hvert þeirra tafði birtingu og tilkynnið um hverja skrá ásamt áætluðum tímasparnaði.
Gefið síðunni einkunn eftir heildartímanum sem mætti spara: um 100 millisekúndur gefa lægri einkunn og 200 millisekúndur eða meira telst slæmt.

Úrræðaleit

Þarf CSS ekki að hindra birtingu?

Stílsniðið sem knýr fyrsta skjáinn gerir það – það er með vilja gert svo gestir sjái aldrei óstílað efni. Lausnin er ekki að fjarlægja CSS heldur að minnka það sem hindrar: setjið mikilvæga hlutann beint inn og hlaðið afganginum með hætti sem hindrar ekki birtingu.

Skráin sem hindrar birtingu er skrift frá þriðja aðila

Merkingastjórar, leturgerðir og spjallgræjur eru algengir sökudólgar. Flest virkar rétt með defer eða async – skoðið núverandi innfellingarleiðbeiningar þjónustuveitandans, þar sem þær innihalda það oft nú þegar.