The document discusses three tips for optimizing website speed: 1) Using new image formats like WebP that are smaller in file size than JPEG and PNG, 2) Optimizing custom webfonts to reduce file size and number of HTTP requests, and 3) Implementing HTTP/2 to enable multiple requests over a single connection and reduce latency. It also covers critical path rendering which involves optimizing the resources needed to render the initial view above the fold.

1. Bastian Grimm
Peak Ace AG
Three site speed optimisation tips
to make your website REALLY fast!
@basgr
http://www.slideshare.net/bastiangrimm

2. Unfortunately, I‘ve got issues…

3. There is nothing worse (for me) than having to wait for anything to load!
I really am NOT a patient guy…

4. Fast loading time plays an important role in overall user experience!
Performance = User Experience!

5. 5 @peakaceag pa.ag
Seems I’m not alone… This is what your users expect:
Slow page loading time is a major factor in page abandonment.
According to a Nielsen report, 47 % of people
expect a website to load within 2 seconds, and 40 %
will leave a website if it does not load fully within
3 seconds.”
„

6. 6 @peakaceag pa.ag
By the way: Tired of taking notes?
Find the deck on SlideShare:
https://pa.ag/brg17spd

7. 7 @peakaceag pa.ag
Google is obsessed with site speed and always pushes for
faster sites:
Source: http://pa.ag/1cWFCtY

8. #1 New Image Formats

9. 9 @peakaceag pa.ag
Why do we need new image formats anyway?
Btw: This post is from 2012… and the discussion started even earlier!
More: https://www.igvita.com/2012/12/18/deploying-new-image-formats-on-the-web/

10. 10 @peakaceag pa.ag
62 % of all web traffic is made up of images...
… and 51 % of all URLs load more than 40 images per URL/page.
Source: http://pa.ag/1SGDOEo

11. Highest possible quality, (more) efficient data compression
and smaller file-size!
Smaller, better, faster, stronger.

12. 12 @peakaceag pa.ag
WebP: Google‘s alternative to JPEG, PNG and GIF
Lossy and lossless compression, transparency, metadata, colour profiles, animation and
much smaller files (30 % vs. JPEG, 80 % vs. PNG)
Everything about WebP: http://pa.ag/1EpFWeN

13. 13 @peakaceag pa.ag
We‘re not quite there yet....
Currently only supported by Chrome, Opera and Android
Source: http://caniuse.com/#feat=webp

14. 14 @peakaceag pa.ag
You can easily use WebP with on-the-fly replacement
Swap PNG and JPEG images per re-write (i.e. using .htaccess on Apache)

15. 15 @peakaceag pa.ag
You can easily use WebP with on-the-fly replacement
Swap PNG and JPEG images per re-write (i.e. using .htaccess on Apache)
VS.

16. 16 @peakaceag pa.ag
Or: Using HTML5 and <picture> with newer templates
Browsers that don‘t support <picture> will ignore this.
<source> browsers which don't support WebP will use <img> as a fallback.
More Information: http://responsiveimages.org/

17. 17 @peakaceag pa.ag
This is not the end of the story just yet: FLIF, BPG etc.
Left chart: Image size compared to original PNG size
Further reading: http://pa.ag/1S5OQmX

18. Why not optimize old file-types?

19. 19 @peakaceag pa.ag

20. 20 @peakaceag pa.ag
Guetzli: 35 % smaller JPEGs due to better encoding
No new “file type” needed at all; operating systems and browsers don’t need to adopt!
Source: http://pa.ag/2nyZjxf

21. Has anyone heard of this?
More funny names: Brotli

22. 22 @peakaceag pa.ag

23. 23 @peakaceag pa.ag
20-25 % higher compression rate (vs. Zopfli/Deflate)
A completely new data compression format: currently only for Firefox and nginx
Try it out: http://pa.ag/1XdM1RV & http://pa.ag/1XdMK5w

24. 24 @peakaceag pa.ag
Quick adoption… major browser support is already there!
Source: http://caniuse.com/#search=brotli

25. #2 Custom Webfonts

26. 26 @peakaceag pa.ag
67 % of all websites use non-standard fonts
Result: 91 KB additional data and on average 2.8 HTTP requests
Source: http://pa.ag/1BRUnbe

27. 27 @peakaceag pa.ag
Classic scenario: Font loading using external CSS
Easy to use … but one big disadvantage: CSS is render-blocking!

28. 28 @peakaceag pa.ag
Load custom fonts with Google’s Fontloader
Google’s asynchronous solution: webfont.js (JavaScript loads first, then CSS)

29. 29 @peakaceag pa.ag
Not very successful and also problematic:
FOUT (Flash of unstyled Text) = super annoying flickering
Fighting the FOUT: http://pa.ag/1BRWMmu

30. 30 @peakaceag pa.ag
Credits: http://pa.ag/1GakitY & http://pa.ag/1NDXCVi

31. #3 HTTP/2

32. 32 @peakaceag pa.ag
The HTTP Protocol is quite old… very old, in fact!
Tim Berners-Lee started his work in 1989, first definition of HTTP/1.1 released in 1999!
Took only ~15 years to establish HTTP/2 as successor… lot’s of changes meanwhile!
Source: http://pa.ag/2o4GKoM

33. Does HTTP/2 require encryption?

34. No!

35. No. After extensive discussions, the working group did not have consensus
to require the use of encryption (e.g., TLS) for the new protocol!
Does HTTP/2 require encryption?

36. 36 @peakaceag pa.ag
Browser Support: ~80 % - HTTP/2 has arrived!
See marker 2? This reads: Only supports HTTP/2 over TLS (HTTPs)!
Server-side also ~80 % - Apache 2, nginx, IIS, Squid and more available!
Source: http://caniuse.com/#feat=http2

37. So yes, you need HTTPs!

38. 38 @peakaceag pa.ag
Source: Searchmetrics US Ranking Factors 2016 – Download: http://pa.ag/2gO9Qq3

39. 39 @peakaceag pa.ag
HTTPs Top-10 Distribution by Industry
Source: Searchmetrics for Peak Ace

40. 40 @peakaceag pa.ag
Here is, what I think is going to happen:
We’ll be seeing 80 – 90 %
of all top-10 results being
on HTTPs by end of 2017!”
„

41. 41 @peakaceag pa.ag
BIG changes: HTTPs required for AMP!
Source: http://pa.ag/2fuOdYq

42. 42 @peakaceag pa.ag
HTTPs ranking “boost” only at URL level…
Source: http://pa.ag/2ekj4Gi

43. 43 @peakaceag pa.ag
Even if you don't believe in a “boost” …
Since January ‘17 HTTP login/credit card fields are flagged as “not secure.”
In future, all HTTP URLs are going to be flagged!
Source: http://pa.ag/2eh2Trk

44. 44 @peakaceag pa.ag
Let me make this very, very clear:
If you are using HTTPs
without HTTP/2 (SPDY) you
are doing it all wrong!”
„

45. TLS handshake as well as certificate validation takes some time!
HTTPs (without HTTP/2) is slower…

46. 46 @peakaceag pa.ag
Some tools to get you started with HTTP/2:
Download and test: https://tools.keycdn.com/http2-test & http://pa.ag/2cG7R3k & https://www.ssllabs.com/ssltest/

47. #Bonus: Critical Path Rendering

48. 48 @peakaceag pa.ag
Critical Path Rendering
The code and resources required to render the initial view of a web page
They [Google] are
not talking about the
overall time it takes
to download a
webpage. What they
care about is how
quickly does a user
start seeing content
on that page.”
„The Path The Render
The Critical (initial view)

49. 49 @peakaceag pa.ag
1. Build/structure HTML in a way that critical
(above-the-fold) elements will be loaded
first and therefore are out of the way!
2. Remaining resources: Reduce amount of
files, optimise file-size, check if on-
demand/deferred loading is feasible.
Google actually recommends the following:
Content available without scrolling down a page always goes first; everything else
needs to wait!
http://pa.ag/1ypomT2

50. 50 @peakaceag pa.ag
Ask yourself: What does your website REALLY need?
No custom fonts, no JavaScript and no video! But for sure proper HTML mark-up, CSS
& most likely a logo as well!
Source: http://www.phpied.com/css-and-the-critical-path/
If you worry about performance, you should
get the CSS out of the way asap. Make CSS
small, minify, compress, load (same host,
no DNS) and inline (if small enough).”
„

51. You want your above-the-fold content to weigh 14 KB or less.
The browser can start rendering as soon as the first packet arrives.
The magic number:

52. 52 @peakaceag pa.ag
How to know what CSS is critically required?
Snapshots of CSS rules applied each for „mobile“ as well as „desktop“ – lot‘s of work!
Once you figured out what you really need, inline it!
Source: http://pa.ag/2o4x0uE

53. A function for loading CSS asynchronously, designed for CSS that
is not critical. Combine with new <link rel="preload">
loadCSS is your friend!

54. 54 @peakaceag pa.ag
Async loading for (non-critical) CSS
Get it here: http://pa.ag/2ox6Gds
Loading non-critical CSS
async using rel=“preload“
Apply the CSS once it has
finished loading via “onload“
Fallback for non-JS requests
Implement loadCSS script

55. 55 @peakaceag pa.ag
There is soooo… much more to do:
Get the slides: https://pa.ag/iss17speed

56. 56 @peakaceag pa.ag
http://pa.ag/brg17spd
Always looking for talent! Check out jobs.pa.ag
Bastian Grimm
bg@pa.ag
twitter.com/peakaceag
facebook.com/peakaceag
www.pa.ag
Found this useful? Here are the slides: