Three site speed optimisation tips to make your website REALLY fast...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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...

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

Advanced Local SEO Tips to Help You... by Greg Gifford 9226 views

View on Slideshare

1 of 56 Ad

View on Slideshare

1 of 56 Ad