SlideShare a Scribd company logo
1 of 76
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
The sluggish Web ,[object Object],[object Object],[object Object],[object Object],[object Object]
This talk ,[object Object],[object Object],[object Object],[object Object]
Exceptional Performance at Yahoo! ,[object Object],[object Object],[object Object],[object Object]
 
The Importance of Front-End Performance Back-end= 5% Front-end= 95% Even here, front-end= 88%
Focus on the front-end ,[object Object],[object Object],[object Object]
List of 14 best practices  (updated) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://developer.yahoo.com/performance/rules.html   content server server server server javascript javascript javascript javascript content css css css css content content
YSlow ,[object Object],[object Object],[object Object],[object Object],http://developer.yahoo.com/yslow/
 
The Life of Page 2.0 request HTML sent onload page settles conception birth graduation marriage? R.I.P. User perceived “onload” happens somewhere here user interaction, XHRs event handlers, components, XHRs request backend fetching components fetus child teen adult
After YSlow "A"? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],content javascript javascript content content content content server server css css images images images images mobile mobile cookie cookie content
Part I Review of 14 best practices  (updated)
Make Fewer HTTP Requests ,[object Object],[object Object],[object Object]
CSS Sprites background-position: -0px -0px; background-position: -20px -0px; background-position: -40px -0px; background-position: -60px -0px; background-position: -80px -0px; background-position: -100px -0px; background-position: -120px -0px; background-position: -140px -0px; background-position: -160px -0px; background-position: -180px -0px; One request instead of ten! Tools: http://www.csssprites.com http://spritegen.website-performance.org/
Use a Content Delivery Network ,[object Object],[object Object],[object Object]
Add Expires header  (or Cache-control) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Gzip Components ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Put CSS at the Top ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Move Scripts to the Bottom  (inline too) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Avoid CSS Expressions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Make JavaScript and CSS External ,[object Object],[object Object],[object Object],[object Object],[object Object]
Reduce DNS Lookups ,[object Object],[object Object],[object Object]
Minify JavaScript  and CSS (inline too) ,[object Object],[object Object],[object Object],[object Object]
Minify: before ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Minify: after (function(){var B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.env._id_counter||0;
Avoid Redirects ,[object Object],[object Object]
Remove Duplicate Scripts ,[object Object],[object Object]
Configure ETags ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Make AJAX Cacheable ,[object Object],[object Object],[object Object],[object Object]
Part II After YSlow “A”: 20 more best practices
Part II tag:  server tag:  content tag:  cookie   tag:   javascript   tag:   css   tag:   images   tag:   mobile
Flush the buffer early ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Use GET for AJAX requests ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Part II tag:  server tag:  content tag:  cookie   tag:   javascript   tag:   css   tag:   images   tag:   mobile
Post-load components ,[object Object],[object Object],[object Object],[object Object],[object Object]
Post-load components ,[object Object],[object Object],[object Object]
Preload components ,[object Object],[object Object],[object Object],[object Object],[object Object]
Preload components (contd.) ,[object Object]
Preload components (contd.) ,[object Object],[object Object],[object Object]
Reduce the number of DOM elements ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Split components across domains ,[object Object],[object Object],[object Object],[object Object],[object Object]
Split components (contd.) 2 components in parallel 8 components in parallel
Minimize the number of iframes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
No 404s ,[object Object],[object Object],[object Object],[object Object],[object Object]
No 404s (contd.) The second component is a 404 JavaScript and it blocks the rest of the page
Part II tag:  server tag:  content tag:  cookie   tag:   javascript   tag:   css   tag:   images   tag:   mobile
Reduce cookie size ,[object Object],[object Object],[object Object],[object Object]
Cookie-free hosting for components ,[object Object],[object Object],[object Object],[object Object],[object Object]
Part II tag:  server tag:  content tag:  cookie   tag:   javascript   tag:   css   tag:   images   tag:   mobile
Minimize DOM access ,[object Object],[object Object],[object Object],[object Object]
Develop smart event handlers ,[object Object],[object Object],[object Object],[object Object],[object Object]
Part II tag:  server tag:  content tag:  cookie   tag:   javascript   tag:   css   tag:   images   tag:   mobile
Choose  <link>  over  @import ,[object Object],[object Object]
Avoid filters ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Part II tag:  server tag:  content tag:  cookie   tag:   javascript   tag:   css   tag:   images   tag:   mobile
Optimize images ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Optimize images (contd.) ,[object Object],[object Object],[object Object],[object Object]
Optimize images (contd.) ,[object Object],[object Object]
Optimize CSS sprites ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Optimize sprites
Don't scale images in HTML ,[object Object],[object Object],[object Object],[object Object]
Make favicon.ico small and cacheable  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Bonus: crossdomain.xml ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Part II tag:  server tag:  content tag:  cookie   tag:   javascript   tag:   css   tag:   images   tag:   mobile
Keep components under 25K ,[object Object],[object Object],[object Object]
Pack components into a multipart document ,[object Object],[object Object]
Part II tag:  server tag:  content tag:  cookie   tag:   javascript   tag:   css   tag:   images   tag:   mobile
Tools ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
IBM Page Detailer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Firebug NET Panel ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
URLs – Exceptional Performance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
URLs (contd.) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Credits – thank you!
Take-home ,[object Object],[object Object],[object Object],[object Object]
Thank you! Merci beaucoup!

More Related Content

What's hot

What's hot (20)

20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...
20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...
20200422 AWS Black Belt Online Seminar Amazon Elastic Container Service (Amaz...
 
Amazon Web Services
Amazon Web ServicesAmazon Web Services
Amazon Web Services
 
20200219 AWS Black Belt Online Seminar オンプレミスとAWS間の冗長化接続
20200219 AWS Black Belt Online Seminar オンプレミスとAWS間の冗長化接続20200219 AWS Black Belt Online Seminar オンプレミスとAWS間の冗長化接続
20200219 AWS Black Belt Online Seminar オンプレミスとAWS間の冗長化接続
 
深入淺出 AWS 混合式雲端架構
深入淺出 AWS 混合式雲端架構 深入淺出 AWS 混合式雲端架構
深入淺出 AWS 混合式雲端架構
 
커머스 스타트업의 효율적인 데이터 분석 플랫폼 구축기 - 하지양 데이터 엔지니어, 발란 / 강웅석 데이터 엔지니어, 크로키닷컴 :: AWS...
커머스 스타트업의 효율적인 데이터 분석 플랫폼 구축기 - 하지양 데이터 엔지니어, 발란 / 강웅석 데이터 엔지니어, 크로키닷컴 :: AWS...커머스 스타트업의 효율적인 데이터 분석 플랫폼 구축기 - 하지양 데이터 엔지니어, 발란 / 강웅석 데이터 엔지니어, 크로키닷컴 :: AWS...
커머스 스타트업의 효율적인 데이터 분석 플랫폼 구축기 - 하지양 데이터 엔지니어, 발란 / 강웅석 데이터 엔지니어, 크로키닷컴 :: AWS...
 
Running Vue Storefront in production (PWA Magento webshop)
Running Vue Storefront in production (PWA Magento webshop)Running Vue Storefront in production (PWA Magento webshop)
Running Vue Storefront in production (PWA Magento webshop)
 
Amazon Container 환경의 보안 – 최인영, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집
Amazon Container 환경의 보안 – 최인영, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집Amazon Container 환경의 보안 – 최인영, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집
Amazon Container 환경의 보안 – 최인영, AWS 솔루션즈 아키텍트:: AWS 온라인 이벤트 – 클라우드 보안 특집
 
20191127 AWS Black Belt Online Seminar Amazon CloudWatch Container Insights で...
20191127 AWS Black Belt Online Seminar Amazon CloudWatch Container Insights で...20191127 AWS Black Belt Online Seminar Amazon CloudWatch Container Insights で...
20191127 AWS Black Belt Online Seminar Amazon CloudWatch Container Insights で...
 
20191126 AWS Black Belt Online Seminar Amazon AppStream 2.0
20191126 AWS Black Belt Online Seminar Amazon AppStream 2.020191126 AWS Black Belt Online Seminar Amazon AppStream 2.0
20191126 AWS Black Belt Online Seminar Amazon AppStream 2.0
 
20201111 AWS Black Belt Online Seminar AWS CodeStar & AWS CodePipeline
20201111 AWS Black Belt Online Seminar AWS CodeStar & AWS CodePipeline20201111 AWS Black Belt Online Seminar AWS CodeStar & AWS CodePipeline
20201111 AWS Black Belt Online Seminar AWS CodeStar & AWS CodePipeline
 
Aws container webinar day 2
Aws container webinar day 2Aws container webinar day 2
Aws container webinar day 2
 
EKS Workshop
 EKS Workshop EKS Workshop
EKS Workshop
 
Aws container webinar day 1
Aws container webinar day 1Aws container webinar day 1
Aws container webinar day 1
 
20200721 AWS Black Belt Online Seminar AWS App Mesh
20200721 AWS Black Belt Online Seminar AWS App Mesh20200721 AWS Black Belt Online Seminar AWS App Mesh
20200721 AWS Black Belt Online Seminar AWS App Mesh
 
Container Networking Deep Dive with Amazon ECS - CON401 - re:Invent 2017
Container Networking Deep Dive with Amazon ECS - CON401 - re:Invent 2017Container Networking Deep Dive with Amazon ECS - CON401 - re:Invent 2017
Container Networking Deep Dive with Amazon ECS - CON401 - re:Invent 2017
 
Best Practices for Implementing Your Encryption Strategy Using AWS Key Manage...
Best Practices for Implementing Your Encryption Strategy Using AWS Key Manage...Best Practices for Implementing Your Encryption Strategy Using AWS Key Manage...
Best Practices for Implementing Your Encryption Strategy Using AWS Key Manage...
 
DEV332_Using AWS to Achieve Both Autonomy and Governance at 3M
DEV332_Using AWS to Achieve Both Autonomy and Governance at 3MDEV332_Using AWS to Achieve Both Autonomy and Governance at 3M
DEV332_Using AWS to Achieve Both Autonomy and Governance at 3M
 
20200623 AWS Black Belt Online Seminar Amazon Elasticsearch Service
20200623 AWS Black Belt Online Seminar Amazon Elasticsearch Service20200623 AWS Black Belt Online Seminar Amazon Elasticsearch Service
20200623 AWS Black Belt Online Seminar Amazon Elasticsearch Service
 
20190306 AWS Black Belt Online Seminar Amazon EC2 スポットインスタンス
20190306 AWS Black Belt Online Seminar Amazon EC2 スポットインスタンス20190306 AWS Black Belt Online Seminar Amazon EC2 スポットインスタンス
20190306 AWS Black Belt Online Seminar Amazon EC2 スポットインスタンス
 
20200826 AWS Black Belt Online Seminar AWS CloudFormation
20200826 AWS Black Belt Online Seminar AWS CloudFormation 20200826 AWS Black Belt Online Seminar AWS CloudFormation
20200826 AWS Black Belt Online Seminar AWS CloudFormation
 

Viewers also liked

Sphinx: Leveraging Scalable Search in Drupal
Sphinx: Leveraging Scalable Search in DrupalSphinx: Leveraging Scalable Search in Drupal
Sphinx: Leveraging Scalable Search in Drupal
elliando dias
 
CodeFest 2014. Егоров В. — Что за… Dart?
CodeFest 2014. Егоров В. — Что за… Dart?CodeFest 2014. Егоров В. — Что за… Dart?
CodeFest 2014. Егоров В. — Что за… Dart?
CodeFest
 

Viewers also liked (20)

Sphinx: Leveraging Scalable Search in Drupal
Sphinx: Leveraging Scalable Search in DrupalSphinx: Leveraging Scalable Search in Drupal
Sphinx: Leveraging Scalable Search in Drupal
 
Not Only Drupal
Not Only DrupalNot Only Drupal
Not Only Drupal
 
Basic Crud In Django
Basic Crud In DjangoBasic Crud In Django
Basic Crud In Django
 
Post css - Getting start with PostCSS
Post css - Getting start with PostCSSPost css - Getting start with PostCSS
Post css - Getting start with PostCSS
 
HTML&CSS 6 - Advanced CSS
HTML&CSS 6 - Advanced CSSHTML&CSS 6 - Advanced CSS
HTML&CSS 6 - Advanced CSS
 
CSS Layout
CSS LayoutCSS Layout
CSS Layout
 
MetaZeta Clusters Overview
MetaZeta Clusters OverviewMetaZeta Clusters Overview
MetaZeta Clusters Overview
 
Css position
Css positionCss position
Css position
 
CodeFest 2014. Егоров В. — Что за… Dart?
CodeFest 2014. Егоров В. — Что за… Dart?CodeFest 2014. Егоров В. — Что за… Dart?
CodeFest 2014. Егоров В. — Что за… Dart?
 
Computational genomics approaches to precision medicine
Computational genomics approaches to precision medicineComputational genomics approaches to precision medicine
Computational genomics approaches to precision medicine
 
Computational genomics course poster 2015 (BIMSB/MDC-Berlin)
Computational genomics course poster 2015 (BIMSB/MDC-Berlin)Computational genomics course poster 2015 (BIMSB/MDC-Berlin)
Computational genomics course poster 2015 (BIMSB/MDC-Berlin)
 
Css positioning
Css positioningCss positioning
Css positioning
 
Danger Of Free
Danger Of FreeDanger Of Free
Danger Of Free
 
Collaborative Filtering and Recommender Systems By Navisro Analytics
Collaborative Filtering and Recommender Systems By Navisro AnalyticsCollaborative Filtering and Recommender Systems By Navisro Analytics
Collaborative Filtering and Recommender Systems By Navisro Analytics
 
CSS Layouting #5 : Position
CSS Layouting #5 : PositionCSS Layouting #5 : Position
CSS Layouting #5 : Position
 
The Physics of Fast Image Compression
The Physics of Fast Image CompressionThe Physics of Fast Image Compression
The Physics of Fast Image Compression
 
Apache Mesos at Twitter (Texas LinuxFest 2014)
Apache Mesos at Twitter (Texas LinuxFest 2014)Apache Mesos at Twitter (Texas LinuxFest 2014)
Apache Mesos at Twitter (Texas LinuxFest 2014)
 
Keynote: Apache HBase at Yahoo! Scale
Keynote: Apache HBase at Yahoo! ScaleKeynote: Apache HBase at Yahoo! Scale
Keynote: Apache HBase at Yahoo! Scale
 
An Abusive Relationship with AngularJS
An Abusive Relationship with AngularJSAn Abusive Relationship with AngularJS
An Abusive Relationship with AngularJS
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 

Similar to High Performance Web Pages - 20 new best practices

Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
Ashok Modi
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahoo
guestb1b95b
 
Tuning web performance
Tuning web performanceTuning web performance
Tuning web performance
George Ang
 
Tuning Web Performance
Tuning Web PerformanceTuning Web Performance
Tuning Web Performance
Eric ShangKuan
 
Enhance Web Performance
Enhance Web PerformanceEnhance Web Performance
Enhance Web Performance
Adam Lu
 
Fast and Easy Website Tuneups
Fast and Easy Website TuneupsFast and Easy Website Tuneups
Fast and Easy Website Tuneups
Jeff Wisniewski
 

Similar to High Performance Web Pages - 20 new best practices (20)

Frontend performance
Frontend performanceFrontend performance
Frontend performance
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
 
WordCamp Denmark Keynote
WordCamp Denmark KeynoteWordCamp Denmark Keynote
WordCamp Denmark Keynote
 
High-Speed HTML5
High-Speed HTML5High-Speed HTML5
High-Speed HTML5
 
Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahoo
 
Client Side Performance @ Xero
Client Side Performance @ XeroClient Side Performance @ Xero
Client Side Performance @ Xero
 
Speed!
Speed!Speed!
Speed!
 
Web Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Web Performance, Scalability, and Testing Techniques - Boston PHP MeetupWeb Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Web Performance, Scalability, and Testing Techniques - Boston PHP Meetup
 
Html5
Html5Html5
Html5
 
A Holistic View of Website Performance
A Holistic View of Website PerformanceA Holistic View of Website Performance
A Holistic View of Website Performance
 
Tuning web performance
Tuning web performanceTuning web performance
Tuning web performance
 
Tuning Web Performance
Tuning Web PerformanceTuning Web Performance
Tuning Web Performance
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 
Going on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web PerformanceGoing on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web Performance
 
Front-end performances
Front-end performancesFront-end performances
Front-end performances
 
Enhance Web Performance
Enhance Web PerformanceEnhance Web Performance
Enhance Web Performance
 
Fast and Easy Website Tuneups
Fast and Easy Website TuneupsFast and Easy Website Tuneups
Fast and Easy Website Tuneups
 
improve website performance
improve website performanceimprove website performance
improve website performance
 
Client Side Optimization
Client Side OptimizationClient Side Optimization
Client Side Optimization
 

More from Stoyan Stefanov

JavaScript shell scripting
JavaScript shell scriptingJavaScript shell scripting
JavaScript shell scripting
Stoyan Stefanov
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
Stoyan Stefanov
 

More from Stoyan Stefanov (20)

Reactive JavaScript
Reactive JavaScriptReactive JavaScript
Reactive JavaScript
 
YSlow hacking
YSlow hackingYSlow hacking
YSlow hacking
 
Liking performance
Liking performanceLiking performance
Liking performance
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance Patterns
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patterns
 
High Performance Social Plugins
High Performance Social PluginsHigh Performance Social Plugins
High Performance Social Plugins
 
Social Button BFFs
Social Button BFFsSocial Button BFFs
Social Button BFFs
 
JavaScript навсякъде
JavaScript навсякъдеJavaScript навсякъде
JavaScript навсякъде
 
JavaScript is everywhere
JavaScript is everywhereJavaScript is everywhere
JavaScript is everywhere
 
JavaScript shell scripting
JavaScript shell scriptingJavaScript shell scripting
JavaScript shell scripting
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
 
WPO @ PubCon 2010
WPO @ PubCon 2010WPO @ PubCon 2010
WPO @ PubCon 2010
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
 
Performance patterns
Performance patternsPerformance patterns
Performance patterns
 
Voices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesVoices that matter: High Performance Web Sites
Voices that matter: High Performance Web Sites
 
Psychology of performance
Psychology of performancePsychology of performance
Psychology of performance
 
3-in-1 YSlow
3-in-1 YSlow3-in-1 YSlow
3-in-1 YSlow
 
CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimization
 
High-performance DOM scripting
High-performance DOM scriptingHigh-performance DOM scripting
High-performance DOM scripting
 

Recently uploaded

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Recently uploaded (20)

GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 

High Performance Web Pages - 20 new best practices

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.  
  • 6. The Importance of Front-End Performance Back-end= 5% Front-end= 95% Even here, front-end= 88%
  • 7.
  • 8.
  • 9.
  • 10.  
  • 11. The Life of Page 2.0 request HTML sent onload page settles conception birth graduation marriage? R.I.P. User perceived “onload” happens somewhere here user interaction, XHRs event handlers, components, XHRs request backend fetching components fetus child teen adult
  • 12.
  • 13. Part I Review of 14 best practices (updated)
  • 14.
  • 15. CSS Sprites background-position: -0px -0px; background-position: -20px -0px; background-position: -40px -0px; background-position: -60px -0px; background-position: -80px -0px; background-position: -100px -0px; background-position: -120px -0px; background-position: -140px -0px; background-position: -160px -0px; background-position: -180px -0px; One request instead of ten! Tools: http://www.csssprites.com http://spritegen.website-performance.org/
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26. Minify: after (function(){var B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.env._id_counter||0;
  • 27.
  • 28.
  • 29.
  • 30.
  • 31. Part II After YSlow “A”: 20 more best practices
  • 32. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile
  • 33.
  • 34.
  • 35. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43. Split components (contd.) 2 components in parallel 8 components in parallel
  • 44.
  • 45.
  • 46. No 404s (contd.) The second component is a 404 JavaScript and it blocks the rest of the page
  • 47. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile
  • 48.
  • 49.
  • 50. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile
  • 51.
  • 52.
  • 53. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile
  • 54.
  • 55.
  • 56. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile
  • 57.
  • 58.
  • 59.
  • 60.
  • 62.
  • 63.
  • 64.
  • 65. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile
  • 66.
  • 67.
  • 68. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 75.
  • 76. Thank you! Merci beaucoup!