T3CMD19 - Day 2 - Performance

•Download as PPTX, PDF•

2 likes•652 views

TYPO3 GmbH

Talk on Web Performance TYPO3 Camp Mitteldeutschland, an 26th 2019

Technology

THE MAGIC
NUMBER
26.01.201
9
Performance 3

67 SECONDS
 67 seconds
 Small dataset (2 billion page impressions)
 Conversions decline exponentially
 You lose money
26.01.201
9
Performance 4

PERFORMANCE
COMPONENTS
26.01.201
9
Performance 5

PERFORMANCE COMPONENTS
 Server Side Rendering
 Asset delivery
 Client bandwidth
 Client CPU cycles
26.01.201
9
Performance 6

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
26.01.201
9
Performance 7

ASSET DELIVERY
 Deliver fast
 Deliver regionally
 Deliver optimized
 Really mean that!
 OP-TI-MIZE… please
26.01.201
9
Performance 8

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

CLIENT CPU CYCLES
 Test on slow devices
 Kill on-scroll
 Transition via CSS
 Offload defered JS onto threads
 Aim for 60 fps
26.01.201
9
Performance 10

TERMINOLOGY
 FCP: First contentful paint
 FMP: First meaningful paint
 TTI: Time to interactive
 PB: Performance Budget
 Bloat: CSS/JS not used in current
document
26.01.201
9
Performance 14

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

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

3 LOAD LIGHTLY
 Trim
 Defer
 Lazy-load
 Use lightweight alternatives
 Minimize 3rd party scripts
26.01.201
9
Performance 18

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

5 CSS GROUPING
 Load blocking JS before blocking CSS
 Split up critical CSS per media query
 Measure
 Experiment
 Repeat
26.01.201
9
Performance 20

6 PRE-FETCH
 dns-lookup
 preconnect
 prefetch
 preload (carefully)
26.01.201
9
Performance 21

7 WEBFONTS
 Seriously consider system fonts
 Remove bloat subsets
 Remove bloat charsets
 Make use of font-display
26.01.201
9
Performance 22

8 OPTIMIZE IMAGES
 Use webP
 Optimize image size per viewport
 Bootstrap package can help here
 3SL Image Rendering Service
26.01.201
9
Performance 23

9 HEADERS
 Set HTTP Cache headers properly
 Set HTTP security headers properly
26.01.201
9
Performance 24

10 COMPRESSION
 Use Brotli
 Use Zopfli
 Use at least gzip
26.01.201
9
Performance 25

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

12 SERVICE WORKER
 Use service workers
 … for webfonts
 … for CSS
 … for JS
 … for re-used images
26.01.201
9
Performance 27

STILL THINK
YOU‘RE
„DESIGNING
“?
26.01.201
9
Performance 28

What's hot

WEBridge 4 SAP R 1.0Gandhavalla Informatics Pvt Ltd.

Front End Optimization, 'The Cloud' can help you!Marco Vito Moscaritolo

A Gentle Introduction to Functions-as-a-ServiceValeri Karpov

Rencore Webinar: Developing Secure and Performant JavaScript for SharePointRencore

GWAVACon 2013: Bundle CommanderGWAVA

Web Sockets - HTML5Matheus Marabesi

Synthetic web performance testing with SeleniumAndriy Samilyak

Business Apps with the Universal Windows PlatformChristian Nagel

Configuring & Installing Joomla on Windows using WAMP Server.Abhijit B.

Validationjoren de groof

Introduction to Web SocketsJumping Bean

The WordPress Performance TeamFelix Arntz

Client side production monitoring using - SyncApp ToolBhupesh Pant

SignalRSlawomir Dorzak

Caching 101Andy Melichar

Mobile WebDriver SelendroidMichael Palotas

Grokking TechTalk #33: High Concurrency Architecture at TIKIGrokking VN

Rails On AWS - RubyFools Copenhagen 2008 by Jonathan WeissJonathan Weiss

AMP The Good The Bad and the UglyJohn Pettitt

How to Develop for Data Transformation with FME ServerSafe Software

What's hot (20)

WEBridge 4 SAP R 1.0

Front End Optimization, 'The Cloud' can help you!

A Gentle Introduction to Functions-as-a-Service

Rencore Webinar: Developing Secure and Performant JavaScript for SharePoint

GWAVACon 2013: Bundle Commander

Web Sockets - HTML5

Synthetic web performance testing with Selenium

Business Apps with the Universal Windows Platform

Configuring & Installing Joomla on Windows using WAMP Server.

Validation

Introduction to Web Sockets

The WordPress Performance Team

Client side production monitoring using - SyncApp Tool

SignalR

Caching 101

Mobile WebDriver Selendroid

Grokking TechTalk #33: High Concurrency Architecture at TIKI

Rails On AWS - RubyFools Copenhagen 2008 by Jonathan Weiss

AMP The Good The Bad and the Ugly

How to Develop for Data Transformation with FME Server

Similar to T3CMD19 - Day 2 - Performance

Frontend performance on the webTRITUM

Performace optimization (increase website speed)clickramanm

#Webperf ChoreographyHarald Kirschner

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

Shopzilla - Performance By DesignTim Morrow

Site Performance Challenge: Magento with CloudMaestroLagrange Systems

Boston Web Performance Meetup: The Render Chain and Youmattringel

Get into less by tess hsuYating Chatiron

7 Habits of Exceptional PerformanceNicole Sullivan

Welcome to Blazordark_wisdom

High Performance Ajax ApplicationsSiarhei Barysiuk

Web Performance Part 3 "Server-side tips"Binary Studio

Need For Speed: How to Deliver Faster, Safer WebsitesRachel Wandishin

Tips and Tricks For Faster Asp.NET and MVC ApplicationsSarvesh Kushwaha

Performance optimization - BasicsFilip Mares

Frontend performance on the web | Presentation @ecommercecamp 2019dreistromland

Containerize Legacy .NET Framework Web Apps for Cloud Migration (WIN305) - AW...Amazon Web Services

How to optimize your Magento store Rasbor.com

Containerize Legacy .NET Framework Web Apps for Cloud Migration - ENT201 - Ch...Amazon Web Services

Web Speed And ScalabilityJason Ragsdale

Similar to T3CMD19 - Day 2 - Performance (20)

Frontend performance on the web

Performace optimization (increase website speed)

#Webperf Choreography

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

Shopzilla - Performance By Design

Site Performance Challenge: Magento with CloudMaestro

Boston Web Performance Meetup: The Render Chain and You

Get into less by tess hsu

7 Habits of Exceptional Performance

Welcome to Blazor

High Performance Ajax Applications

Web Performance Part 3 "Server-side tips"

Need For Speed: How to Deliver Faster, Safer Websites

Tips and Tricks For Faster Asp.NET and MVC Applications

Performance optimization - Basics

Frontend performance on the web | Presentation @ecommercecamp 2019

Containerize Legacy .NET Framework Web Apps for Cloud Migration (WIN305) - AW...

How to optimize your Magento store

Containerize Legacy .NET Framework Web Apps for Cloud Migration - ENT201 - Ch...

Web Speed And Scalability

Recently uploaded

The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech

TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc

WordPress Websites for Engineers: Elevate Your Brandgvaughan

Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity

Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada

Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos

New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada

Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3

Time Series Foundation Models - current state and future directionsNathaniel Shimoni

Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University

Training state-of-the-art general text embeddingZilliz

Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB

Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3

Rise of the Machines: Known As Drones...Rick Flair

What is Artificial Intelligence?????????blackmambaettijean

Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan

Gen AI in Business - Global Trends Report 2024.pdfAddepto

DevEX - reference for building teams, processes, and platformsSergiu Bodiu

Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited

TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey

Recently uploaded (20)

The Ultimate Guide to Choosing WordPress Pros and Cons

TrustArc Webinar - How to Build Consumer Trust Through Data Privacy

WordPress Websites for Engineers: Elevate Your Brand

Dev Dives: Streamline document processing with UiPath Studio Web

Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024

Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)

New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024

Digital Identity is Under Attack: FIDO Paris Seminar.pptx

Time Series Foundation Models - current state and future directions

Nell’iperspazio con Rocket: il Framework Web di Rust!

Training state-of-the-art general text embedding

Developer Data Modeling Mistakes: From Postgres to NoSQL

Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx

Rise of the Machines: Known As Drones...

What is Artificial Intelligence?????????

Generative AI for Technical Writer or Information Developers

Gen AI in Business - Global Trends Report 2024.pdf

DevEX - reference for building teams, processes, and platforms

Ensuring Technical Readiness For Copilot in Microsoft 365

TeamStation AI System Report LATAM IT Salaries 2024

T3CMD19 - Day 2 - Performance

1. PERFORMANCE Mathias / Björn

2. 26.01.201 9 Performance 2

3. THE MAGIC NUMBER 26.01.201 9 Performance 3

4. 67 SECONDS  67 seconds  Small dataset (2 billion page impressions)  Conversions decline exponentially  You lose money 26.01.201 9 Performance 4

5. PERFORMANCE COMPONENTS 26.01.201 9 Performance 5

6. PERFORMANCE COMPONENTS  Server Side Rendering  Asset delivery  Client bandwidth  Client CPU cycles 26.01.201 9 Performance 6

7. 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 26.01.201 9 Performance 7

8. ASSET DELIVERY  Deliver fast  Deliver regionally  Deliver optimized  Really mean that!  OP-TI-MIZE… please 26.01.201 9 Performance 8

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

10. CLIENT CPU CYCLES  Test on slow devices  Kill on-scroll  Transition via CSS  Offload defered JS onto threads  Aim for 60 fps 26.01.201 9 Performance 10

11. 26.01.201 9 Performance 11

12. 12 TIPS 26.01.201 9 Performance 12

13. TERMINOLOGY 26.01.201 9 Performance 13

14. TERMINOLOGY  FCP: First contentful paint  FMP: First meaningful paint  TTI: Time to interactive  PB: Performance Budget  Bloat: CSS/JS not used in current document 26.01.201 9 Performance 14

15. 12 TIPS 26.01.201 9 Performance 15

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

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

18. 3 LOAD LIGHTLY  Trim  Defer  Lazy-load  Use lightweight alternatives  Minimize 3rd party scripts 26.01.201 9 Performance 18

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

20. 5 CSS GROUPING  Load blocking JS before blocking CSS  Split up critical CSS per media query  Measure  Experiment  Repeat 26.01.201 9 Performance 20

21. 6 PRE-FETCH  dns-lookup  preconnect  prefetch  preload (carefully) 26.01.201 9 Performance 21

22. 7 WEBFONTS  Seriously consider system fonts  Remove bloat subsets  Remove bloat charsets  Make use of font-display 26.01.201 9 Performance 22

23. 8 OPTIMIZE IMAGES  Use webP  Optimize image size per viewport  Bootstrap package can help here  3SL Image Rendering Service 26.01.201 9 Performance 23

24. 9 HEADERS  Set HTTP Cache headers properly  Set HTTP security headers properly 26.01.201 9 Performance 24

25. 10 COMPRESSION  Use Brotli  Use Zopfli  Use at least gzip 26.01.201 9 Performance 25

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

27. 12 SERVICE WORKER  Use service workers  … for webfonts  … for CSS  … for JS  … for re-used images 26.01.201 9 Performance 27

28. STILL THINK YOU‘RE „DESIGNING “? 26.01.201 9 Performance 28

29. THANK YOU! 26.01.201 9 Performance 29

T3CMD19 - Day 2 - Performance

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to T3CMD19 - Day 2 - Performance

Similar to T3CMD19 - Day 2 - Performance (20)

Recently uploaded

Recently uploaded (20)

T3CMD19 - Day 2 - Performance