Frontend performance on the web

•

0 gefällt mir•294 views

Talk about frontend performance on the web. Awesome figures, pillars of performance, some terminology, 12 quick wins and couple of web sources to continue your endeavor.

Internet

“ZALANDOSAWA0.7%INCREASEIN
REVENUEWHENTHEYSHAVED
100MSOFFTHEIRLOADTIME.”
16.03.2019 Performance 4

“CAROUSELLREDUCEDPAGELOAD
TIMEBY65%ANDSAWA63%
INCREASEINORGANIC TRAFFIC[...]”
16.03.2019 Performance 5

TIMKADLEC
17.6MILLIONKILOWATTHOURS
2BILLIONPEOPLE
5PAGES/D
1.500.000GBDATA
16.03.2019 Performance 6

MAGIC NUMBERS
FCP (fast)
 TYPO3: 44,82%
 Neos: 51,3%
 Umbraco: 45,61%
16.03.2019 Performance 8

PILLARS OF
PERFORMANCE
16.03.2019 Performance 9

PILLARS OF PERFORMANCE
 Server Side Rendering
 Asset delivery
 Client bandwidth
 Client CPU cycles
16.03.2019 Performance 10

SERVER SIDE RENDERING
 Write fast code
 Cache what can‘t be made fast
 Consider stuff older than 5 sec static
 Performance is design
 OP-TI-MIZE
16.03.2019 Performance 11

ASSET DELIVERY
 Deliver fast
 Deliver regionally
 Deliver optimized
 Really mean that!
 OP-TI-MIZE… please
16.03.2019 Performance 12

“53%OFVISITS TOMOBILESITES
AREABANDONEDAFTER3SECONDS
ACCORDING.”GOOGLEDOUBLECLICK
16.03.2019 Performance 13

CLIENT BANDWIDTH
 3G is broadband
 Company culture: One day of 2G per month
 Ship less HTML
 Ship less CSS
 Ship WAY less JS
 OP-TI-MIZE…. Pretty please
16.03.2019 Performance 14

CLIENT CPU CYCLES
 Test on slow devices
 Kill on-scroll
 Transition via CSS
 Offload defered JS onto threads
 Aim for 60 fps
Some Flowers™: 15fps  60fps +25%
conversion
16.03.2019 Performance 16

TERMINOLOGY
 FCP, FMP, TTI
 PB: Performance Budget
 Bloat: CSS/JS not used in current document
16.03.2019 Performance 19

1 SET GOALS
 First Meaningful Paint < 1 sec
 Time to Interactive < 5 sec (on slow 3G)
 Time to interactive < 2 sec (repeated visits)
16.03.2019 Performance 21

2: CRITICAL CSS
 Max Budget: 14kb
 Include in <head>
 Consider click through
 Bloat Budget: 15%
 Stay < 170kb textfile-size (compressed)
16.03.2019 Performance 22

3 LOAD LIGHTLY
 Trim
 Defer
 Lazy-load
 Use lightweight alternatives
 Minimize 3rd party scripts
16.03.2019 Performance 23

4 LEGACY LOADING
 Load core scripts normally
 Use <script type=„module“> for modern
browsers
16.03.2019 Performance 24

5 CSS GROUPING
 Load blocking JS before blocking CSS
 Split up critical CSS per media query
 Measure
 Experiment
 Repeat
16.03.2019 Performance 25

6 RESOURCE HINTS (HTTPS://W3C.GITHUB.IO/RESOURCE-HINTS/)
 dns-lookup
 preconnect
 prefetch
 preload (carefully)
16.03.2019 Performance 26

7 WEBFONTS
 Seriously consider system fonts
 Remove bloat subsets
 Remove bloat charsets
 Make use of font-display
(swap/ optional)
16.03.2019 Performance 27

“CHANGING THE WAY
FONTS WERE LOADED
[…] RESULTED IN THE
SPEED INDEX DROPPING
BY 50% FOR 4G
MOBILES.“
GOV.UK
16.03.2019 Performance 28

8 OPTIMIZE IMAGES
 Use webP
 Optimize image size per viewport
 Bootstrap package can help here
 dreistrom.land‘s Image Rendering Service
for lossless compression and convertion to
modern images formats
16.03.2019 Performance 29

9 HEADERS
 Set HTTP Cache headers properly
 Set HTTP security headers properly
16.03.2019 Performance 30

10 COMPRESSION
 Use Brotli
 Use Zopfli
 Use at least gzip
16.03.2019 Performance 31

11 HTTP/2
 Serve via HTTP/2
 Verify HPACK compression is available
 Monitor mixed-content warnings
 Enable OCSP stapling
 ^^ speeds up TLS handshakes
16.03.2019 Performance 32

12 SERVICE WORKER
 Use service worker cache for
 … webfonts
 … CSS
 … JS
 … re-used images
16.03.2019 Performance 33

STILL THINK
YOU‘RE
„DESIGNING“?
16.03.2019 Performance 34

SOURCES
 https://wpostats.com/
 https://timkadlec.com/
 https://www.smashingmagazine.com/2019/01/front-
end-performance-checklist-2019-pdf-pages/
 https://technology.blog.gov.uk/2018/10/04/making-
gov-uk-pages-load-faster-and-use-less-data/
 https://docs.google.com/spreadsheets/d/1lBQ0T1VB
lBrpkv5Q1vQJkU8hnya_5tRczf9c5TfIgnQ/edit#gid=0
16.03.2019 Performance 35

Empfohlen

T3CMD19 - Day 2 - PerformanceTYPO3 GmbH

Frontend performance on the web | Presentation @ecommercecamp 2019dreistromland

Mastering Microservices with Kong (CodeMotion 2019)Maarten Mulders

Maarten Mulders - Mastering Microservices with Kong - Codemotion Amsterdam 2019Codemotion

High Performance Cooperative Distributed Systems in AdtechC4Media

MongoDB classes 2019Alexandre BERGERE

Microservices: A foundational approach for fully managed cloud data analyticsSam Lightstone

Big dataclasses 2019_nosqlAlexandre BERGERE

Empfohlen

T3CMD19 - Day 2 - PerformanceTYPO3 GmbH

Frontend performance on the web | Presentation @ecommercecamp 2019dreistromland

Mastering Microservices with Kong (CodeMotion 2019)Maarten Mulders

Maarten Mulders - Mastering Microservices with Kong - Codemotion Amsterdam 2019Codemotion

High Performance Cooperative Distributed Systems in AdtechC4Media

MongoDB classes 2019Alexandre BERGERE

Microservices: A foundational approach for fully managed cloud data analyticsSam Lightstone

Big dataclasses 2019_nosqlAlexandre BERGERE

Meetup_adessoCamunda_2023-09-13_Part1&2_en.pdfMariaAlcantara50

Scaling Apache Pulsar to 10 PB/dayKarthik Ramasamy

Scaling Apache Pulsar to 10 Petabytes/Day - Pulsar Summit NA 2021 KeynoteStreamNative

Avoiding Log Data Overload in a CI/CD System While Streaming 190 Billion Even...DataWorks Summit

Optimizing SharePoint 2010 Internet SitesChris O'Brien

Cloud-based dynamic distributed optimisation of integrated process planning a...Piotr Dziurzanski

Perf tuning with-multitenantJacques Kostic

Serverless + Machine Learning – Bringing the best of two worlds togetherVidyasagar Machupalli

OSCamp 2019 | #3 Ansible: Directing the Director by Martin SchurzNETWAYS

Mvp skill saturday ep09 _06072019_azure updates - july 2019Kumton Suttiraksiri

Cloud native java workshopJamie Coleman

Climate compensate with a pull request (2).pdfAndreas Bjärlestam

Web Application Performance from User PerspectiveŁódQA

Distributed Cache-Aware Transactions for Polyglot PersistenceBaqend

Microservices, Containers, Kubernetes, Kafka, KanbanAraf Karsh Hamid

Presentation mongo db munichMongoDB

SOUG Virtual Day 28 May Hervé Schweitzer - Back To The Future Herve Schweitzer

Client Deployment of IBM Cloud Private (IBM #Think2019 #5964)Michael Elder

Rebuilding Web Tracking Infrastructure for ScaleDataWorks Summit/Hadoop Summit

Client Deployment of IBM Cloud Private (Think 2019 Session 5964A)Yong Feng

How-to be a good team leadTRITUM

TYPO3 Form Framework v9 & v10TRITUM

Weitere ähnliche Inhalte

Ähnlich wie Frontend performance on the web

Meetup_adessoCamunda_2023-09-13_Part1&2_en.pdfMariaAlcantara50

Scaling Apache Pulsar to 10 PB/dayKarthik Ramasamy

Scaling Apache Pulsar to 10 Petabytes/Day - Pulsar Summit NA 2021 KeynoteStreamNative

Avoiding Log Data Overload in a CI/CD System While Streaming 190 Billion Even...DataWorks Summit

Optimizing SharePoint 2010 Internet SitesChris O'Brien

Cloud-based dynamic distributed optimisation of integrated process planning a...Piotr Dziurzanski

Perf tuning with-multitenantJacques Kostic

Serverless + Machine Learning – Bringing the best of two worlds togetherVidyasagar Machupalli

OSCamp 2019 | #3 Ansible: Directing the Director by Martin SchurzNETWAYS

Mvp skill saturday ep09 _06072019_azure updates - july 2019Kumton Suttiraksiri

Cloud native java workshopJamie Coleman

Climate compensate with a pull request (2).pdfAndreas Bjärlestam

Web Application Performance from User PerspectiveŁódQA

Distributed Cache-Aware Transactions for Polyglot PersistenceBaqend

Microservices, Containers, Kubernetes, Kafka, KanbanAraf Karsh Hamid

Presentation mongo db munichMongoDB

SOUG Virtual Day 28 May Hervé Schweitzer - Back To The Future Herve Schweitzer

Client Deployment of IBM Cloud Private (IBM #Think2019 #5964)Michael Elder

Rebuilding Web Tracking Infrastructure for ScaleDataWorks Summit/Hadoop Summit

Client Deployment of IBM Cloud Private (Think 2019 Session 5964A)Yong Feng

Ähnlich wie Frontend performance on the web (20)

Meetup_adessoCamunda_2023-09-13_Part1&2_en.pdf

Scaling Apache Pulsar to 10 PB/day

Scaling Apache Pulsar to 10 Petabytes/Day - Pulsar Summit NA 2021 Keynote

Avoiding Log Data Overload in a CI/CD System While Streaming 190 Billion Even...

Optimizing SharePoint 2010 Internet Sites

Cloud-based dynamic distributed optimisation of integrated process planning a...

Perf tuning with-multitenant

Serverless + Machine Learning – Bringing the best of two worlds together

OSCamp 2019 | #3 Ansible: Directing the Director by Martin Schurz

Mvp skill saturday ep09 _06072019_azure updates - july 2019

Cloud native java workshop

Climate compensate with a pull request (2).pdf

Web Application Performance from User Perspective

Distributed Cache-Aware Transactions for Polyglot Persistence

Microservices, Containers, Kubernetes, Kafka, Kanban

Presentation mongo db munich

SOUG Virtual Day 28 May Hervé Schweitzer - Back To The Future

Client Deployment of IBM Cloud Private (IBM #Think2019 #5964)

Rebuilding Web Tracking Infrastructure for Scale

Client Deployment of IBM Cloud Private (Think 2019 Session 5964A)

Mehr von TRITUM

How-to be a good team leadTRITUM

TYPO3 Form Framework v9 & v10TRITUM

What's new in TYPO3 v9 LTSTRITUM

TYPO3 v9 - What's up?TRITUM

TYPO3 Form framework - features for v9TRITUM

TYPO3 form frameworkTRITUM

TYPO3 EXT:form for developersTRITUM

TYPO3 EXT:form for integratorsTRITUM

TYPO3 v8 most important changesTRITUM

Präsentation zu EXT:form by TRITUMTRITUM

Das Ende der Logfiles - mit Elasticsearch, Logstash und Kibana zu übersichtli...TRITUM

Mehr von TRITUM (11)

How-to be a good team lead

TYPO3 Form Framework v9 & v10

What's new in TYPO3 v9 LTS

TYPO3 v9 - What's up?

TYPO3 Form framework - features for v9

TYPO3 form framework

TYPO3 EXT:form for developers

TYPO3 EXT:form for integrators

TYPO3 v8 most important changes

Präsentation zu EXT:form by TRITUM

Das Ende der Logfiles - mit Elasticsearch, Logstash und Kibana zu übersichtli...

Kürzlich hochgeladen

VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Bookingdharasingh5698

Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...SUHANI PANDEY

Real Escorts in Al Nahda +971524965298 Dubai Escorts ServiceEscorts Call Girls

Nanded City ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready ...tanu pandey

APNIC Updates presented by Paul Wilson at ARIN 53APNIC

20240508 QFM014 Elixir Reading List April 2024.pdfMatthew Sinclair

VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting High Prof...singhpriety023

"Boost Your Digital Presence: Partner with a Leading SEO Agency"growthgrids

Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRLimonikaupta

20240510 QFM016 Irresponsible AI Reading List April 2024.pdfMatthew Sinclair

Trump Diapers Over Dems t shirts Sweatshirtrahman018755

💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋nirzagarg

Al Barsha Night Partner +0567686026 Call Girls DubaiEscorts Call Girls

📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱@Chandigarh #call #Girls 9053900678 @Call #Girls in @Punjab 9053900678

20240509 QFM015 Engineering Leadership Reading List April 2024.pdfMatthew Sinclair

Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service AvailableSeo

Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵Chandigarh Call girls 9053900678 Call girls in Chandigarh

在线制作约克大学毕业证（yu毕业证）在读证明认证可查ydyuyu

➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men 🔝mehsana🔝 Escorts...nirzagarg

( Pune ) VIP Pimpri Chinchwad Call Girls 🎗️ 9352988975 Sizzling | Escorts | G...nilamkumrai

Kürzlich hochgeladen (20)

VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking

Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...

Real Escorts in Al Nahda +971524965298 Dubai Escorts Service

Nanded City ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready ...

APNIC Updates presented by Paul Wilson at ARIN 53

20240508 QFM014 Elixir Reading List April 2024.pdf

VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting High Prof...

"Boost Your Digital Presence: Partner with a Leading SEO Agency"

Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL

20240510 QFM016 Irresponsible AI Reading List April 2024.pdf

Trump Diapers Over Dems t shirts Sweatshirt

💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋

Al Barsha Night Partner +0567686026 Call Girls Dubai

📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱

20240509 QFM015 Engineering Leadership Reading List April 2024.pdf

Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available

Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵

在线制作约克大学毕业证（yu毕业证）在读证明认证可查

➥🔝 7737669865 🔝▻ mehsana Call-girls in Women Seeking Men 🔝mehsana🔝 Escorts...

( Pune ) VIP Pimpri Chinchwad Call Girls 🎗️ 9352988975 Sizzling | Escorts | G...

Frontend performance on the web

1. FRONTEND PERFORMANCE Mathias / Björn

2. 16.03.2019 Performance 2 Björn Jacob

3. 16.03.2019 Performance 3

4. “ZALANDOSAWA0.7%INCREASEIN REVENUEWHENTHEYSHAVED 100MSOFFTHEIRLOADTIME.” 16.03.2019 Performance 4

5. “CAROUSELLREDUCEDPAGELOAD TIMEBY65%ANDSAWA63% INCREASEINORGANIC TRAFFIC[...]” 16.03.2019 Performance 5

6. TIMKADLEC 17.6MILLIONKILOWATTHOURS 2BILLIONPEOPLE 5PAGES/D 1.500.000GBDATA 16.03.2019 Performance 6

7. 16.03.2019 Performance 7

8. MAGIC NUMBERS FCP (fast)  TYPO3: 44,82%  Neos: 51,3%  Umbraco: 45,61% 16.03.2019 Performance 8

9. PILLARS OF PERFORMANCE 16.03.2019 Performance 9

10. PILLARS OF PERFORMANCE  Server Side Rendering  Asset delivery  Client bandwidth  Client CPU cycles 16.03.2019 Performance 10

11. SERVER SIDE RENDERING  Write fast code  Cache what can‘t be made fast  Consider stuff older than 5 sec static  Performance is design  OP-TI-MIZE 16.03.2019 Performance 11

12. ASSET DELIVERY  Deliver fast  Deliver regionally  Deliver optimized  Really mean that!  OP-TI-MIZE… please 16.03.2019 Performance 12

13. “53%OFVISITS TOMOBILESITES AREABANDONEDAFTER3SECONDS ACCORDING.”GOOGLEDOUBLECLICK 16.03.2019 Performance 13

14. CLIENT BANDWIDTH  3G is broadband  Company culture: One day of 2G per month  Ship less HTML  Ship less CSS  Ship WAY less JS  OP-TI-MIZE…. Pretty please 16.03.2019 Performance 14

15. 16.03.2019 Performance 15

16. CLIENT CPU CYCLES  Test on slow devices  Kill on-scroll  Transition via CSS  Offload defered JS onto threads  Aim for 60 fps Some Flowers™: 15fps  60fps +25% conversion 16.03.2019 Performance 16

17. 16.03.2019 Performance 17

18. TERMINOLOGY 16.03.2019 Performance 18

19. TERMINOLOGY  FCP, FMP, TTI  PB: Performance Budget  Bloat: CSS/JS not used in current document 16.03.2019 Performance 19

20. 12 TIPS 16.03.2019 Performance 20

21. 1 SET GOALS  First Meaningful Paint < 1 sec  Time to Interactive < 5 sec (on slow 3G)  Time to interactive < 2 sec (repeated visits) 16.03.2019 Performance 21

22. 2: CRITICAL CSS  Max Budget: 14kb  Include in <head>  Consider click through  Bloat Budget: 15%  Stay < 170kb textfile-size (compressed) 16.03.2019 Performance 22

23. 3 LOAD LIGHTLY  Trim  Defer  Lazy-load  Use lightweight alternatives  Minimize 3rd party scripts 16.03.2019 Performance 23

24. 4 LEGACY LOADING  Load core scripts normally  Use <script type=„module“> for modern browsers 16.03.2019 Performance 24

25. 5 CSS GROUPING  Load blocking JS before blocking CSS  Split up critical CSS per media query  Measure  Experiment  Repeat 16.03.2019 Performance 25

26. 6 RESOURCE HINTS (HTTPS://W3C.GITHUB.IO/RESOURCE-HINTS/)  dns-lookup  preconnect  prefetch  preload (carefully) 16.03.2019 Performance 26

27. 7 WEBFONTS  Seriously consider system fonts  Remove bloat subsets  Remove bloat charsets  Make use of font-display (swap/ optional) 16.03.2019 Performance 27

28. “CHANGING THE WAY FONTS WERE LOADED […] RESULTED IN THE SPEED INDEX DROPPING BY 50% FOR 4G MOBILES.“ GOV.UK 16.03.2019 Performance 28

29. 8 OPTIMIZE IMAGES  Use webP  Optimize image size per viewport  Bootstrap package can help here  dreistrom.land‘s Image Rendering Service for lossless compression and convertion to modern images formats 16.03.2019 Performance 29

30. 9 HEADERS  Set HTTP Cache headers properly  Set HTTP security headers properly 16.03.2019 Performance 30

31. 10 COMPRESSION  Use Brotli  Use Zopfli  Use at least gzip 16.03.2019 Performance 31

32. 11 HTTP/2  Serve via HTTP/2  Verify HPACK compression is available  Monitor mixed-content warnings  Enable OCSP stapling  ^^ speeds up TLS handshakes 16.03.2019 Performance 32

33. 12 SERVICE WORKER  Use service worker cache for  … webfonts  … CSS  … JS  … re-used images 16.03.2019 Performance 33

34. STILL THINK YOU‘RE „DESIGNING“? 16.03.2019 Performance 34

35. SOURCES  https://wpostats.com/  https://timkadlec.com/  https://www.smashingmagazine.com/2019/01/frontend-performance-checklist-2019-pdf-pages/  https://technology.blog.gov.uk/2018/10/04/making- gov-uk-pages-load-faster-and-use-less-data/  https://docs.google.com/spreadsheets/d/1lBQ0T1VB lBrpkv5Q1vQJkU8hnya_5tRczf9c5TfIgnQ/edit#gid=0 16.03.2019 Performance 35

36. THANK YOU! 16.03.2019 Performance 36