Project

General

Profile

Bug #3240

Automatisk image optimization for bedre svartider med Responsive og lazy loading via https://www.drupal.org/project/cs_adaptive_image modulet

Added by Rolf Madsen over 1 year ago. Updated over 1 year ago.

Status:
Ready for development
Priority:
Normal
Assignee:
-
Target version:
Estimated time:
URL med eksempel:
Kategorier:
Driftsvedligehold - Refaktorering (Opdatering af kodebasen)

Description

Formålet med dette issue er at implementere en løsning der automatisk optimerer billeder så de fylder så lidt som muligt uden synligt tab af billedekvalitet, med henblik på at forbedre svartiderne på hjemmesiden.

Jeg forestiller mig brug af moduler ala https://www.drupal.org/project/imageapi_optimize, men har ikke afsøgt mulighederne, der har jeg brug for input fra en udvikler.

History

#1 Updated by Christel Krabbenhøft over 1 year ago

  • Assignee changed from Christel Krabbenhøft to Martin Cording

#2 Updated by Martin Cording over 1 year ago

  • Status changed from Ready for development to Need more info
  • Assignee changed from Martin Cording to Rolf Madsen

For at kunne komme med nogle anbefalinger, er jeg nødt til at høre om I kan give lidt mere information omkring hvad I prøver at opnå? :)

Er det fordi at de billeder som slut-brugeren loader, er for store (størrelse)?
Er det fordi at de billeder slut-brugeren loader, har for store proportioner og bliver nedskaleret i browseren?
Er det fordi at de billeder som gemmes på server optager for meget disk plads?
osv.

#3 Updated by Rolf Madsen over 1 year ago

  • Description updated (diff)
  • Status changed from Need more info to 8
  • Assignee changed from Rolf Madsen to Martin Cording

Jeg har tilpasset descripten.

Målet er at forbedre svartiderne på hjemmesiden.

#4 Updated by Martin Cording over 1 year ago

  • Assignee changed from Martin Cording to Rolf Madsen

I dette tilfælde ser jeg følgende mulige forbedringer:

  1. Datastørrelse
    ImageMagick implemementeres, således at billeder komprimeres i datastørrelse- kører allerede på alle Inlead biblioteker og på aakb.dk.
    Bemærk at dette kræver understøttelse hos hosting leverandør.
     
  2. Billedestørrelse
    Alle steder hvor der vises billeder, gennemgås de billede-profiler der bruges, således at billeder ikke loades større billeder end nødvendigt.
    Bemærk at dette ikke gælder WYSIWYG.
     
  3. Responsive
    Implementering af responsive billeder, således at der serveres forskellige billedstørrelser afhængigt af den enhed, der laver anmodningen.
     
  4. Lazy loading
    Begræns hvilke billeder der bliver indlæst, således at billeder kun loades når de er inden for "viewporten", altså det brugeren kan se.
     
  5. Progressive loading
    Load billeder i flere "lag" - billeder vises "sløret" og loader igen og igen indtil de er skarpt.
    Bemærk at dette er et større indgreb da alle billeder skal gen-uploades for at supportere dette.

 

#5 Updated by Simon Holt over 1 year ago

Mht. 3.:

Så vidt jeg husker var der implementeret en adaptive image formatter på billederne på nyheder, arrangementer og sider før, men blev fjernet i det nye design, da der alligevel ikke var ret stor forskel på billedernes størrelse i de forskellige breakpoints.

#6 Updated by Rolf Madsen over 1 year ago

Tak for en super forklaring af mulighederne Martin!

Jeg ser alle foreslag som relevante, men punkt 5 kan realistisk set kun implementeres hvis det kan gøres fremadrettet.

#7 Updated by Erik Bachmann over 1 year ago

Jeg smed en helt tilfældig DDB CMS side ind i https://developers.google.com/speed/pagespeed/insights/

Der kom en advarsel om ukomprimerede billeder og jeg hentede et af dem:

23-01-2018  09:19         1.566.229 backgr_lampersh.jpg

Hvis jeg komprimerer det får jeg:

23-01-2018  09:19            50.961 backgr_lampersh.comp.jpg

 

Loadtid:

Fra lokal disk:                              30 – 55 ms

Komprimeret:                             2-8 ms

 

Fra webserver:                            300 – 877 ms

I øvrigt kan man IKKE se dette baggrundsbillede, da det er skjult bag menuer og tekstbokse!

#8 Updated by Rolf Madsen over 1 year ago

  • Subject changed from Automatisk image optimization for bedre svartider to Automatisk image optimization for bedre svartider med Responsive og lazy loading via https://www.drupal.org/project/cs_adaptive_image modulet
  • Status changed from 8 to Ready for development
  • Assignee deleted (Rolf Madsen)

Efter konsultation med Core team har vi fået anbefalet at fokusere på punkt 3 responsive og 4 lazy loading.

Det kan implementeres med modulet https://www.drupal.org/project/cs_adaptive_image som tidligere har været brugt i Ding2 før implementeringen af det nye theme.

#9 Updated by Rolf Madsen over 1 year ago

  • Target version changed from Release 29-2 - Bugfixes (Inlead) to Release 33 - Bugfixes

Also available in: Atom PDF