The document discusses various techniques for improving page speed, including reducing data usage through image compression, lazy loading images, combining images into sprites, minifying JavaScript and CSS, enabling caching, avoiding 404 errors, and loading assets in parallel through multiple subdomains. It recommends analyzing network traffic and page elements to identify optimization opportunities like unnecessary large images or scripts. The goal is to minimize page size and load times through techniques like compressing, resizing, lazy loading, and leveraging caching for images, JavaScript, and CSS.

1. Page Speed: low hanging legumes!
Things you can do too to speed up your page
2015, Erich Kachel @erichth

2. Page Speed: low hanging legumes!
• data reduction
• compression
• caches
• parallelity
2015, Erich Kachel @erichth

3. Where to start?
• STRG+ALT+I …is your friend!
• Check the footer – is it worth the work?
Cosmosdirekt.de
waz.de
gartenmoebel.de
spiegel.de
2015, Erich Kachel @erichth

4. Where to start?
• This was easy!
• But what about this one?
golem.de
2015, Erich Kachel @erichth

5. What the browser loades: Network tab
Network
2015, Erich Kachel @erichth

6. Sort by size: heavy load
• Stuff loaded: inline, CSS, JS, Async
• Check everything bigger than 50 Kbyte
SIZE
2015, Erich Kachel @erichth

7. Heavy load: images
• No over-dimensioned images!
• Right click on image -> „load in new tab“
• OK or over-dimensioned?
2015, Erich Kachel @erichth

8. Heavy load: examples
2015, Erich Kachel @erichth

9. Heavy load: examples
2015, Erich Kachel @erichth

10. 2015, Erich Kachel @erichth

11. What to do now?
• remove!
• Load later „Lazy load“
• Will become W3C-standard: <img lazyload=„1“>
• Load when visible
• Will become W3C-standard : <img postpone=„1“>
• Resize to small
• compress
• cache
2015, Erich Kachel @erichth

12. Heavy load
• Use images with appropriate sizes
• Most CMS crop images – use this!
• Load retina-quality only when needed
2015, Erich Kachel @erichth

13. Compress big images
• Compress images with kraken.io
• Lossless compression: no quality loss!
86%
smaller!
2015, Erich Kachel @erichth

14. Sprites: one image instead of 30
• Combine small images to one
• crop every one with CSS
CSS crop
2015, Erich Kachel @erichth

15. What about JavaScript and CSS?
• Does every page need all of CSS?
• Can it be compressed?
2015, Erich Kachel @erichth

16. Full of empty space: JavaScript + CSS
• Activate compression in .htaccess
<IfModule mod_deflate.c>
<FilesMatch ".(js|css|txt|html)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
YES!!
2015, Erich Kachel @erichth

17. Cache: unchanged content is unchanged!
2015, Erich Kachel @erichth

18. Cache: unchanged content is unchanged!
• Use for images, JS, CSS
• Caches store web page elements
• Browser can reuse elements
• Data is transfered only once
2015, Erich Kachel @erichth

19. Cache: unchanged content is unchanged!
• Activate caches in .htaccess
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/* A3600
ExpiresByType image/* A3600
</IfModule>
2015, Erich Kachel @erichth

20. Free meal, no costs!
Yeah!!
0 Byte
data!
Google knows how ;)
2015, Erich Kachel @erichth

21. So:
• remove!
• Load later
• Load when visible
• Resize to small
• compress
• cache
2015, Erich Kachel @erichth

22. The cascade: bottleneck „by design“
2015, Erich Kachel @erichth

23. The cascade: bottleneck „by design“
• HTTP/1.1 RFC a “single-user client
SHOULD NOT maintain more
than 2 connections with any server”
• Elements are loaded one by one
• Delay through just waiting! o.O
2015, Erich Kachel @erichth

24. The cascade: bottleneck „by design“
Browser
HTTP/1.1
connections
IE 8 6
Firefox 3 6
Safari 3,4 4
Chrome 4+ 6
iPhone 4 4
Opera 10.51+ 82015, Erich Kachel @erichth

25. The solution: simulate more server!
• Create virtual subdomains
• Browser loads objects parallely
• static1.domain.de/bild1.jpg
• static2.domain.de/bild2.jpg
• static3.domain.de/bild3.jpg
2015, Erich Kachel @erichth

26. 404 errors eats server
• STRG+ALT+I …is your friend!
• Sort by status
2015, Erich Kachel @erichth

27. 404 errors eats server
• Look for 404 errors!
• Missing images also trigger 404 pages
• heavy 404 error pages can kill your server
2015, Erich Kachel @erichth

28. 404 errors eats server
• What‘s the problem with 404 error pages?
• … they consume server performance!
• example: http://www.planet-ic.de/a starts search!
• <img src=„http://planet-ic.de/nixda“> does it too!
2015, Erich Kachel @erichth

29. 404 errors eats server
• Easy to find
• Can be the reason for bad server performance
• … but on small pages, almost insignificant
2015, Erich Kachel @erichth

30. JS, Audiofiles, Soundcloud …
• Load complex scripts later
• Image gallery, audioplayer, videoplayer
• Load on demand
• But: you then have no precaching
2015, Erich Kachel @erichth

31. … but there is more
• Load images from CDN - performant
• jQuery, fonts from Google CDN – cached
• Retina-quality only on request
• Put CSS in header, move JS in footer
• Load ad server code in footer
• Cookie-free subdomains for images / JS / CSS
2015, Erich Kachel @erichth

32. All together
• Look out for big elements & get rid of them
• images: resize, compress, cache
• CSS, JS: compress, gzip-Encoding
• Icons, Symbols: make SPRITES
• Video, audio: use „lazy load“
• Check for 404 errors
• Use subdomains for images / JS / CSS
• Load JS just before </body>
• Better: load JS async! <script async src=„“>2015, Erich Kachel @erichth

33. About me
Erich Kachel
CTO @ AKM3
http://www.erich-kachel.de
@erichth
2015, Erich Kachel @erichth