Få instant sidevisninger med prerender (handle with care)

Med en lille smule snyd kan du få en hurtigere sidevisning – men hold øje med browser-understøttelsen.

fingers-snap

For noget tid siden lancerede Facebook deres Instant Articles, der kort fortalt går ud på, at artikler (der er en del af Instant Articles-samarbejdet) loader lynhurtigt, når du ser dem i Facebook-app'en på din telefon.

En af de ting, der gør visningen lynsnap er, at Facebook formentlig begynder at hente siden i baggrunden, og det kan den gøre, fordi Facebook holder en kopi af artiklen og derfor begynder at rendere den. Du kan prøve noget lignende med de nye Facebook-noter. Jeg har skrevet mere om Instant Articles på Medium.

Men den samme hurtigt kan du faktisk også godt få på dit eget website. Du skal dog være opmærksom på to ting:

  1. Du gør det ved at snyde (du henter faktisk siden i baggrunden).
  2. Netop fordi siden bliver hentet i baggrunden, skal du være forsigtig i din brug – for brugerens skyld.
  3. Det vil formentlig kun virke for brugere på desktop-computere, ikke mobil og tablet.

Kært barn…

Metoden hedder prerender – og prefetch. Og hvorfor så to navne? Jo, årsagen til det er, at prefetch er en del af HTML5-specifikationen (omend vagt formuleret), mens prerender understøttes af Chrome – og nu også andre browsere, men ikke Firefox. Velkommen til the world of web development.

Steve Souders (der nok er en af dem i verden, der ved mest om web performance) har skrevet om de forskelle, der reelt er mellem prefetch og prerender:

PREFETCH

If we’re more confident that the user will navigate to the Adventure Time page and we know some of its critical resources, we can download those resources early using prefetch:

<link rel="prefetch" href="http://cartoonnetwork.com/utils.js">

This is great, but the spec is vague, so it’s not surprising that browser implementations behave differently.

[…]

PRERENDER

If we’re really confident the user is going to the Adventure Time page next, we can prerender the page like this:

<link rel="prerender" href="http://cartoonnetwork.com/">

This is like opening the URL in a hidden tab – all the resources are downloaded, the DOM is created, the page is laid out, the CSS is applied, the JavaScript is executed, etc. If the user navigates to the specified href, then the hidden page is swapped into view making it appear to load instantly. Google Search has had this feature for years under the name Instant Pages. Microsoft recently announced they’re going to similarly use prerender in Bing on IE11.

Læs Souders artikel – der er også noget om browser-understøttelse, der er værd at vide. Du kan også læse Wikipedia-artiklen om 'Link-prefetching'.

Så prerender er altså vejen at gå. Men lad os sige, at du vil have både prerender og prefetch med for at være på den sikre side (det ser dog ud til, at du ikke får Firefox med alligevel, mere om det lige om lidt), skal du naturligvis deklarere begge.

I <head>-delen af din side skal du nu indsætte to link rel-linjer, der fortæller browseren, hvilke sider/elementer, den skal hente i baggrunden:

<link rel="prefetch" href="http://siden-du-vil-vise-hurtigt.dk" />
<link rel="prerender" href="http://siden-du-vil-vise-hurtigt.dk" />

Firefox driller

Så burde du have alle browsere med, omend Firefox ifølge Souders ikke er så meget med på legen, som vi kunne håbe. For det første understøtter Firefox ikke prerender. Men prefetch burde den forstå. Men efter at have testet prefetch flere gange (også på enkeltelementer som billeder) er jeg faktisk kommet i tvivl om, hvorvidt Firefox forstår instruksen.

Ifølge blandt andet denne artikel burde det være prerender i Chrome og prefetch i Firefox, men som nævnt har jeg svært ved at få Firefox til at forstå prefetch. Hvis nogen har mere held, hører jeg gerne om det i en kommentar herunder.

Så det er et spørgsmål, om den ikke skal droppes helt, hvilket betyder, at du faktisk kan slette prefetch-linjen fra din kode – i hvert fald i denne sammenhæng.

Handle with care

Som jeg nævner ovenfor, skal du bruge prerender forsigtigt, da browseren netop går i gang med at hente den deklarerede side (og det er altså HELE siden, der er tale om), så snart den er ledig. Det kræver ressourcer, batteri etc. hos brugeren, og dét vil du gerne minimere.

Herudover kan det være meget svært at gætte, hvilke sider, du skal hente i baggrunden. Hvis du arbejder for en online-publikation, kan det være fristende at lave prerender på top-historien- eller forsiden, hvis brugeren står på en artikel. Men det skal overvejes, og rammer/gætter du forkert, er det spildte ressourcer. Det skal helst undgås.

Som udgangspunkt er det kun desktop-browsere, der forstår opgaven. Eller, det vil sige, det gør mobile browsere også, men typisk vil det være slået fra som standard. Herunder ligger der en indstilling, hvor brugeren kan slå det til, når han/hun er på WiFi (trådløst internet).

Den sidste, og mest ekstreme, mulighed er at slå prerendering helt til, også selvom man er på dataforbindelsen hos sin udbyder; og så bliver prerendering (foruden ressourceforbruget, der trækker på batteriet) trukket fra enten datamængden…eller pengepungen.

Test det!

Jeg har lavet en side, hvor du nemt kan teste prerender på en given side. For eksempel kan du på dette link se, hvordan det fungerer, når man prerenderer forsiden af ekstrabladet.dk (du skal lige give siden lidt tid til at ånde og hente siden i baggrunden, inden du klikker videre til ekstrabladet.dk).

Du kan prøve at prerendere andre websites ved at ændre 'http://ekstrabladet.dk' i URL'en til prerender-siden, jeg linker til lige herover.

Andre ting i værktøjskassen

I øvrigt må du ikke snyde dig selv for denne fine gennemgang [css-tricks.com] af nogle af de performance-greb du har, der kan få websites til at loade hurtigere.

 

Forfatter: Lars K Jensen

Lars er uddannet journalist og arbejder nu med udviklingsprocesser og redaktionel udvikling. Han skriver blandt andet på Medieblogger. Følg ham på Twitter: @larskjensen.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *