SlideShare a Scribd company logo
Front
    End
Performance
          Konstantin
          Käfer
Render a usable version
      as early as possible.



3                             Konstantin Käfer
Firebug’s Net panel




4                         Konstantin Käfer
Waterfall graphs
              ‣   Visualizes load order
              ‣   Rules
                  – descend as fast as possible
                  – as shallow as possible
                  – as narrow as possible




5                                             Konstantin Käfer
YSlow
    ‣   Rates a webpage based on 13 criteria
    ‣   Determines overall load time
    ‣   Provides optimization suggestions
    ‣   Graphs, Numbers & Figures




6                                              Konstantin Käfer
YSlow




7           Konstantin Käfer
YSlow is not everything.



8                              Konstantin Käfer
Webpage Test
    ‣   Automated measurement using IE
    ‣   Shows when rendering starts
    ‣   Connection view:




        – http://webpagetest.org or local installation
9                                                        Konstantin Käfer
Other tools
     ‣   IBM Page Detailer
         http://www.alphaworks.ibm.com/tech/pagedetailer
     ‣   Pingdom
         http://tools.pingdom.com
     ‣   Episodes
         http://drupal.org/project/episodes
     ‣   Safari’s Web Inspector (Safari 4 and up)
     ‣   Web Debugging Proxies
         http://charlesproxy.com, http://fiddlertool.com
10                                                         Konstantin Käfer
Waterfall diagrams




     Start   Connect   First byte   Last byte
11                                     Konstantin Käfer
1. Reduce requests
     ‣   Every file produces an HTTP request
          60s

          45s

          30s                              Requests
                                           Size (KB)
          15s

           0s
                0   10     20     30


     ‣   Fewer requests is better than smaller size
     ‣   HTTP 1.1: 2 components per host in parallel
12                                                     Konstantin Käfer
1. Reduce requests
     ‣   Sprites
         – Many images into one file
         – Shift into view with background-position
     ‣   Aggregate scripts and styles
         – Built into Drupal
         – Sophisticated: http://drupal.org/project/sf_cache
     ‣   No redirects

13                                                             Konstantin Käfer
1. Reduce requests
     ‣   Caching (see 3.)
     ‣   Use CSS instead of images
             -moz-border-radius:4px;
             -webkit-border-radius: 4px;
             border-radius: 4px;

     ‣   data: URLs in style sheets
         –    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAGXRFWHRTb2Z
             0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAR9JREFUeNrEk02ORUAUhRVNJEgYsgdGbIHFsSGmhhjZAzFCR
             CLx906io3UROu8N+g7vPR9V95wi67oy79bXuTXP8zAMfdP48jzvCRJoihyHPcA4xRd1+V5HoZhmqZ1XWuaZ
             tu267qWZSmKQghhKGCrZVmqqgqCQNd16g/ooI8pNOuhfuC2bX3fFwTh8nroYwrNBTxNUxzHhmHcrAf/hwb
             KHWa3ATYURVFRFDdwWZbYBZR75xvGbpMkefQmyzIoaRiuNE3zCGP/UNIw/FRV9RGGBkoaRhLg5yPsOA6U
             tM/vbfuXz0jCjc+YXvu8JwxJOCcMJ9oShtgfYXJ8VedsY0O4p+d5pmnKssyy7PGj5Pwk//6qyCfvmWU+qP+DXw
             IMADReKA+zC0X8AAAAAElFTkSuQmCC);



14                                                                                         Konstantin Käfer
1. Reduce requests
     ‣   Data URLs in Internet Explorer < 8:
         – MHTML: http://www.phpied.com/mhtml-when-you-
           need-data-uris-in-ie7-and-under/
         – Include encoded images as Multipart HTML
         – url(mhtml:http://example.com/style.css!somestring);


         – Not a proven technology (fails on certain configs)




15                                                               Konstantin Käfer
2. Use a CDN
     ‣   Content Delivery Network
     ‣   Place servers near users to reduce ping time
     ‣   More on that in a bit




16                                                  Konstantin Käfer
3. Caching
                             ?
     Disabled:     Client                    Server
                    Cache

                                        Full response
                             ?
      Default:     Client                    Server
                            “Still fresh”
                    Cache
                                      Partial response

     Aggressive:   Client                    Server
                    Cache
17                                                Konstantin Käfer
3. Caching
     ‣   Controlled by HTTP headers
     ‣   Browsers check whether content is fresh
     ‣   Set Expires header to a date in the far future
         – <Location /css>
           	 ExpiresActive On
           	 ExpiresDefault "access plus 1 year"
           </Location>


     ‣   Drupal default: 2 weeks
     ‣   Change filenames/URLs when updating

18                                                   Konstantin Käfer
4. GZip
     ‣   Compress text content (don’t use for images!)
         – <IfModule mod_deflate.c>
           	 AddOutputFilterByType DEFLATE text/css application/x-javascript
           </IfModule>


     ‣   Vastly reduces page size (often halfs)
     ‣   Compress scripts and styles as well




19                                                                   Konstantin Käfer
5. CSS to the top
     ‣   == in <head>
     ‣   Page renders when all header CSS is loaded
     ‣   Loading CSS later causes re-rendering and
         Flash of Unstyled Content
     ‣   Use <link> instead of @import
         http://www.stevesouders.com/blog/2009/04/09/dont-use-import/




20                                                                      Konstantin Käfer
21                                               Konstantin Käfer




     ‣   == right before </body>
     ‣   Loading scripts blocks page rendering
     ‣   Scripts are loaded sequentially!
         (At least in most current browsers)

     ‣   Don’t use onfoo handlers in HTML code
     ‣   Graceful degradation


     6. Scripts to the bottom
7. Minify CSS and JS
     ‣   Remove comments and whitespace
     ‣   Still savings, even with GZip
     ‣   Drupal’s aggregator or sf_cache.module




22                                                Konstantin Käfer
8. Parallelization
     ‣   “A single-user client SHOULD NOT maintain
         more than 2 connections with any server
         or proxy.” (RFC 2616, 8.1.4)
     ‣   Use multiple host names ➔ higher
         parallelization
         (Don’t overdo it)
     ‣   Most current browsers use > 2 connections
     ‣   http://stevesouders.com/ua/


23                                                   Konstantin Käfer
8. Parallelization
     ‣   Ensure proper distribution
     ‣   Webpage Test graphs:




24                                    Konstantin Käfer
9. Reduce image weight
     ‣   OptiPNG, PNGCrush, ...
         – Removes invisible content by lossless recompression

     ‣   JPEGtran/ImageMagick: Lossless JPEG operations
         – Remove color profiles, meta data, …
     ‣   ImageOptim: Batch compression
     ‣   smushit.com – now integrated into YSlow
     ‣   punypng.com – supposedly more efficient

25                                                        Konstantin Käfer
10. Lazy initialization
     ‣   JavaScript takes time to initialize
         – Libraries such as jQuery also count
         – Defer setup work
     ‣   Only load content above the fold
         – jQuery plugin: http://bit.ly/NpZPn
         – Useful on image-heavy sites
     ‣   Don’t load invisible content (tabs) on page load

26                                                   Konstantin Käfer
11. Other optimizations
     ‣   “Premature optimization is the root of all evil”
                                                    —Donald Knuth

     ‣   Only if you have optimized everything else

     ‣   Strategies
         – Move components to cookieless host
         – Remove ETags
         – Load order (see http://stevesouders.com/cuzillion/)


27                                                           Konstantin Käfer
Render a usable version
       as early as possible.


           Konstantin Käfer
          mail@kkaefer.com — @kkaefer

28                                      Konstantin Käfer
Resources
     – High Performance Websites, Steve Souders, 2007.
     – http://stevesouders.com/examples/rules.php
     – http://developer.yahoo.com/performance/
     – http://yuiblog.com/blog/category/performance
     – http://sites.google.com/site/io/even-faster-web-sites
     – http://slideshare.net/jeresig/performance-improvements-
       in-browsers
     – http://www.stevesouders.com/blog/2009/04/09/dont-
       use-import/
29                                                             Konstantin Käfer

More Related Content

What's hot

Use Xdebug to profile PHP
Use Xdebug to profile PHPUse Xdebug to profile PHP
Use Xdebug to profile PHP
Seravo
 
Pagespeed what, why, and how it works
Pagespeed   what, why, and how it worksPagespeed   what, why, and how it works
Pagespeed what, why, and how it works
Ilya Grigorik
 
A web perf dashboard up & running in 90 minutes presentation
A web perf dashboard up & running in 90 minutes presentationA web perf dashboard up & running in 90 minutes presentation
A web perf dashboard up & running in 90 minutes presentation
Justin Dorfman
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
Marcelio Leal
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
MeetMagentoNY2014
 
BaláZs Ree Introduction To Kss, Kinetic Style Sheets
BaláZs Ree   Introduction To Kss, Kinetic Style SheetsBaláZs Ree   Introduction To Kss, Kinetic Style Sheets
BaláZs Ree Introduction To Kss, Kinetic Style Sheets
Vincenzo Barone
 
YSlow 2.0
YSlow 2.0YSlow 2.0
YSlow 2.0
Stoyan Stefanov
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
Remy Sharp
 
How to investigate and recover from a security breach in WordPress
How to investigate and recover from a security breach in WordPressHow to investigate and recover from a security breach in WordPress
How to investigate and recover from a security breach in WordPress
Otto Kekäläinen
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
Ronald Huereca
 
Nodejs.meetup
Nodejs.meetupNodejs.meetup
Nodejs.meetup
Vivian S. Zhang
 
Liking performance
Liking performanceLiking performance
Liking performance
Stoyan Stefanov
 
Building an HTML5 Video Player
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video Player
Jim Jeffers
 
AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...
AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...
AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...
panagenda
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Leonardo Balter
 
Administer WordPress with WP-CLI
Administer WordPress with WP-CLIAdminister WordPress with WP-CLI
Administer WordPress with WP-CLI
Suwash Kunwar
 
Scaling Drupal: Not IF... HOW
Scaling Drupal: Not IF... HOWScaling Drupal: Not IF... HOW
Scaling Drupal: Not IF... HOW
Treehouse Agency
 
Web Page Test - Beyond the Basics
Web Page Test - Beyond the BasicsWeb Page Test - Beyond the Basics
Web Page Test - Beyond the Basics
Andy Davies
 
Os Pruett
Os PruettOs Pruett
Os Pruett
oscon2007
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
dynamis
 

What's hot (20)

Use Xdebug to profile PHP
Use Xdebug to profile PHPUse Xdebug to profile PHP
Use Xdebug to profile PHP
 
Pagespeed what, why, and how it works
Pagespeed   what, why, and how it worksPagespeed   what, why, and how it works
Pagespeed what, why, and how it works
 
A web perf dashboard up & running in 90 minutes presentation
A web perf dashboard up & running in 90 minutes presentationA web perf dashboard up & running in 90 minutes presentation
A web perf dashboard up & running in 90 minutes presentation
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
 
BaláZs Ree Introduction To Kss, Kinetic Style Sheets
BaláZs Ree   Introduction To Kss, Kinetic Style SheetsBaláZs Ree   Introduction To Kss, Kinetic Style Sheets
BaláZs Ree Introduction To Kss, Kinetic Style Sheets
 
YSlow 2.0
YSlow 2.0YSlow 2.0
YSlow 2.0
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
 
How to investigate and recover from a security breach in WordPress
How to investigate and recover from a security breach in WordPressHow to investigate and recover from a security breach in WordPress
How to investigate and recover from a security breach in WordPress
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
 
Nodejs.meetup
Nodejs.meetupNodejs.meetup
Nodejs.meetup
 
Liking performance
Liking performanceLiking performance
Liking performance
 
Building an HTML5 Video Player
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video Player
 
AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...
AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...
AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
 
Administer WordPress with WP-CLI
Administer WordPress with WP-CLIAdminister WordPress with WP-CLI
Administer WordPress with WP-CLI
 
Scaling Drupal: Not IF... HOW
Scaling Drupal: Not IF... HOWScaling Drupal: Not IF... HOW
Scaling Drupal: Not IF... HOW
 
Web Page Test - Beyond the Basics
Web Page Test - Beyond the BasicsWeb Page Test - Beyond the Basics
Web Page Test - Beyond the Basics
 
Os Pruett
Os PruettOs Pruett
Os Pruett
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
 

Viewers also liked

Developing JavaScript Widgets
Developing JavaScript WidgetsDeveloping JavaScript Widgets
Developing JavaScript Widgets
Konstantin Käfer
 
Front End Performance
Front End PerformanceFront End Performance
Front End Performance
Konstantin Käfer
 
Instant Dynamic Forms with #states
Instant Dynamic Forms with #statesInstant Dynamic Forms with #states
Instant Dynamic Forms with #states
Konstantin Käfer
 
Front End Performance
Front End PerformanceFront End Performance
Front End Performance
Konstantin Käfer
 
Stats stif-transports-idf-janvier-2016-2
Stats stif-transports-idf-janvier-2016-2Stats stif-transports-idf-janvier-2016-2
Stats stif-transports-idf-janvier-2016-2
Quoimaligne Idf
 
git
gitgit
Web performance tuning
Web performance tuning Web performance tuning
Web performance tuning
Sendhil Kumar Kannan
 
Building a High Performance WordPress Environment - WordCamp NYC 2010
Building a High Performance WordPress Environment - WordCamp NYC 2010Building a High Performance WordPress Environment - WordCamp NYC 2010
Building a High Performance WordPress Environment - WordCamp NYC 2010
Matt Martz
 
London Web Performance Meetup: Performance for mortal companies
London Web Performance Meetup: Performance for mortal companiesLondon Web Performance Meetup: Performance for mortal companies
London Web Performance Meetup: Performance for mortal companies
Strangeloop
 
AngularJS Anatomy & Directives
AngularJS Anatomy & DirectivesAngularJS Anatomy & Directives
AngularJS Anatomy & Directives
Digikrit
 
Bootstrap with liferay
Bootstrap with liferayBootstrap with liferay
Bootstrap with liferay
Sendhil Kumar Kannan
 

Viewers also liked (11)

Developing JavaScript Widgets
Developing JavaScript WidgetsDeveloping JavaScript Widgets
Developing JavaScript Widgets
 
Front End Performance
Front End PerformanceFront End Performance
Front End Performance
 
Instant Dynamic Forms with #states
Instant Dynamic Forms with #statesInstant Dynamic Forms with #states
Instant Dynamic Forms with #states
 
Front End Performance
Front End PerformanceFront End Performance
Front End Performance
 
Stats stif-transports-idf-janvier-2016-2
Stats stif-transports-idf-janvier-2016-2Stats stif-transports-idf-janvier-2016-2
Stats stif-transports-idf-janvier-2016-2
 
git
gitgit
git
 
Web performance tuning
Web performance tuning Web performance tuning
Web performance tuning
 
Building a High Performance WordPress Environment - WordCamp NYC 2010
Building a High Performance WordPress Environment - WordCamp NYC 2010Building a High Performance WordPress Environment - WordCamp NYC 2010
Building a High Performance WordPress Environment - WordCamp NYC 2010
 
London Web Performance Meetup: Performance for mortal companies
London Web Performance Meetup: Performance for mortal companiesLondon Web Performance Meetup: Performance for mortal companies
London Web Performance Meetup: Performance for mortal companies
 
AngularJS Anatomy & Directives
AngularJS Anatomy & DirectivesAngularJS Anatomy & Directives
AngularJS Anatomy & Directives
 
Bootstrap with liferay
Bootstrap with liferayBootstrap with liferay
Bootstrap with liferay
 

Similar to Front End Performance

What's New in Web Development
What's New in Web DevelopmentWhat's New in Web Development
What's New in Web Development
Konstantin Käfer
 
From One to a Cluster
From One to a ClusterFrom One to a Cluster
From One to a Cluster
guestd34230
 
WordCamp RVA 2011 - Performance & Tuning.pdf
WordCamp RVA 2011 - Performance & Tuning.pdfWordCamp RVA 2011 - Performance & Tuning.pdf
WordCamp RVA 2011 - Performance & Tuning.pdf
codearachnid_test
 
WordCamp RVA
WordCamp RVAWordCamp RVA
WordCamp RVA
codearachnid_test
 
WordCamp RVA 2011 - Performance & Tuning.pdf
WordCamp RVA 2011 - Performance & Tuning.pdfWordCamp RVA 2011 - Performance & Tuning.pdf
WordCamp RVA 2011 - Performance & Tuning.pdf
codearachnid_test
 
WordCamp RVA
WordCamp RVAWordCamp RVA
WordCamp RVA
codearachnid_test
 
Performance Improvements in Browsers
Performance Improvements in BrowsersPerformance Improvements in Browsers
Performance Improvements in Browsers
jeresig
 
WordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & TuningWordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & Tuning
Timothy Wood
 
Capistrano
CapistranoCapistrano
Capistrano
Kenneth Kalmer
 
High performance website
High performance websiteHigh performance website
High performance website
Chamnap Chhorn
 
#Webperf Choreography
#Webperf Choreography#Webperf Choreography
#Webperf Choreography
Harald Kirschner
 
Magee Dday2 Fixing App Performance Italiano
Magee Dday2 Fixing App Performance ItalianoMagee Dday2 Fixing App Performance Italiano
Magee Dday2 Fixing App Performance Italiano
Dominopoint - Italian Lotus User Group
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
WordPress
 
Web Performance Part 3 "Server-side tips"
Web Performance Part 3  "Server-side tips"Web Performance Part 3  "Server-side tips"
Web Performance Part 3 "Server-side tips"
Binary Studio
 
Performance Improvements in Browsers
Performance Improvements in BrowsersPerformance Improvements in Browsers
Performance Improvements in Browsers
jeresig
 
Performance Improvements In Browsers
Performance Improvements In BrowsersPerformance Improvements In Browsers
Performance Improvements In Browsers
GoogleTecTalks
 
Rails Conf Europe 2007 - Utilizing Amazon S3 and EC2 in Rails
Rails Conf Europe 2007 - Utilizing Amazon S3 and EC2 in RailsRails Conf Europe 2007 - Utilizing Amazon S3 and EC2 in Rails
Rails Conf Europe 2007 - Utilizing Amazon S3 and EC2 in Rails
Jonathan Weiss
 
re7jweiss
re7jweissre7jweiss
re7jweiss
guest6850dd
 
Server-Side JavaScript with jQuery and AOLserver
Server-Side JavaScript with jQuery and AOLserverServer-Side JavaScript with jQuery and AOLserver
Server-Side JavaScript with jQuery and AOLserver
Dossy Shiobara
 
Web Optimization Level: Paranoid
Web Optimization Level: ParanoidWeb Optimization Level: Paranoid
Web Optimization Level: Paranoid
robin_sy
 

Similar to Front End Performance (20)

What's New in Web Development
What's New in Web DevelopmentWhat's New in Web Development
What's New in Web Development
 
From One to a Cluster
From One to a ClusterFrom One to a Cluster
From One to a Cluster
 
WordCamp RVA 2011 - Performance & Tuning.pdf
WordCamp RVA 2011 - Performance & Tuning.pdfWordCamp RVA 2011 - Performance & Tuning.pdf
WordCamp RVA 2011 - Performance & Tuning.pdf
 
WordCamp RVA
WordCamp RVAWordCamp RVA
WordCamp RVA
 
WordCamp RVA 2011 - Performance & Tuning.pdf
WordCamp RVA 2011 - Performance & Tuning.pdfWordCamp RVA 2011 - Performance & Tuning.pdf
WordCamp RVA 2011 - Performance & Tuning.pdf
 
WordCamp RVA
WordCamp RVAWordCamp RVA
WordCamp RVA
 
Performance Improvements in Browsers
Performance Improvements in BrowsersPerformance Improvements in Browsers
Performance Improvements in Browsers
 
WordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & TuningWordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & Tuning
 
Capistrano
CapistranoCapistrano
Capistrano
 
High performance website
High performance websiteHigh performance website
High performance website
 
#Webperf Choreography
#Webperf Choreography#Webperf Choreography
#Webperf Choreography
 
Magee Dday2 Fixing App Performance Italiano
Magee Dday2 Fixing App Performance ItalianoMagee Dday2 Fixing App Performance Italiano
Magee Dday2 Fixing App Performance Italiano
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
 
Web Performance Part 3 "Server-side tips"
Web Performance Part 3  "Server-side tips"Web Performance Part 3  "Server-side tips"
Web Performance Part 3 "Server-side tips"
 
Performance Improvements in Browsers
Performance Improvements in BrowsersPerformance Improvements in Browsers
Performance Improvements in Browsers
 
Performance Improvements In Browsers
Performance Improvements In BrowsersPerformance Improvements In Browsers
Performance Improvements In Browsers
 
Rails Conf Europe 2007 - Utilizing Amazon S3 and EC2 in Rails
Rails Conf Europe 2007 - Utilizing Amazon S3 and EC2 in RailsRails Conf Europe 2007 - Utilizing Amazon S3 and EC2 in Rails
Rails Conf Europe 2007 - Utilizing Amazon S3 and EC2 in Rails
 
re7jweiss
re7jweissre7jweiss
re7jweiss
 
Server-Side JavaScript with jQuery and AOLserver
Server-Side JavaScript with jQuery and AOLserverServer-Side JavaScript with jQuery and AOLserver
Server-Side JavaScript with jQuery and AOLserver
 
Web Optimization Level: Paranoid
Web Optimization Level: ParanoidWeb Optimization Level: Paranoid
Web Optimization Level: Paranoid
 

Recently uploaded

Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Vladimir Iglovikov, Ph.D.
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
Rohit Gautam
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...
ThomasParaiso2
 

Recently uploaded (20)

Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...
 

Front End Performance

  • 1. Front End Performance Konstantin Käfer
  • 2.
  • 3. Render a usable version as early as possible. 3 Konstantin Käfer
  • 4. Firebug’s Net panel 4 Konstantin Käfer
  • 5. Waterfall graphs ‣ Visualizes load order ‣ Rules – descend as fast as possible – as shallow as possible – as narrow as possible 5 Konstantin Käfer
  • 6. YSlow ‣ Rates a webpage based on 13 criteria ‣ Determines overall load time ‣ Provides optimization suggestions ‣ Graphs, Numbers & Figures 6 Konstantin Käfer
  • 7. YSlow 7 Konstantin Käfer
  • 8. YSlow is not everything. 8 Konstantin Käfer
  • 9. Webpage Test ‣ Automated measurement using IE ‣ Shows when rendering starts ‣ Connection view: – http://webpagetest.org or local installation 9 Konstantin Käfer
  • 10. Other tools ‣ IBM Page Detailer http://www.alphaworks.ibm.com/tech/pagedetailer ‣ Pingdom http://tools.pingdom.com ‣ Episodes http://drupal.org/project/episodes ‣ Safari’s Web Inspector (Safari 4 and up) ‣ Web Debugging Proxies http://charlesproxy.com, http://fiddlertool.com 10 Konstantin Käfer
  • 11. Waterfall diagrams Start Connect First byte Last byte 11 Konstantin Käfer
  • 12. 1. Reduce requests ‣ Every file produces an HTTP request 60s 45s 30s Requests Size (KB) 15s 0s 0 10 20 30 ‣ Fewer requests is better than smaller size ‣ HTTP 1.1: 2 components per host in parallel 12 Konstantin Käfer
  • 13. 1. Reduce requests ‣ Sprites – Many images into one file – Shift into view with background-position ‣ Aggregate scripts and styles – Built into Drupal – Sophisticated: http://drupal.org/project/sf_cache ‣ No redirects 13 Konstantin Käfer
  • 14. 1. Reduce requests ‣ Caching (see 3.) ‣ Use CSS instead of images -moz-border-radius:4px; -webkit-border-radius: 4px; border-radius: 4px; ‣ data: URLs in style sheets – url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAGXRFWHRTb2Z 0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAR9JREFUeNrEk02ORUAUhRVNJEgYsgdGbIHFsSGmhhjZAzFCR CLx906io3UROu8N+g7vPR9V95wi67oy79bXuTXP8zAMfdP48jzvCRJoihyHPcA4xRd1+V5HoZhmqZ1XWuaZ tu267qWZSmKQghhKGCrZVmqqgqCQNd16g/ooI8pNOuhfuC2bX3fFwTh8nroYwrNBTxNUxzHhmHcrAf/hwb KHWa3ATYURVFRFDdwWZbYBZR75xvGbpMkefQmyzIoaRiuNE3zCGP/UNIw/FRV9RGGBkoaRhLg5yPsOA6U tM/vbfuXz0jCjc+YXvu8JwxJOCcMJ9oShtgfYXJ8VedsY0O4p+d5pmnKssyy7PGj5Pwk//6qyCfvmWU+qP+DXw IMADReKA+zC0X8AAAAAElFTkSuQmCC); 14 Konstantin Käfer
  • 15. 1. Reduce requests ‣ Data URLs in Internet Explorer < 8: – MHTML: http://www.phpied.com/mhtml-when-you- need-data-uris-in-ie7-and-under/ – Include encoded images as Multipart HTML – url(mhtml:http://example.com/style.css!somestring); – Not a proven technology (fails on certain configs) 15 Konstantin Käfer
  • 16. 2. Use a CDN ‣ Content Delivery Network ‣ Place servers near users to reduce ping time ‣ More on that in a bit 16 Konstantin Käfer
  • 17. 3. Caching ? Disabled: Client Server Cache Full response ? Default: Client Server “Still fresh” Cache Partial response Aggressive: Client Server Cache 17 Konstantin Käfer
  • 18. 3. Caching ‣ Controlled by HTTP headers ‣ Browsers check whether content is fresh ‣ Set Expires header to a date in the far future – <Location /css> ExpiresActive On ExpiresDefault "access plus 1 year" </Location> ‣ Drupal default: 2 weeks ‣ Change filenames/URLs when updating 18 Konstantin Käfer
  • 19. 4. GZip ‣ Compress text content (don’t use for images!) – <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/css application/x-javascript </IfModule> ‣ Vastly reduces page size (often halfs) ‣ Compress scripts and styles as well 19 Konstantin Käfer
  • 20. 5. CSS to the top ‣ == in <head> ‣ Page renders when all header CSS is loaded ‣ Loading CSS later causes re-rendering and Flash of Unstyled Content ‣ Use <link> instead of @import http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ 20 Konstantin Käfer
  • 21. 21 Konstantin Käfer ‣ == right before </body> ‣ Loading scripts blocks page rendering ‣ Scripts are loaded sequentially! (At least in most current browsers) ‣ Don’t use onfoo handlers in HTML code ‣ Graceful degradation 6. Scripts to the bottom
  • 22. 7. Minify CSS and JS ‣ Remove comments and whitespace ‣ Still savings, even with GZip ‣ Drupal’s aggregator or sf_cache.module 22 Konstantin Käfer
  • 23. 8. Parallelization ‣ “A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.” (RFC 2616, 8.1.4) ‣ Use multiple host names ➔ higher parallelization (Don’t overdo it) ‣ Most current browsers use > 2 connections ‣ http://stevesouders.com/ua/ 23 Konstantin Käfer
  • 24. 8. Parallelization ‣ Ensure proper distribution ‣ Webpage Test graphs: 24 Konstantin Käfer
  • 25. 9. Reduce image weight ‣ OptiPNG, PNGCrush, ... – Removes invisible content by lossless recompression ‣ JPEGtran/ImageMagick: Lossless JPEG operations – Remove color profiles, meta data, … ‣ ImageOptim: Batch compression ‣ smushit.com – now integrated into YSlow ‣ punypng.com – supposedly more efficient 25 Konstantin Käfer
  • 26. 10. Lazy initialization ‣ JavaScript takes time to initialize – Libraries such as jQuery also count – Defer setup work ‣ Only load content above the fold – jQuery plugin: http://bit.ly/NpZPn – Useful on image-heavy sites ‣ Don’t load invisible content (tabs) on page load 26 Konstantin Käfer
  • 27. 11. Other optimizations ‣ “Premature optimization is the root of all evil” —Donald Knuth ‣ Only if you have optimized everything else ‣ Strategies – Move components to cookieless host – Remove ETags – Load order (see http://stevesouders.com/cuzillion/) 27 Konstantin Käfer
  • 28. Render a usable version as early as possible. Konstantin Käfer mail@kkaefer.com — @kkaefer 28 Konstantin Käfer
  • 29. Resources – High Performance Websites, Steve Souders, 2007. – http://stevesouders.com/examples/rules.php – http://developer.yahoo.com/performance/ – http://yuiblog.com/blog/category/performance – http://sites.google.com/site/io/even-faster-web-sites – http://slideshare.net/jeresig/performance-improvements- in-browsers – http://www.stevesouders.com/blog/2009/04/09/dont- use-import/ 29 Konstantin Käfer