Det kan virke simpelt at levere en eAvis. Upload PDF, server PDF til læserne, færdig. Selvom det basalt set er tæt på sandheden, er det langt fra nemt at skabe en lækker læseoplevelse. Det er en konstant kamp med dilemmaet mellem hastighed og kvalitet.
På det seneste har vi omstruktureret vores Desktop Web Reader for at sikre en fejlfri oplevelse for alle læsere. Men da browsere ikke alle er ens, har det langt fra været en let opgave.
Baggrund
Et af de vigtigste aspekter i Visiolinks løsninger, på tværs af alle platforme, er evnen til at gøre publikationer med høj kvalitet og nøjagtighed. Der bruges en masse tid og kræfter på at skabe disse publikationer, så vi føler stærkt for at levere en brugeroplevelse, der matcher dette.
For ikke så længe siden var Flash, og det indlejrede SWF-format, vores primære teknologi på Desktop. Det gjorde os i stand til at præsentere sider med stor kvalitet, på tværs af alle moderne og ældre browsere.
På et tidspunkt begyndte Flash imidlertid at ryge i uføre blandt browserleverandører og brugere. Det var derfor oplagt at skifte til en HTML5-baseret platform.
HTML5 er fantastisk til mange ting, men cross-browser-support er langt fra fuldt udbredt og implementeret. Faktisk vil det nok stadig få de fleste webudviklere til at skrige i frustration fra tid til anden.
Den første implementering
En af vores største bekymringer ved skiftet til den nye platform, var at gøre teksten skarp, og sikre at siden loadede hurtigt nok. Vi besluttede at bruge SVG til vektorrendering. Det gav os mulighed for hurtigt at generere sider, og teknologien giver samtidig en automatisk skarphed til siden, selv når der zoomes ind. Desværre kæmper de fleste computere og browsere med mængden af elementer, når en side består af mere end 30.000 individuelle former.
Selvom læsning ville kunne påbegyndes rimeligt hurtigt i de fleste browsere, gør tilføjelsen af SVG siden langsommere, og i mange tilfælde vil ydelsen være hakkende og uudholdelig.
For at give vores brugere den bedst mulige oplevelse måtte vi gå på kompromis. Skarphed blev byttet væk for ydelse. Dette kunne sikres ved at skifte til et billedformat som har hurtig indlæsningstid og gengivelse, men med let sløret tekst.
En performance test af brugerens computerspecifikationer og browserleverandør ville så afgøre, om brugeren skulle have SVG-formatet indlæst, eller om systemet skulle falde tilbage på billedvisning.
Efter lanceringen tog vi et kig på vores browserdemografi, og indså, at en betragtelig mængde af brugerne faldt tilbage på billedvisning og ikke oplevede fordelen ved den skarpe tekst. Vi besluttede at bruge lidt tid på at optimere rendering, og på at undersøge alternative løsninger.
Processen
For at kunne tage en kvalificeret beslutning om valg af løsning, var den første opgave at fastslå, hvad "god performance" egentlig betyder. Alle acceptable løsninger måtte være klare og skarpe i kvaliteten. På den baggrund fokuserede vores tests på to primære områder:
- Indlæsningstid
- On-screen performance efter indlæsning
Den første viser, hvor lang tid det tager at indlæse og vise en side på skærmen. Den anden fokuserer på ydeevne på skærmen, når siden er indlæst. Den første var en simpel timingtest, men den anden var lidt sværere at kvantificere.
Den anden opgave var at etablere et testmiljø, der ville give valide og klare resultater på fokusområderne, mens det gengav et realistisk miljø.
Over nogle uger lavede vi adskillige tests og prototyper, med henblik på at indsnævre mængden af teknologier til optimering. Vi endte med at identificere tre forskellige, lovende tilgange:
- SVG
- Billede med SVG som data URI
- HTML5 Canvas
Ser man på vores aktuelle brugerdemografi, er fem browsere var relevante for denne test, og alle skulle gerne leve op til vores krav:
- Internet Explorer 11
- Edge
- Chrome
- Firefox
- Safari
Resultaterne
To testrunder blev udført, en for hvert fokusområde vi identificerede tidligere.
Den første testrunde fokuserede på den tid, det ville tage en prøveside at indlæse. I alle browsere timede vi, hvor lang tid det tog fra siden begyndte at indlæse til den blev synlige på skærmen.
Bortset fra få ekstremer, klarede alle browsere sig godt på SVG og Canvas indlæsning. Til vores overraskelse klarede den aldrende IE11 sig særdeles godt med alle 3 teknologier. Firefox, Safari, og Edge viste på den anden side nogle alvorlige forsinkelser ved brug af den billedbaserede teknologi.
Disse 3 afstikkere gav den billedbaserede løsning en hård start.
Den anden testrunde fokusere på, hvor godt hver browser performede, efter siden var færdigindlæst. Vi testede hvor godt browserne kunne gengive siden, og om de havde alvorlige forsinkelser eller ”stammen”.
Scoringen blev inddelt i tre, og givet for god (100), middelmådig (66), og dårlig (33) performance.
Den anden test afslørede et par virkelig interessante punkter: Canvas var klarer sig godt på et flertal af browserne, og Safari scorer konsekvent lavt på præstationen.
Et andet interessant element var, at Internet Explorer 11 havde nogle af de bedste resultater ved indlæsning af SVG-filer, men en af de værste gengivelser på skærmen.
Konklusion
Tilbage stod vi nu med tre forskellige tilgange, hver med styrker og svagheder, og med ekstreme forskelle i ydeevne fra browser til browser. Nogle browsere viste gode resultater i test, men klarede sig dårligt, når de integreredes i det endelige produkt. Andre browsere havde gode indlæsningstider, men fungerede langsomt på skærmen.
Samlet set skinner Canvas igennem i både indlæsningstid og on-screen ydeevne, så valget var forholdsvis let i sidste ende. Vores løsning skal være en kombination af direkte SVG-rendering i Safari på Mac, og Canvas-rendering i andre browsere.
Forbedring af ydeevne er en rejse, der aldrig ender. I takt med at browsere og systemer forbedres, og nye teknologier opstår, er der altid noget at hente. Vi er kommet et skridt tættere på at give vores brugere den bedst mulige læseoplevelse, og forhåbentlig vil der en dag være skarp tekst-rendering og jævn præstation i alle browsere.
