En avisside i en e-avis er et stort billede: 2.000 pixels på den lange led og fuld af lille tekst. En læser bladrer gennem ti eller tyve af dem, ofte på en mobil med ustabil forbindelse. Da vi byggede version 1.1 af Inkfold, vores selvhostede e-avisplatform, var sidehastighed det første, vi skrev om.
Gem hver side tre gange
Ved upload genkodes hver side med GD til tre filer: den fulde side, en mellemversion på cirka 1.100 pixels i bredden og et miniaturebillede til sidestriben. Formatet vælges én gang pr. server: WebP, når PHP understøtter det, ellers JPEG. På vores testudgaver skar WebP omkring en tredjedel af sidevægten væk ved samme visuelle kvalitet, og det betyder mere end nogen anden optimering på et site med mange sider.
Genkodningen fjerner også alt, vi ikke har bedt om, som indlejrede farveprofiler og kameradata, og den lægger gennemsigtighed oven på hvidt, så en PNG-eksport fra layoutprogrammet aldrig får sort baggrund.
Mellemstørrelse først, fuld størrelse kun når det er nødvendigt
Læseren viser mellembilledet som standard. I normal størrelse kan man ikke se forskel på det og originalen, og det fylder en brøkdel. Når læseren zoomer ind, sammenligner scriptet den viste bredde, ganget med enhedens pixelforhold, med billedets naturlige bredde. Så snart siden vises tydeligt større, end mellemfilen kan bære, henter det i baggrunden det fulde billede og skifter det ind, når det er kommet.
Læsere, der aldrig zoomer, henter aldrig den fulde side. De, der gør, får en skarp side uden ventetid, fordi mellembilledet bliver på skærmen, indtil det større er klar. De næste sider i udgaven forudindlæses i mellemstørrelse, så det føles øjeblikkeligt at bladre.
Klip artikler én gang, og cache dem
Hvert artikelområde kan åbnes som sit eget billede, til pop-up-visningen og til deling. Før blev udsnittene lavet ved hver forespørgsel. Nu klipper den første forespørgsel området og gemmer det på mediedisken under et navn med en hash af området og sidebilledet, så et nytegnet område eller en udskiftet side automatisk får en ny fil. Svarene har en cache-header på en uge.
Medier på enhver disk eller bag et CDN
Al filadgang går gennem én hjælpefunktion i stedet for en fast lokal disk. Med INKFOLD_DISK=s3 flyttes sidebilleder, PDF’er og udklip til Amazon S3, Cloudflare R2 eller DigitalOcean Spaces. Udgivere, der vil beholde filerne lokalt, kan med INKFOLD_MEDIA_URL sende billed-URL’erne gennem et pull-CDN som Cloudflare eller Bunny med sitet som origin. Filnavnene har stadig en tilfældig del på 20 tegn, så premiumsider ikke kan gættes, uanset lager.
Det vigtigste
- Kod én gang ved upload, i tre størrelser, og lad serveren vælge WebP, når den kan.
- Vis et mellembillede først; hent kun den fulde side, når zoom gør forskellen synlig.
- Cache genererede udsnit på mediedisken med en nøgle, der ændres, når kilden ændres.
- Send al filadgang gennem én abstraktion, så S3 eller et CDN blot er konfiguration.
Næste indlæg i serien: en opslagsvisning med to sider i samme højde. Du kan prøve alt ovenfor i Inkfolds live-demo, og selve softwaren fås hos Charming Theme.
Udgiver du en avis eller et magasin online og kæmper med langsomme sider? Lad os tale sammen — ArtinTech Solution bygger og finjusterer netop den slags udgivelsessoftware.