aus dem maschinenraum

felix schwenzel in über wirres

ich habe wir­res.net ein biss­chen schnel­ler gen­macht, zu­min­dest laut dem goog­le page speed tool. das scheint jetzt, nach ei­ni­gen um­stel­len, ein­stel­len und prio­ri­sie­ren, ei­ni­ger­mas­sen zu­frie­den mit der leis­tung mei­ner sei­ten zu sein und zeigt die la­de­ge­schwin­dig­keit meist im grü­nen be­reich an.

die an­for­de­run­gen des page speed tools zu ver­ste­hen, oder ge­nau­er, die an­for­de­run­gen für schnel­les sei­ten­la­den zu ver­ste­hen, ist gar nicht mal so leicht. vie­les von dem was goog­le vor­schlägt hört sich für mei­ne oh­ren spa­nisch an.

JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“ (ohne Scrollen sichtbar) beseitigen

wo­her soll ich wis­sen, was abo­ve the fold ist, oder wel­che re­sour­cen das ren­de­ring blo­ckie­ren? mit ver­such und irr­tum habe ich mich dem aber lang­sam an­nä­he­ren kön­nen. ent­schei­dend ist je­den­falls, ne­ben den grund­vor­aus­set­zun­gen wie ei­ner re­la­tiv schnel­len sei­ten­aus­lie­fe­rung (zum bei­spiel durch vor­hal­ten fer­tig ge­r­en­der­ter sei­ten) und mög­lichst (klein) op­ti­mier­ter re­sour­cen (bil­der), das ent­hal­te­nen CSS- und ja­va­script-ge­döns mög­lichst asyn­chron (also ir­gend­wann) zu la­den, nach­dem der haupt­sei­ten­in­halt be­reits da ist.

an­satz­wei­se hat­te ich das schon vor län­ge­rer zeit ge­macht, so lade ich die zahl der li­kes und re­ak­tio­nen und die re­ak­tio­nen selbst schon län­ger asyn­chron (per ajax) nach. aber noch wich­ti­ger scheint es, mög­lichst vie­le ja­va­scrip­te (jquery selbst, jquery plug­ins und den ja­va­script-code selbst) und style­sheets eben­falls asyn­chron zu la­den — eben da­mit sie das ren­dern der sei­te nicht blo­ckie­ren.

theo­re­tisch geht das bei ja­va­script ganz ein­fach, in­dem man sie mit der op­ti­on lädt. dann muss man aber dar­auf ach­ten, dass die la­de­rei­hen­fol­ge passt und nicht ir­gend­ein script ver­sucht jquery zu be­nut­zen, ob­wohl das noch gar nicht ge­la­den ist. ir­gend­wann hat­te ich das aber raus­ge­fun­den, und jetzt lädt das gan­ze ja­va­script­ge­döns erst dann, wenn der brow­ser es für nö­tig hält.

was ich seit vie­len jah­ren für wich­tig hal­te und was jetzt wie­der sehr be­frie­di­gend läuft, ist wir­res.net ohne ak­ti­vier­tes ja­va­script. alle grund­sätz­li­chen funk­tio­nen, funk­tio­nie­ren auch ohne ja­va­script. al­les was per ja­va­script nach­ge­la­den wird, wie re­ak­tio­nen oder kom­men­tar­ge­döns, funk­tio­niert dann nicht, aber seit­dem ich mich letz­te wo­che von type­kit ver­ab­schie­det habe und die bre­via-schrift bei font­shop (wer­be­link) li­zen­siert habe, wird die bre­via auch ohne ak­ti­vier­tes ja­va­script an­ge­zeigt. durch das schrift­la­den per CSS, se­hen jetzt auch mei­ne AMP-sei­ten mehr nach dem ori­gi­nal aus (die­se sei­te als AMP la­den).

apro­pos CSS; kom­pli­zier­ter das goog­le page speed tool zu be­frie­di­gen, wird es in sa­chen CSS. auch hier schlägt goog­le vor mög­lichst vie­le re­sour­cen asyn­chron oder zu­min­dest spä­ter zu la­den. lei­der gibt es aber kei­ne mög­lich­keit ei­nem ein­fach ein -at­tri­but hin­zu­zu­fü­gen. den CSS-code auf­zu­tei­len und nur das wich­tigs­te in den sei­ten­kopf zu pa­cken und das we­ni­ger wich­ti­ge ans sei­ten­en­de zu pa­cken, ist schon­mal ein schritt nach vor­ne, lässt goog­le aber im­mer noch me­ckern. es gibt aber ei­nen of­fi­zi­el­len neu­en weg, das über zu ma­chen. weil das noch nicht von al­len brow­sern un­ter­stützt wird, hat die fi­la­mentgroup mal wie­der ei­nen po­ly­fill ge­baut: „loadCSS, A func­tion for loa­ding CSS asyn­chro­no­us­ly“

der ein­bau die­ser lö­sung hat mich am ende dann im goog­le page speed tool in den grü­nen be­reich ge­bracht.

die sei­ten­la­de­ge­schwin­dig­keit auf wir­res.net fühlt sich jetzt tat­säch­lich et­was schnel­ler an, ein di­rek­ter ver­gleich mit ei­ner AMP-sei­te zeigt, das die wer­te der re­gu­lä­ren sei­ten ganz OK sind. AMP lädt die­se sei­te in knapp ei­ner se­kun­de (load), bzw. den DOM-con­tent in 293 mil­li­se­kun­den. re­gu­lär lädt die sei­te in 1,29 se­kun­den (load), bzw. den DOM-con­tent in 594 mil­li­se­kun­den. ich fin­de das soll­te in sa­chen op­ti­mie­rung erst­mal rei­chen.