Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig...

40
Bachelorproef: Improving Drupal’s page loading performance Wim Leers Promotor: Prof. dr. Wim Lamotte Co-promotor: dr. Peter Quax Begeleiders: Stijn Agten & Maarten Wijnants

Transcript of Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig...

Page 1: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Bachelorproef:Improving Drupal’s page loading performance

Wim Leers

Promotor: Prof. dr. Wim LamotteCo-promotor: dr. Peter QuaxBegeleiders: Stijn Agten & Maarten Wijnants

Page 2: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Doel

• Snellere websites

• Snelheid = tevredenheid = meer bezoekers

source: http://www.slideshare.net/stubbornella/designing-fast-websites-presentation, Nicole Sullivan, Yahoo!

Page 3: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Doel

• Snellere websites

• Snelheid = tevredenheid = meer bezoekers

• Google: +0.5s → -20% zoekacties

source: http://www.slideshare.net/stubbornella/designing-fast-websites-presentation, Nicole Sullivan, Yahoo!

Page 4: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Terminologie: page loading performance

CSS, JS, afbeeldingen …HTML

10%90%

Page 5: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Terminologie: CDN

Page 6: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Drupal

Page 7: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Drupal

• Systeem om websites mee te bouwen

Page 8: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Drupal

• Systeem om websites mee te bouwen

• Honderdduizenden websites

Page 9: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Drupal

• Systeem om websites mee te bouwen

• Honderdduizenden websites

• Disney, Verenigde Naties …

Page 10: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Drupal’s page loading performance

• Eén van de meest effectieve maatregelen:

“Gebruik een CDN”

Page 11: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Drupal’s page loading performance

• Eén van de meest effectieve maatregelen:

“Gebruik een CDN”

• Drupal: nog niet mogelijk!

Page 12: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Profiling: Episodes

Page 13: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Profiling: Episodes

• Meet “episodes” bij het laden

Page 14: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Profiling: Episodes

• Meet “episodes” bij het laden

• Reële metingen: JS in browser, bij iedere bezoeker

• Geen simulatie!

Page 15: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Episodes module

Page 16: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Episodes module

• Drupal module die Episodes integratie toevoegt

Page 17: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Episodes module

• Drupal module die Episodes integratie toevoegt

Page 18: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Episodes Server module

Page 19: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Episodes Server module

• Drupal module die verzamelde metingen visualiseert

Page 20: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Daemon

Page 21: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Daemon

1. Configuratie: eenvoudig XML-bestand

Page 22: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Daemon

1. Configuratie: eenvoudig XML-bestand

2. Detectie: onmiddellijk

Page 23: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Daemon

1. Configuratie: eenvoudig XML-bestand

2. Detectie: onmiddellijk

3. Verwerking: afbeelding efficiënter opslaan … — uitbreidbaar!

Page 24: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Daemon

1. Configuratie: eenvoudig XML-bestand

2. Detectie: onmiddellijk

3. Verwerking: afbeelding efficiënter opslaan … — uitbreidbaar!

4. Syncing: ondersteunt veel protocollen (FTP, Amazon S3 …) — uitbreidbaar!

Page 25: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Daemon

1. Configuratie: eenvoudig XML-bestand

2. Detectie: onmiddellijk

3. Verwerking: afbeelding efficiënter opslaan … — uitbreidbaar!

4. Syncing: ondersteunt veel protocollen (FTP, Amazon S3 …) — uitbreidbaar!

5. Resultaat: SQLite DB met CDN URL’s

Page 26: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Demo

Page 27: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

CDN integratie module

Page 28: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

CDN integratie module

• Drupal module

• Drupal core patch

• CDN URL’s (SQLite DB daemon)

Page 29: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Feedback

Page 30: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Feedback

website: SlideME.org

website: workhabit.com

Page 31: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Feedback

• Zeer positief:

website: SlideME.org

website: workhabit.com

Page 32: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Feedback

• Zeer positief:

• Over structuur van daemon:

“Clear and self-explanatory.”

website: SlideME.org

website: workhabit.com

Page 33: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Feedback

• Zeer positief:

• Over structuur van daemon:

“Clear and self-explanatory.”

• Effectief gebruik waarschijnlijk

website: SlideME.org

website: workhabit.com

Page 34: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Test case

Page 35: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Test case

Page 36: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Test case

Page 37: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Conclusie

Page 38: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Conclusie

1. Snelheid website zeer belangrijk

Page 39: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Conclusie

1. Snelheid website zeer belangrijk

2. Episodes → page loading performance monitoren

Page 40: Bachelorproef: Improving Drupal’s page loading performance · Daemon 1.Configuratie: eenvoudig XML-bestand 2.Detectie: onmiddellijk 3.Verwerking: afbeelding efficiënter opslaan

Conclusie

1. Snelheid website zeer belangrijk

2. Episodes → page loading performance monitoren

3. Daemon → flexibele CDN-integratie