Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Bastian Grimm
Peak Ace AG
Three site speed optimisation tips
to make your website REALLY fast!
@basgr
http://www.slideshar...
Unfortunately, I‘ve got issues…
There is nothing worse (for me) than having to wait for anything to load!
I really am NOT a patient guy…
Fast loading time plays an important role in overall user experience!
Performance = User Experience!
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 a...
6 @peakaceag pa.ag
By the way: Tired of taking notes?
Find the deck on SlideShare:
https://pa.ag/brg17spd
7 @peakaceag pa.ag
Google is obsessed with site speed and always pushes for
faster sites:
Source: http://pa.ag/1cWFCtY
#1 New Image Formats
9 @peakaceag pa.ag
Why do we need new image formats anyway?
Btw: This post is from 2012… and the discussion started even e...
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 UR...
Highest possible quality, (more) efficient data compression
and smaller file-size!
Smaller, better, faster, stronger.
12 @peakaceag pa.ag
WebP: Google‘s alternative to JPEG, PNG and GIF
Lossy and lossless compression, transparency, metadata...
13 @peakaceag pa.ag
We‘re not quite there yet....
Currently only supported by Chrome, Opera and Android
Source: http://can...
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 ...
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 ...
16 @peakaceag pa.ag
Or: Using HTML5 and <picture> with newer templates
Browsers that don‘t support <picture> will ignore t...
17 @peakaceag pa.ag
This is not the end of the story just yet: FLIF, BPG etc.
Left chart: Image size compared to original ...
Why not optimize old file-types?
19 @peakaceag pa.ag
20 @peakaceag pa.ag
Guetzli: 35 % smaller JPEGs due to better encoding
No new “file type” needed at all; operating systems...
Has anyone heard of this?
More funny names: Brotli
22 @peakaceag pa.ag
23 @peakaceag pa.ag
20-25 % higher compression rate (vs. Zopfli/Deflate)
A completely new data compression format: current...
24 @peakaceag pa.ag
Quick adoption… major browser support is already there!
Source: http://caniuse.com/#search=brotli
#2 Custom Webfonts
26 @peakaceag pa.ag
67 % of all websites use non-standard fonts
Result: 91 KB additional data and on average 2.8 HTTP requ...
27 @peakaceag pa.ag
Classic scenario: Font loading using external CSS
Easy to use … but one big disadvantage: CSS is rende...
28 @peakaceag pa.ag
Load custom fonts with Google’s Fontloader
Google’s asynchronous solution: webfont.js (JavaScript load...
29 @peakaceag pa.ag
Not very successful and also problematic:
FOUT (Flash of unstyled Text) = super annoying flickering
Fi...
30 @peakaceag pa.ag
Credits: http://pa.ag/1GakitY & http://pa.ag/1NDXCVi
#3 HTTP/2
32 @peakaceag pa.ag
The HTTP Protocol is quite old… very old, in fact!
Tim Berners-Lee started his work in 1989, first def...
Does HTTP/2 require encryption?
No!
No. After extensive discussions, the working group did not have consensus
to require the use of encryption (e.g., TLS) for...
36 @peakaceag pa.ag
Browser Support: ~80 % - HTTP/2 has arrived!
See marker 2? This reads: Only supports HTTP/2 over TLS (...
So yes, you need HTTPs!
38 @peakaceag pa.ag
Source: Searchmetrics US Ranking Factors 2016 – Download: http://pa.ag/2gO9Qq3
39 @peakaceag pa.ag
HTTPs Top-10 Distribution by Industry
Source: Searchmetrics for Peak Ace
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 HTT...
41 @peakaceag pa.ag
BIG changes: HTTPs required for AMP!
Source: http://pa.ag/2fuOdYq
42 @peakaceag pa.ag
HTTPs ranking “boost” only at URL level…
Source: http://pa.ag/2ekj4Gi
43 @peakaceag pa.ag
Even if you don't believe in a “boost” …
Since January ‘17 HTTP login/credit card fields are flagged a...
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 w...
TLS handshake as well as certificate validation takes some time!
HTTPs (without HTTP/2) is slower…
46 @peakaceag pa.ag
Some tools to get you started with HTTP/2:
Download and test: https://tools.keycdn.com/http2-test & ht...
#Bonus: Critical Path Rendering
48 @peakaceag pa.ag
Critical Path Rendering
The code and resources required to render the initial view of a web page
They ...
49 @peakaceag pa.ag
1. Build/structure HTML in a way that critical
(above-the-fold) elements will be loaded
first and ther...
50 @peakaceag pa.ag
Ask yourself: What does your website REALLY need?
No custom fonts, no JavaScript and no video! But for...
You want your above-the-fold content to weigh 14 KB or less.
The browser can start rendering as soon as the first packet a...
52 @peakaceag pa.ag
How to know what CSS is critically required?
Snapshots of CSS rules applied each for „mobile“ as well ...
A function for loading CSS asynchronously, designed for CSS that
is not critical. Combine with new <link rel="preload">
lo...
54 @peakaceag pa.ag
Async loading for (non-critical) CSS
Get it here: http://pa.ag/2ox6Gds
Loading non-critical CSS
async ...
55 @peakaceag pa.ag
There is soooo… much more to do:
Get the slides: https://pa.ag/iss17speed
56 @peakaceag pa.ag
http://pa.ag/brg17spd
Always looking for talent! Check out jobs.pa.ag
Bastian Grimm
bg@pa.ag
twitter.c...
Upcoming SlideShare
Loading in …5
×

Three site speed optimisation tips to make your website REALLY fast - BrightonSEO 2017

4,333 views

Published on

Covering image optimization strategies, custom fonts optimization, HTTP/2 and HTTPS as well as Critical Rendering Path Optimization stratgegies.

Published in: Technology

Three site speed optimisation tips to make your website REALLY fast - BrightonSEO 2017

  1. 1. Bastian Grimm Peak Ace AG Three site speed optimisation tips to make your website REALLY fast! @basgr http://www.slideshare.net/bastiangrimm
  2. 2. Unfortunately, I‘ve got issues…
  3. 3. There is nothing worse (for me) than having to wait for anything to load! I really am NOT a patient guy…
  4. 4. Fast loading time plays an important role in overall user experience! Performance = User Experience!
  5. 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. 6 @peakaceag pa.ag By the way: Tired of taking notes? Find the deck on SlideShare: https://pa.ag/brg17spd
  7. 7. 7 @peakaceag pa.ag Google is obsessed with site speed and always pushes for faster sites: Source: http://pa.ag/1cWFCtY
  8. 8. #1 New Image Formats
  9. 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. 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. 11. Highest possible quality, (more) efficient data compression and smaller file-size! Smaller, better, faster, stronger.
  12. 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. 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. 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. 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. 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. 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. 18. Why not optimize old file-types?
  19. 19. 19 @peakaceag pa.ag
  20. 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. 21. Has anyone heard of this? More funny names: Brotli
  22. 22. 22 @peakaceag pa.ag
  23. 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. 24 @peakaceag pa.ag Quick adoption… major browser support is already there! Source: http://caniuse.com/#search=brotli
  25. 25. #2 Custom Webfonts
  26. 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. 27 @peakaceag pa.ag Classic scenario: Font loading using external CSS Easy to use … but one big disadvantage: CSS is render-blocking!
  28. 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. 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. 30 @peakaceag pa.ag Credits: http://pa.ag/1GakitY & http://pa.ag/1NDXCVi
  31. 31. #3 HTTP/2
  32. 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. 33. Does HTTP/2 require encryption?
  34. 34. No!
  35. 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. 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. 37. So yes, you need HTTPs!
  38. 38. 38 @peakaceag pa.ag Source: Searchmetrics US Ranking Factors 2016 – Download: http://pa.ag/2gO9Qq3
  39. 39. 39 @peakaceag pa.ag HTTPs Top-10 Distribution by Industry Source: Searchmetrics for Peak Ace
  40. 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. 41 @peakaceag pa.ag BIG changes: HTTPs required for AMP! Source: http://pa.ag/2fuOdYq
  42. 42. 42 @peakaceag pa.ag HTTPs ranking “boost” only at URL level… Source: http://pa.ag/2ekj4Gi
  43. 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. 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. 45. TLS handshake as well as certificate validation takes some time! HTTPs (without HTTP/2) is slower…
  46. 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. 47. #Bonus: Critical Path Rendering
  48. 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. 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. 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. 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. 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. 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. 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. 55 @peakaceag pa.ag There is soooo… much more to do: Get the slides: https://pa.ag/iss17speed
  56. 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:

×