SlideShare a Scribd company logo
1 of 56
Bastian Grimm
Peak Ace AG
Three site speed optimisation tips
to make your website REALLY fast!
@basgr
http://www.slideshare.net/bastiangrimm
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 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 @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 earlier!
More: https://www.igvita.com/2012/12/18/deploying-new-image-formats-on-the-web/
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
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, colour profiles, animation and
much smaller files (30 % vs. JPEG, 80 % vs. PNG)
Everything about WebP: http://pa.ag/1EpFWeN
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 @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 @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 @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 @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
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 and browsers don’t need to adopt!
Source: http://pa.ag/2nyZjxf
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: currently only for Firefox and nginx
Try it out: http://pa.ag/1XdM1RV & http://pa.ag/1XdMK5w
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 requests
Source: http://pa.ag/1BRUnbe
27 @peakaceag pa.ag
Classic scenario: Font loading using external CSS
Easy to use … but one big disadvantage: CSS is render-blocking!
28 @peakaceag pa.ag
Load custom fonts with Google’s Fontloader
Google’s asynchronous solution: webfont.js (JavaScript loads first, then CSS)
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 @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 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
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 the new protocol!
Does HTTP/2 require encryption?
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
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 HTTPs by end of 2017!”
„
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 as “not secure.”
In future, all HTTP URLs are going to be flagged!
Source: http://pa.ag/2eh2Trk
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!”
„
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 & http://pa.ag/2cG7R3k & https://www.ssllabs.com/ssltest/
#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 [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 @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 @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).”
„
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 @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
A function for loading CSS asynchronously, designed for CSS that
is not critical. Combine with new <link rel="preload">
loadCSS is your friend!
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 @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.com/peakaceag
facebook.com/peakaceag
www.pa.ag
Found this useful? Here are the slides:

More Related Content

What's hot

How fast is fast enough - SMX West 2018
How fast is fast enough - SMX West 2018How fast is fast enough - SMX West 2018
How fast is fast enough - SMX West 2018Bastian Grimm
 
SearchLove Boston 2018 - Bartosz Goralewicz - JavaScript: Looking Past the ...
SearchLove Boston 2018 -  Bartosz Goralewicz -  JavaScript: Looking Past the ...SearchLove Boston 2018 -  Bartosz Goralewicz -  JavaScript: Looking Past the ...
SearchLove Boston 2018 - Bartosz Goralewicz - JavaScript: Looking Past the ...Distilled
 
On-Page SEO EXTREME - SEOZone Istanbul 2013
On-Page SEO EXTREME - SEOZone Istanbul 2013On-Page SEO EXTREME - SEOZone Istanbul 2013
On-Page SEO EXTREME - SEOZone Istanbul 2013Bastian Grimm
 
Migration Best Practices - Peak Ace on Air
Migration Best Practices - Peak Ace on AirMigration Best Practices - Peak Ace on Air
Migration Best Practices - Peak Ace on AirBastian Grimm
 
Structured Data & Schema.org - SMX Milan 2014
Structured Data & Schema.org - SMX Milan 2014Structured Data & Schema.org - SMX Milan 2014
Structured Data & Schema.org - SMX Milan 2014Bastian Grimm
 
Use Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEO
Use Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEOUse Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEO
Use Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEOGerry White
 
SearchLove Boston 2018 - Tom Anthony - Hacking Google: what you can learn fro...
SearchLove Boston 2018 - Tom Anthony - Hacking Google: what you can learn fro...SearchLove Boston 2018 - Tom Anthony - Hacking Google: what you can learn fro...
SearchLove Boston 2018 - Tom Anthony - Hacking Google: what you can learn fro...Distilled
 
Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Onely
 
SMX Munich 2018 - Current State of JavaScript SEO
SMX Munich 2018 - Current State of JavaScript SEOSMX Munich 2018 - Current State of JavaScript SEO
SMX Munich 2018 - Current State of JavaScript SEOOnely
 
Split Testing for SEO - 9 Months of Learning
Split Testing for SEO - 9 Months of LearningSplit Testing for SEO - 9 Months of Learning
Split Testing for SEO - 9 Months of LearningDominic Woodman
 
Challenges of building a search engine like web rendering service
Challenges of building a search engine like web rendering serviceChallenges of building a search engine like web rendering service
Challenges of building a search engine like web rendering serviceGiacomo Zecchini
 
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014Technical SEO: Crawl Space Management - SEOZone Istanbul 2014
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014Bastian Grimm
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersDistilled
 
Migration Best Practices - SMX West 2019
Migration Best Practices - SMX West 2019Migration Best Practices - SMX West 2019
Migration Best Practices - SMX West 2019Bastian Grimm
 
Automating Google Lighthouse
Automating Google LighthouseAutomating Google Lighthouse
Automating Google LighthouseHamlet Batista
 
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AGTechnical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AGBastian Grimm
 
Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Bastian Grimm
 
Migration Best Practices - SMX London 2018
Migration Best Practices - SMX London 2018Migration Best Practices - SMX London 2018
Migration Best Practices - SMX London 2018Bastian Grimm
 
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...Branded3
 

What's hot (20)

How fast is fast enough - SMX West 2018
How fast is fast enough - SMX West 2018How fast is fast enough - SMX West 2018
How fast is fast enough - SMX West 2018
 
SearchLove Boston 2018 - Bartosz Goralewicz - JavaScript: Looking Past the ...
SearchLove Boston 2018 -  Bartosz Goralewicz -  JavaScript: Looking Past the ...SearchLove Boston 2018 -  Bartosz Goralewicz -  JavaScript: Looking Past the ...
SearchLove Boston 2018 - Bartosz Goralewicz - JavaScript: Looking Past the ...
 
On-Page SEO EXTREME - SEOZone Istanbul 2013
On-Page SEO EXTREME - SEOZone Istanbul 2013On-Page SEO EXTREME - SEOZone Istanbul 2013
On-Page SEO EXTREME - SEOZone Istanbul 2013
 
Migration Best Practices - Peak Ace on Air
Migration Best Practices - Peak Ace on AirMigration Best Practices - Peak Ace on Air
Migration Best Practices - Peak Ace on Air
 
Structured Data & Schema.org - SMX Milan 2014
Structured Data & Schema.org - SMX Milan 2014Structured Data & Schema.org - SMX Milan 2014
Structured Data & Schema.org - SMX Milan 2014
 
Use Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEO
Use Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEOUse Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEO
Use Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEO
 
SearchLove Boston 2018 - Tom Anthony - Hacking Google: what you can learn fro...
SearchLove Boston 2018 - Tom Anthony - Hacking Google: what you can learn fro...SearchLove Boston 2018 - Tom Anthony - Hacking Google: what you can learn fro...
SearchLove Boston 2018 - Tom Anthony - Hacking Google: what you can learn fro...
 
Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript
 
SMX Munich 2018 - Current State of JavaScript SEO
SMX Munich 2018 - Current State of JavaScript SEOSMX Munich 2018 - Current State of JavaScript SEO
SMX Munich 2018 - Current State of JavaScript SEO
 
SEO for Large Websites
SEO for Large WebsitesSEO for Large Websites
SEO for Large Websites
 
Split Testing for SEO - 9 Months of Learning
Split Testing for SEO - 9 Months of LearningSplit Testing for SEO - 9 Months of Learning
Split Testing for SEO - 9 Months of Learning
 
Challenges of building a search engine like web rendering service
Challenges of building a search engine like web rendering serviceChallenges of building a search engine like web rendering service
Challenges of building a search engine like web rendering service
 
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014Technical SEO: Crawl Space Management - SEOZone Istanbul 2014
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
 
Migration Best Practices - SMX West 2019
Migration Best Practices - SMX West 2019Migration Best Practices - SMX West 2019
Migration Best Practices - SMX West 2019
 
Automating Google Lighthouse
Automating Google LighthouseAutomating Google Lighthouse
Automating Google Lighthouse
 
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AGTechnical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
 
Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018
 
Migration Best Practices - SMX London 2018
Migration Best Practices - SMX London 2018Migration Best Practices - SMX London 2018
Migration Best Practices - SMX London 2018
 
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
 

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

The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018Bastian Grimm
 
The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018Anton Shulke
 
Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Bastian Grimm
 
SEO 101 - Google Page Speed Insights Explained
SEO 101 - Google Page Speed Insights Explained SEO 101 - Google Page Speed Insights Explained
SEO 101 - Google Page Speed Insights Explained Steve Weber
 
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...Otto Kekäläinen
 
Web Client Performance
Web Client PerformanceWeb Client Performance
Web Client PerformanceHerea Adrian
 
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014Bastian Grimm
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahooguestb1b95b
 
Word press optimizations
Word press optimizations Word press optimizations
Word press optimizations Shawn DeWolfe
 
Fluent 2018: Tracking Performance of the Web with HTTP Archive
Fluent 2018: Tracking Performance of the Web with HTTP ArchiveFluent 2018: Tracking Performance of the Web with HTTP Archive
Fluent 2018: Tracking Performance of the Web with HTTP ArchivePaul Calvano
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站areyouok
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站topgeek
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax ApplicationsSiarhei Barysiuk
 
The Need For Speed
The Need For SpeedThe Need For Speed
The Need For SpeedAndy Davies
 
Performance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For SpeedPerformance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For SpeedVijay Rayapati
 
JS digest. Decemebr 2017
JS digest. Decemebr 2017JS digest. Decemebr 2017
JS digest. Decemebr 2017ElifTech
 
improve website performance
improve website performanceimprove website performance
improve website performanceamit Sinha
 

Similar to Three site speed optimisation tips to make your website REALLY fast - BrightonSEO 2017 (20)

The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018
 
The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018
 
Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018
 
SEO 101 - Google Page Speed Insights Explained
SEO 101 - Google Page Speed Insights Explained SEO 101 - Google Page Speed Insights Explained
SEO 101 - Google Page Speed Insights Explained
 
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
 
Web Client Performance
Web Client PerformanceWeb Client Performance
Web Client Performance
 
Front-end performances
Front-end performancesFront-end performances
Front-end performances
 
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahoo
 
Word press optimizations
Word press optimizations Word press optimizations
Word press optimizations
 
Fluent 2018: Tracking Performance of the Web with HTTP Archive
Fluent 2018: Tracking Performance of the Web with HTTP ArchiveFluent 2018: Tracking Performance of the Web with HTTP Archive
Fluent 2018: Tracking Performance of the Web with HTTP Archive
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
 
SEARCH Y - Bastian Grimm - Migrations Best Practices
SEARCH Y - Bastian Grimm -  Migrations Best PracticesSEARCH Y - Bastian Grimm -  Migrations Best Practices
SEARCH Y - Bastian Grimm - Migrations Best Practices
 
High-Speed HTML5
High-Speed HTML5High-Speed HTML5
High-Speed HTML5
 
The Need For Speed
The Need For SpeedThe Need For Speed
The Need For Speed
 
Performance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For SpeedPerformance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For Speed
 
JS digest. Decemebr 2017
JS digest. Decemebr 2017JS digest. Decemebr 2017
JS digest. Decemebr 2017
 
improve website performance
improve website performanceimprove website performance
improve website performance
 

More from Bastian Grimm

SEOday Köln 2020 - Surprise, Surprise - 5 SEO secrets
SEOday Köln 2020 - Surprise, Surprise - 5 SEO secretsSEOday Köln 2020 - Surprise, Surprise - 5 SEO secrets
SEOday Köln 2020 - Surprise, Surprise - 5 SEO secretsBastian Grimm
 
Advanced data-driven technical SEO - SMX London 2019
Advanced data-driven technical SEO - SMX London 2019Advanced data-driven technical SEO - SMX London 2019
Advanced data-driven technical SEO - SMX London 2019Bastian Grimm
 
Migration Best Practices - Search Y 2019, Paris
Migration Best Practices - Search Y 2019, ParisMigration Best Practices - Search Y 2019, Paris
Migration Best Practices - Search Y 2019, ParisBastian Grimm
 
Migration Best Practices - SEOkomm 2018
Migration Best Practices - SEOkomm 2018Migration Best Practices - SEOkomm 2018
Migration Best Practices - SEOkomm 2018Bastian Grimm
 
Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018
Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018
Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018Bastian Grimm
 
OK Google, Whats next? - OMT Wiesbaden 2018
OK Google, Whats next? - OMT Wiesbaden 2018OK Google, Whats next? - OMT Wiesbaden 2018
OK Google, Whats next? - OMT Wiesbaden 2018Bastian Grimm
 
Digitale Assistenzsysteme - SMX München 2018
Digitale Assistenzsysteme - SMX München 2018Digitale Assistenzsysteme - SMX München 2018
Digitale Assistenzsysteme - SMX München 2018Bastian Grimm
 
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017Bastian Grimm
 
Digitale Assistenten - OMX 2017
Digitale Assistenten - OMX 2017Digitale Assistenten - OMX 2017
Digitale Assistenten - OMX 2017Bastian Grimm
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Bastian Grimm
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Bastian Grimm
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017Bastian Grimm
 
Keyword Strategie: Do's & Don'ts bei der Keyword Recherche - SMX München 2017
Keyword Strategie: Do's & Don'ts bei der Keyword Recherche - SMX München 2017Keyword Strategie: Do's & Don'ts bei der Keyword Recherche - SMX München 2017
Keyword Strategie: Do's & Don'ts bei der Keyword Recherche - SMX München 2017Bastian Grimm
 
Technical SEO: 2017 Edition - SEO & Love Verona 2017
Technical SEO: 2017 Edition - SEO & Love Verona 2017Technical SEO: 2017 Edition - SEO & Love Verona 2017
Technical SEO: 2017 Edition - SEO & Love Verona 2017Bastian Grimm
 
Quo Vadis SEO (Die Zukunft des SEO) - SEOkomm Salzburg 2016
Quo Vadis SEO (Die Zukunft des SEO) - SEOkomm Salzburg 2016Quo Vadis SEO (Die Zukunft des SEO) - SEOkomm Salzburg 2016
Quo Vadis SEO (Die Zukunft des SEO) - SEOkomm Salzburg 2016Bastian Grimm
 
Technical SEO: 2016 Edition - SEODAY 2016
Technical SEO: 2016 Edition - SEODAY 2016Technical SEO: 2016 Edition - SEODAY 2016
Technical SEO: 2016 Edition - SEODAY 2016Bastian Grimm
 
Crawl Budget Best Practices - SEODAY 2016
Crawl Budget Best Practices - SEODAY 2016Crawl Budget Best Practices - SEODAY 2016
Crawl Budget Best Practices - SEODAY 2016Bastian Grimm
 

More from Bastian Grimm (17)

SEOday Köln 2020 - Surprise, Surprise - 5 SEO secrets
SEOday Köln 2020 - Surprise, Surprise - 5 SEO secretsSEOday Köln 2020 - Surprise, Surprise - 5 SEO secrets
SEOday Köln 2020 - Surprise, Surprise - 5 SEO secrets
 
Advanced data-driven technical SEO - SMX London 2019
Advanced data-driven technical SEO - SMX London 2019Advanced data-driven technical SEO - SMX London 2019
Advanced data-driven technical SEO - SMX London 2019
 
Migration Best Practices - Search Y 2019, Paris
Migration Best Practices - Search Y 2019, ParisMigration Best Practices - Search Y 2019, Paris
Migration Best Practices - Search Y 2019, Paris
 
Migration Best Practices - SEOkomm 2018
Migration Best Practices - SEOkomm 2018Migration Best Practices - SEOkomm 2018
Migration Best Practices - SEOkomm 2018
 
Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018
Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018
Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018
 
OK Google, Whats next? - OMT Wiesbaden 2018
OK Google, Whats next? - OMT Wiesbaden 2018OK Google, Whats next? - OMT Wiesbaden 2018
OK Google, Whats next? - OMT Wiesbaden 2018
 
Digitale Assistenzsysteme - SMX München 2018
Digitale Assistenzsysteme - SMX München 2018Digitale Assistenzsysteme - SMX München 2018
Digitale Assistenzsysteme - SMX München 2018
 
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
 
Digitale Assistenten - OMX 2017
Digitale Assistenten - OMX 2017Digitale Assistenten - OMX 2017
Digitale Assistenten - OMX 2017
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017
 
Keyword Strategie: Do's & Don'ts bei der Keyword Recherche - SMX München 2017
Keyword Strategie: Do's & Don'ts bei der Keyword Recherche - SMX München 2017Keyword Strategie: Do's & Don'ts bei der Keyword Recherche - SMX München 2017
Keyword Strategie: Do's & Don'ts bei der Keyword Recherche - SMX München 2017
 
Technical SEO: 2017 Edition - SEO & Love Verona 2017
Technical SEO: 2017 Edition - SEO & Love Verona 2017Technical SEO: 2017 Edition - SEO & Love Verona 2017
Technical SEO: 2017 Edition - SEO & Love Verona 2017
 
Quo Vadis SEO (Die Zukunft des SEO) - SEOkomm Salzburg 2016
Quo Vadis SEO (Die Zukunft des SEO) - SEOkomm Salzburg 2016Quo Vadis SEO (Die Zukunft des SEO) - SEOkomm Salzburg 2016
Quo Vadis SEO (Die Zukunft des SEO) - SEOkomm Salzburg 2016
 
Technical SEO: 2016 Edition - SEODAY 2016
Technical SEO: 2016 Edition - SEODAY 2016Technical SEO: 2016 Edition - SEODAY 2016
Technical SEO: 2016 Edition - SEODAY 2016
 
Crawl Budget Best Practices - SEODAY 2016
Crawl Budget Best Practices - SEODAY 2016Crawl Budget Best Practices - SEODAY 2016
Crawl Budget Best Practices - SEODAY 2016
 

Recently uploaded

Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxFIDO Alliance
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?Paolo Missier
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxMarkSteadman7
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxMasterG
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMKumar Satyam
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform EngineeringMarcus Vechiato
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data SciencePaolo Missier
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireExakis Nelite
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!Memoori
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAnitaRaj43
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptxFIDO Alliance
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfalexjohnson7307
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024Lorenzo Miniero
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityVictorSzoltysek
 
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...SOFTTECHHUB
 
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiNavigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiRaviKumarDaparthi
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxFIDO Alliance
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...panagenda
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfOverkill Security
 

Recently uploaded (20)

Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
 
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiNavigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi Daparthi
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdf
 

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

  • 1. Bastian Grimm Peak Ace AG Three site speed optimisation tips to make your website REALLY fast! @basgr http://www.slideshare.net/bastiangrimm
  • 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?
  • 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
  • 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
  • 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
  • 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/
  • 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: