SlideShare a Scribd company logo
Front
   End
Performance
              Konstantin
              Käfer
What’s Performance?


                  Loading


     Perception             Measurement


                   Using


2                                     Konstantin Käfer
Styles, scripts and images
            account for
     over 80% of load time.


3                          Konstantin Käfer
Back-             Other
    grounds   Images   Media



     HTML      CSS     Scripts




4                                Konstantin Käfer

Recommended for you

Nginx - Tips and Tricks.
Nginx - Tips and Tricks.Nginx - Tips and Tricks.
Nginx - Tips and Tricks.

Nginx is a lightweight web server that was created in 2002 to address the C10K problem of scaling to 10,000 concurrent connections. It uses an asynchronous event-driven architecture that uses less memory and CPU than traditional multi-threaded models. Key features include acting as a reverse proxy, load balancer, HTTP cache, and web server. Nginx has grown in popularity due to its high performance, low memory usage, simple configuration, and rich feature set including modules for streaming, caching, and dynamic content.

nginxapachescalability
Learn nginx in 90mins
Learn nginx in 90minsLearn nginx in 90mins
Learn nginx in 90mins

This document outlines an agenda to learn Nginx in 90 minutes through a series of exercises. It introduces Nginx as an HTTP and reverse proxy server, discusses setting up the environment using Docker, and provides 5 exercises to learn basic Nginx configurations including setting up a first web page, proxying to an Apache server, load balancing across multiple servers with CDN, adding HTTP basic authentication, and enabling HTTPS with basic authentication.

nginxcodingwithmehttps
How to monitor NGINX
How to monitor NGINXHow to monitor NGINX
How to monitor NGINX

Joined by Rick Nelson, Technical Solutions architect from NGINX Server Density take you though the do's and don'ts of monitoring NGINX. Critical and non critical metrics to monitor, important alerts to configure and the best monitoring tools available.

infrastructuremonitoringnginx
Distribution (time)

                                              Images
     HTML


                                     Back-
                CSS       Scripts   grounds     +
                                               Media


            Time spent generating
              the page in Drupal




5                                                Konstantin Käfer
Overall load time?



6                        Konstantin Käfer
Page size?



7                Konstantin Käfer
Time until DOM is loaded?



8                           Konstantin Käfer

Recommended for you

Varnish Configuration Step by Step
Varnish Configuration Step by StepVarnish Configuration Step by Step
Varnish Configuration Step by Step

Varnish is configured to improve site response time. The document provides instructions on setting up Varnish cache in front of a web server. It discusses requirements like routing all traffic through a firewall and caching content for 6 hours if the origin server is down. It also covers estimating cache size, installing Varnish and plugins to monitor performance, and ensuring Varnish automatically restarts.

revealcloudmuninvarnish installation
Oscon 2010 - ATS
Oscon 2010 - ATSOscon 2010 - ATS
Oscon 2010 - ATS

Apache Traffic Server is an open source HTTP server and reverse proxy that is fast, scalable, and easy to configure and manage. It can be used to build content delivery networks and optimize HTTP/1.1 performance by managing TCP connections. Key features include caching, load balancing, SSL support, and plugins. Traffic Server uses an event-driven model for high concurrency and can handle over 350,000 requests per second on a single machine. It is actively developed and widely used in production environments.

Rails Caching Secrets from the Edge
Rails Caching Secrets from the EdgeRails Caching Secrets from the Edge
Rails Caching Secrets from the Edge

This document discusses caching strategies for Rails applications, including: 1. Using Rails caching for queries, pages, assets, and fragments to improve performance. 2. Configuring Cache-Control headers, compression, and CDNs like Fastly for efficient caching. 3. Techniques for caching dynamic content at the edge using surrogate keys and purging cached responses.

cachingcontent deliveryedge
Time until page is rendered?



9                             Konstantin Käfer
Time until page
      is functional?



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



11                             Konstantin Käfer
1   Introduction ✔

     2   Tools & Measurement

     3   Speed optimization

     4   Beyond YSlow


12                             Konstantin Käfer

Recommended for you

FIWARE Tech Summit - Docker Swarm Secrets for Creating Great FIWARE Platforms
FIWARE Tech Summit - Docker Swarm Secrets for Creating Great FIWARE PlatformsFIWARE Tech Summit - Docker Swarm Secrets for Creating Great FIWARE Platforms
FIWARE Tech Summit - Docker Swarm Secrets for Creating Great FIWARE Platforms

Presentation by Federico Facca Head of Martel Lab, Martel Innovate FIWARE Tech Summit 28-29 November, 2017 Malaga, Spain

appscontext brokercontext management
Load Balancing Applications with NGINX in a CoreOS Cluster
Load Balancing Applications with NGINX in a CoreOS ClusterLoad Balancing Applications with NGINX in a CoreOS Cluster
Load Balancing Applications with NGINX in a CoreOS Cluster

The document discusses load balancing applications with NGINX in a CoreOS cluster. It provides an overview of using CoreOS, etcd, and fleet to deploy and manage containers across a cluster. Etcd is used for service discovery to track dynamic IP addresses and endpoints, while fleet is used as an application scheduler to deploy units and rebalance loads. NGINX can then be used as a software load balancer to distribute traffic to the backend services. The document demonstrates setting up this environment with CoreOS, etcd, fleet and NGINX to provide load balancing in a clustered deployment.

internetcontainersdeployment
5 things you didn't know nginx could do velocity
5 things you didn't know nginx could do   velocity5 things you didn't know nginx could do   velocity
5 things you didn't know nginx could do velocity

NGINX is a well kept secret of high performance web service. Many people know NGINX as an Open Source web server that delivers static content blazingly fast. But, it has many more features to help accelerate delivery of bits to your end users even in more complicated application environments. In this talk we’ll cover several things that most developers or administrators could implement to further delight their end users.

velocity nginx
Measure to prove
     optimization success.



13                           Konstantin Käfer
Firebug’s Net panel




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




15                                              Konstantin Käfer
YSlow




16           Konstantin Käfer

Recommended for you

Using NGINX as an Effective and Highly Available Content Cache
Using NGINX as an Effective and Highly Available Content CacheUsing NGINX as an Effective and Highly Available Content Cache
Using NGINX as an Effective and Highly Available Content Cache

In this presentation we take a look at the basics of content caching with NGINX as well as advanced configuration and implantation.

haproxyalbaws
NGINX 101 - now with more Docker
NGINX 101 - now with more DockerNGINX 101 - now with more Docker
NGINX 101 - now with more Docker

NGINX is used by more than 130 million websites as a lightweight way to serve web content. Use it to decrease costs, improve performance and open up bottlenecks in web and application server environments without a major architectural overhaul. In this talk, we'll cover the three most basic use cases of static content delivery, application load balancing, and web proxying with caching; and touch on the NGINX maintained Docker container.

reverse proxyload balancernginx
Doing QoS Before Ceph Cluster QoS is available - David Byte, Alex Lau
Doing QoS Before Ceph Cluster QoS is available - David Byte, Alex LauDoing QoS Before Ceph Cluster QoS is available - David Byte, Alex Lau
Doing QoS Before Ceph Cluster QoS is available - David Byte, Alex Lau

Cephalocon APAC 2018 March 22-23, 2018 - Beijing, China David Byte, SUSE Senior Technology Strategist Alex Lau, SUSE Storage Consultant

cephcephalocon apac 2018cephalocon
YSlow is not everything.



17                              Konstantin Käfer
Episodes
     ‣   Measure timing for Web 2.0 applications
     ‣   More granular measurement
     ‣   Drupal module!
         http://drupal.org/project/episodes




18                                                 Konstantin Käfer
Other tools
     ‣   AOL Page Test
         online version: http://webpagetest.org
     ‣   IBM Page Detailer
         http://www.alphaworks.ibm.com/tech/pagedetailer
     ‣   Pingdom
         http://tools.pingdom.com
     ‣   WebKit’s Web Inspector
         Safari 4 Beta or WebKit nightly from http://webkit.org
     ‣   Web Debugging Proxies
         http://charlesproxy.com, http://fiddlertool.com
19                                                           Konstantin Käfer
Waterfall diagrams




     Start   Connect   First byte   Last byte
20                                     Konstantin Käfer

Recommended for you

Automatic Operation Bot for Ceph - You Ji
Automatic Operation Bot for Ceph - You JiAutomatic Operation Bot for Ceph - You Ji
Automatic Operation Bot for Ceph - You Ji

The document discusses an automatic operation bot for Ceph clusters at eBay. It describes monitoring the clusters with tools like Prometheus and node-exporter. When issues arise, over 95% are due to failed disks, which the bot would automatically remove and replace. It would record failures and perform remediation steps like removing OSDs, offline disks, and lighting indicator LEDs. The bot design includes components for monitoring, alerting, a task queue, and executor to automate common operations and reduce manual work.

cephcephalocon apac 2018cephalocon
ReplacingSquidWithATS
ReplacingSquidWithATSReplacingSquidWithATS
ReplacingSquidWithATS

This document summarizes a talk given at ApacheCon 2015 about replacing Squid with Apache Traffic Server (ATS) as the proxy server at Yahoo. It discusses the history of using Squid at Yahoo, limitations with Squid that led to considering ATS, key differences in configuration between the two, how features like caching, logging, and peering are implemented in each, and lessons learned from the migration process.

under the covers -- chef in 20 minutes or less
under the covers -- chef in 20 minutes or lessunder the covers -- chef in 20 minutes or less
under the covers -- chef in 20 minutes or less

Learn how to automate your infrastructure to make more time for fun things. In this rapid fire intro to Chef, an open source provisioning and automation platform, we'll touch on the strengths of it's flexible architecture as well as showing some concrete and simple starting points on your path to become an executive chef.

opschef devops chef
1   Introduction ✔

     2   Tools & Measurement ✔

     3   Speed optimization

     4   Beyond YSlow


21                               Konstantin Käfer
1. Reduce requests
     ‣   Every file produces an HTTP request
          60s

          45s

          30s                              Requests
                                           Size
          15s

           0s
                0   10     20     30


     ‣   Fewer requests is better than smaller size
     ‣   HTTP 1.1: 2 components per host in parallel
22                                                     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

23                                                             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);



24                                                                                         Konstantin Käfer

Recommended for you

Caching with varnish
Caching with varnishCaching with varnish
Caching with varnish

The document provides guidance on optimizing performance when using Varnish Cache as a web application accelerator. Some key points include: - Varnish can increase throughput from hundreds to thousands of requests per second. - It can relieve pressure on backends by caching content, avoiding expensive CDNs, and handling more requests than hardware alone. - Use 64-bit systems for better performance over 32-bit. - Configure system settings like file handles and threads to optimize Varnish. - The Varnish Configuration Language (VCL) controls caching behavior and backends through directives like vcl_recv and backends.

varnish
Front End Performance
Front End PerformanceFront End Performance
Front End Performance

The document discusses various techniques for improving front-end website performance, including reducing the number of HTTP requests, using content delivery networks and caching, gzip compression, optimizing CSS and JavaScript loading, image optimization, and lazy loading of content not visible initially. Specific techniques mentioned include combining files, setting long cache expiration headers, minifying files, parallelizing downloads, and deferring non-critical JavaScript initialization. The goal is to render an initial version as fast as possible through optimizations that reduce page load time.

drupaldrupalconparistuning
What's New in Web Development
What's New in Web DevelopmentWhat's New in Web Development
What's New in Web Development

This is an overview session that touches onto all kinds of new developments in the wide field of web design. This talk is mainly focussed on client side technologies (HTML, CSS, JavaScript) and outlines the news of the past months. If you have not been following the buzz lately, this is a good session to get you up to speed.

drupalcondc2009drupalconweb
2. Use a CDN
     ‣   Content Delivery Network
     ‣   Lots of servers scattered around the world
     ‣   Reduces roundtrip times (ping)
     ‣   Comparably cheap: $0.07 - $0.80 per GB
         –   http://www.simplecdn.com
         –   http://pantherexpress.com
         –   http://cachefly.com
         –   http://aws.amazon.com/cloudfront
         –   http://www.limelightnetworks.com
         –   http://www.akamai.com
25                                                    Konstantin Käfer
Round Trip Time
     ‣   HTTP is usually done over TCP/IP
     ‣   Stateful: Three Way Handshakes
     ‣   Round trip time (ping) has high effect

                              Request

               Client                       Server

                               Response

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

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

     Aggressive:   Client                    Server
                    Cache
27                                                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 quot;access plus 1 yearquot;
           </Location>


     ‣   Change filenames/URLs when updating



28                                                   Konstantin Käfer

Recommended for you

From One to a Cluster
From One to a ClusterFrom One to a Cluster
From One to a Cluster

Brian Moon discusses the evolution of the architecture of dealnews.com from a single server setup in the late 1990s to a clustered architecture in 2008. The initial setup encountered bottlenecks with software load balancing and using NFS. They overcame these by implementing hardware load balancing, dropping NFS, and using Memcached for caching. As traffic increased from sites like Digg and Yahoo!, they added more servers, offloaded static content to a CDN, and implemented a custom caching proxy and "pushed cache" to prevent stampeding. Their current architecture loads balances incoming traffic with F5 BIG-IP and uses replication and load balancing for the database.

#Webperf Choreography
#Webperf Choreography#Webperf Choreography
#Webperf Choreography

In this session I will show you how modern browsers and sites can coordinate the dance of loading & rendering to deliver a web that is fast where it matters to users. The biggest leaps in browser improvements, including Firefox Quantum, focused on areas like scheduling, breaking up and parallelizing work. Discover where you can benefit from fine control and what aspects of performance you can leave to the browser. Applying this knowledge will help you build fluid, native-like experiences that can handle the growing complexity of the web.

firefoxperformanceweb
WordCamp RVA 2011 - Performance & Tuning.pdf
WordCamp RVA 2011 - Performance & Tuning.pdfWordCamp RVA 2011 - Performance & Tuning.pdf
WordCamp RVA 2011 - Performance & Tuning.pdf

The document discusses optimizing WordPress performance. It recommends minimizing frontend assets like images, implementing caching for assets and application chunks, optimizing themes and plugins, and choosing efficient server setups. Specific plugins like W3 Total Cache and a CDN can improve performance by up to 10 times by caching static content. Nginx is presented as a faster alternative to Apache. Overall, the key takeaways are to simplify code, minimize requests, optimize caching, and reduce payload sizes to improve perceived and actual performance.

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
     ‣   NowPublic.com: 700 KB ➔ 300 KB
     ‣   Compress scripts and styles as well



29                                                                   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/




30                                                                      Konstantin Käfer
31                                               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




32                                                Konstantin Käfer

Recommended for you

WordCamp RVA
WordCamp RVAWordCamp RVA
WordCamp RVA

The document discusses optimizing WordPress performance. It recommends minimizing frontend assets like images, implementing caching for assets and application chunks, optimizing themes and plugins, and choosing efficient server setups. Specific plugins like W3 Total Cache and a CDN can improve performance by up to 10 times by caching static content. Nginx is presented as a faster alternative to Apache. Overall, the key takeaways are to simplify code, minimize requests, optimize caching, and reduce payload sizes to improve perceived and actual performance.

WordCamp RVA
WordCamp RVAWordCamp RVA
WordCamp RVA

The document discusses optimizing WordPress performance. It recommends minimizing frontend assets like images, implementing caching for assets and database queries, optimizing themes and plugins, and using a fast server setup like Nginx. Real-world tests show Nginx outperforming Apache. Caching plugins like W3 Total Cache can improve performance over 10x when combined with a CDN like Amazon S3 and CloudFront. The document stresses optimizing the application layer, interface, and changing user perception of performance.

WordCamp RVA 2011 - Performance & Tuning.pdf
WordCamp RVA 2011 - Performance & Tuning.pdfWordCamp RVA 2011 - Performance & Tuning.pdf
WordCamp RVA 2011 - Performance & Tuning.pdf

The document discusses optimizing WordPress performance. It recommends minimizing frontend assets like images, implementing caching for assets and database queries, optimizing themes and plugins, and using a fast server setup like Nginx. Real-world tests show Nginx outperforming Apache. Caching plugins like W3 Total Cache can improve performance over 10x when combined with a CDN like Amazon S3 and CloudFront. The document stresses optimizing the application layer through themes and plugins, as well as interface polish and caching to minimize page load times.

1   Introduction ✔

     2   Tools & Measurement ✔

     3   Speed optimization ✔

     4   Beyond YSlow


33                               Konstantin Käfer
8. Parallelization
     ‣   RFC: 2 requests per host name in parallel
     ‣   Use multiple host names ➔ higher
         parallelization
         (Don’t overdo it)
     ‣   Most current browsers use > 2 connections
     ‣   http://stevesouders.com/ua/




34                                                   Konstantin Käfer
HTTP connections
     ‣   “A single-user client SHOULD NOT maintain
         more than 2 connections with any server
         or proxy.” (RFC 2616, 8.1.4)




35
                   1    2    3    4    5      Konstantin Käfer
9. Reduce image weight
     ‣   OptiPNG, PNGCrush, ...
         – Removes invisible content
         – Lossless recompression
         –   for i in `find . -name quot;*.pngquot;` ; do optipng -o7 $i ; done


     ‣   JPEGtran/ImageMagick
         – Remove color profiles, meta data, …
         – Lossless JPEG operations
     ‣   http://smushit.com – now integrated into YSlow
36                                                                 Konstantin Käfer

Recommended for you

Capistrano
CapistranoCapistrano
Capistrano

This document discusses how Capistrano can be used to automate deployments and other tasks across multiple servers. It provides examples of how Capistrano can be used for deploying code, updating databases, checking server health metrics, restarting services, and more. While originally designed for Ruby on Rails applications, Capistrano can be adapted for other languages and technologies as well by customizing the deployment recipes.

serversrailsdeployment
Page Performance
Page PerformancePage Performance
Page Performance

Points.com webdev lunch and learn #2: Page performance. What makes websites slow, how to make them faster.

points.comwebsite performancewebdev best practices
ASP.NET Scalability - NxtGen Oxford
ASP.NET Scalability - NxtGen OxfordASP.NET Scalability - NxtGen Oxford
ASP.NET Scalability - NxtGen Oxford

This document discusses techniques for writing scalable ASP.NET applications, including caching output and objects to increase server performance, reducing network loads by managing viewstate and compression, and load balancing across multiple servers. It covers caching methods like output caching, object caching, donut caching and Velocity distributed caching. It also discusses paging large result sets and resources for further information.

10. Persistent HTTP
     ‣   HTTP supports persistent connections
             multiple connections      persistent connection
                 client   server       client       server
         open                       open



         close
         open




                                                             time
         close
         open
                                    close


         close




     ‣   Make sure KeepAlive is not turned off
37                                                                  Konstantin Käfer
10. Persistent HTTP
     ‣   AOL Pagetest has connection view




38                                          Konstantin Käfer
11. 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




39                                               Konstantin Käfer
12. 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/)


40                                                           Konstantin Käfer

Recommended for you

WordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & TuningWordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & Tuning

This document discusses optimizing WordPress performance. It recommends minimizing frontend assets like CSS and images, using caching plugins to improve load times, optimizing themes and plugins, and choosing a fast web server like Nginx. Real-world tests show Nginx outperforming Apache. Specific tips include simplifying themes, deleting unused plugins, moving scripts to the bottom, and using a CDN with caching plugins to serve static assets quickly. The document emphasizes improving perceived performance through responsiveness, feedback and progressive loading.

wordpressplugintuning
High performance website
High performance websiteHigh performance website
High performance website

The document provides 14 tips for optimizing website performance based on the 80/20 rule. The tips include minimizing HTTP requests by combining files, using a CDN, adding caching headers, gzipping files, optimizing CSS and JS placement, avoiding redirects and duplicate scripts, and making Ajax cacheable. Following these best practices can significantly improve page load times by reducing network requests and making better use of browser caching.

ASP.NET Scalability - WebDD
ASP.NET Scalability - WebDDASP.NET Scalability - WebDD
ASP.NET Scalability - WebDD

This document discusses techniques for writing scalable ASP.NET applications, including caching output and objects to improve performance, using paging to reduce database loads, and minimizing network traffic by managing viewstate and compressing content. It provides an overview of various caching strategies like output caching, donut caching, and object caching using the caching API. It also covers reducing viewstate size and compressing content and JavaScript to reduce page size.

Thanks! Questions?



        Konstantin Käfer
          mail@kkaefer.com




41                           Konstantin Käfer
Ressources
     – 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/
42                                                             Konstantin Käfer

More Related Content

What's hot

Testing applications with traffic control in containers / Alban Crequy (Kinvolk)
Testing applications with traffic control in containers / Alban Crequy (Kinvolk)Testing applications with traffic control in containers / Alban Crequy (Kinvolk)
Testing applications with traffic control in containers / Alban Crequy (Kinvolk)
Ontico
 
Apache httpd 2.4: The Cloud Killer App
Apache httpd 2.4: The Cloud Killer AppApache httpd 2.4: The Cloud Killer App
Apache httpd 2.4: The Cloud Killer App
Jim Jagielski
 
Australian OpenStack User Group August 2012: Chef for OpenStack
Australian OpenStack User Group August 2012: Chef for OpenStackAustralian OpenStack User Group August 2012: Chef for OpenStack
Australian OpenStack User Group August 2012: Chef for OpenStack
Matt Ray
 
Nginx - Tips and Tricks.
Nginx - Tips and Tricks.Nginx - Tips and Tricks.
Nginx - Tips and Tricks.
Harish S
 
Learn nginx in 90mins
Learn nginx in 90minsLearn nginx in 90mins
Learn nginx in 90mins
Larry Cai
 
How to monitor NGINX
How to monitor NGINXHow to monitor NGINX
How to monitor NGINX
Server Density
 
Varnish Configuration Step by Step
Varnish Configuration Step by StepVarnish Configuration Step by Step
Varnish Configuration Step by Step
Kim Stefan Lindholm
 
Oscon 2010 - ATS
Oscon 2010 - ATSOscon 2010 - ATS
Oscon 2010 - ATS
Leif Hedstrom
 
Rails Caching Secrets from the Edge
Rails Caching Secrets from the EdgeRails Caching Secrets from the Edge
Rails Caching Secrets from the Edge
Michael May
 
FIWARE Tech Summit - Docker Swarm Secrets for Creating Great FIWARE Platforms
FIWARE Tech Summit - Docker Swarm Secrets for Creating Great FIWARE PlatformsFIWARE Tech Summit - Docker Swarm Secrets for Creating Great FIWARE Platforms
FIWARE Tech Summit - Docker Swarm Secrets for Creating Great FIWARE Platforms
FIWARE
 
Load Balancing Applications with NGINX in a CoreOS Cluster
Load Balancing Applications with NGINX in a CoreOS ClusterLoad Balancing Applications with NGINX in a CoreOS Cluster
Load Balancing Applications with NGINX in a CoreOS Cluster
Kevin Jones
 
5 things you didn't know nginx could do velocity
5 things you didn't know nginx could do   velocity5 things you didn't know nginx could do   velocity
5 things you didn't know nginx could do velocity
sarahnovotny
 
Using NGINX as an Effective and Highly Available Content Cache
Using NGINX as an Effective and Highly Available Content CacheUsing NGINX as an Effective and Highly Available Content Cache
Using NGINX as an Effective and Highly Available Content Cache
Kevin Jones
 
NGINX 101 - now with more Docker
NGINX 101 - now with more DockerNGINX 101 - now with more Docker
NGINX 101 - now with more Docker
Sarah Novotny
 
Doing QoS Before Ceph Cluster QoS is available - David Byte, Alex Lau
Doing QoS Before Ceph Cluster QoS is available - David Byte, Alex LauDoing QoS Before Ceph Cluster QoS is available - David Byte, Alex Lau
Doing QoS Before Ceph Cluster QoS is available - David Byte, Alex Lau
Ceph Community
 
Automatic Operation Bot for Ceph - You Ji
Automatic Operation Bot for Ceph - You JiAutomatic Operation Bot for Ceph - You Ji
Automatic Operation Bot for Ceph - You Ji
Ceph Community
 
ReplacingSquidWithATS
ReplacingSquidWithATSReplacingSquidWithATS
ReplacingSquidWithATS
Chiranjeevi Jaladi
 
under the covers -- chef in 20 minutes or less
under the covers -- chef in 20 minutes or lessunder the covers -- chef in 20 minutes or less
under the covers -- chef in 20 minutes or less
sarahnovotny
 
Caching with varnish
Caching with varnishCaching with varnish
Caching with varnish
90kts
 

What's hot (19)

Testing applications with traffic control in containers / Alban Crequy (Kinvolk)
Testing applications with traffic control in containers / Alban Crequy (Kinvolk)Testing applications with traffic control in containers / Alban Crequy (Kinvolk)
Testing applications with traffic control in containers / Alban Crequy (Kinvolk)
 
Apache httpd 2.4: The Cloud Killer App
Apache httpd 2.4: The Cloud Killer AppApache httpd 2.4: The Cloud Killer App
Apache httpd 2.4: The Cloud Killer App
 
Australian OpenStack User Group August 2012: Chef for OpenStack
Australian OpenStack User Group August 2012: Chef for OpenStackAustralian OpenStack User Group August 2012: Chef for OpenStack
Australian OpenStack User Group August 2012: Chef for OpenStack
 
Nginx - Tips and Tricks.
Nginx - Tips and Tricks.Nginx - Tips and Tricks.
Nginx - Tips and Tricks.
 
Learn nginx in 90mins
Learn nginx in 90minsLearn nginx in 90mins
Learn nginx in 90mins
 
How to monitor NGINX
How to monitor NGINXHow to monitor NGINX
How to monitor NGINX
 
Varnish Configuration Step by Step
Varnish Configuration Step by StepVarnish Configuration Step by Step
Varnish Configuration Step by Step
 
Oscon 2010 - ATS
Oscon 2010 - ATSOscon 2010 - ATS
Oscon 2010 - ATS
 
Rails Caching Secrets from the Edge
Rails Caching Secrets from the EdgeRails Caching Secrets from the Edge
Rails Caching Secrets from the Edge
 
FIWARE Tech Summit - Docker Swarm Secrets for Creating Great FIWARE Platforms
FIWARE Tech Summit - Docker Swarm Secrets for Creating Great FIWARE PlatformsFIWARE Tech Summit - Docker Swarm Secrets for Creating Great FIWARE Platforms
FIWARE Tech Summit - Docker Swarm Secrets for Creating Great FIWARE Platforms
 
Load Balancing Applications with NGINX in a CoreOS Cluster
Load Balancing Applications with NGINX in a CoreOS ClusterLoad Balancing Applications with NGINX in a CoreOS Cluster
Load Balancing Applications with NGINX in a CoreOS Cluster
 
5 things you didn't know nginx could do velocity
5 things you didn't know nginx could do   velocity5 things you didn't know nginx could do   velocity
5 things you didn't know nginx could do velocity
 
Using NGINX as an Effective and Highly Available Content Cache
Using NGINX as an Effective and Highly Available Content CacheUsing NGINX as an Effective and Highly Available Content Cache
Using NGINX as an Effective and Highly Available Content Cache
 
NGINX 101 - now with more Docker
NGINX 101 - now with more DockerNGINX 101 - now with more Docker
NGINX 101 - now with more Docker
 
Doing QoS Before Ceph Cluster QoS is available - David Byte, Alex Lau
Doing QoS Before Ceph Cluster QoS is available - David Byte, Alex LauDoing QoS Before Ceph Cluster QoS is available - David Byte, Alex Lau
Doing QoS Before Ceph Cluster QoS is available - David Byte, Alex Lau
 
Automatic Operation Bot for Ceph - You Ji
Automatic Operation Bot for Ceph - You JiAutomatic Operation Bot for Ceph - You Ji
Automatic Operation Bot for Ceph - You Ji
 
ReplacingSquidWithATS
ReplacingSquidWithATSReplacingSquidWithATS
ReplacingSquidWithATS
 
under the covers -- chef in 20 minutes or less
under the covers -- chef in 20 minutes or lessunder the covers -- chef in 20 minutes or less
under the covers -- chef in 20 minutes or less
 
Caching with varnish
Caching with varnishCaching with varnish
Caching with varnish
 

Similar to Front End Performance

Front End Performance
Front End PerformanceFront End Performance
Front End Performance
Konstantin Käfer
 
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
 
#Webperf Choreography
#Webperf Choreography#Webperf Choreography
#Webperf Choreography
Harald Kirschner
 
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
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
 
Capistrano
CapistranoCapistrano
Capistrano
Kenneth Kalmer
 
Page Performance
Page PerformancePage Performance
Page Performance
atorreno
 
ASP.NET Scalability - NxtGen Oxford
ASP.NET Scalability - NxtGen OxfordASP.NET Scalability - NxtGen Oxford
ASP.NET Scalability - NxtGen Oxford
Phil Pursglove
 
WordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & TuningWordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & Tuning
Timothy Wood
 
High performance website
High performance websiteHigh performance website
High performance website
Chamnap Chhorn
 
ASP.NET Scalability - WebDD
ASP.NET Scalability - WebDDASP.NET Scalability - WebDD
ASP.NET Scalability - WebDD
Phil Pursglove
 
performance.ppt
performance.pptperformance.ppt
performance.ppt
fakeaccount225095
 
Http2 in practice
Http2 in practiceHttp2 in practice
Http2 in practice
Patrick Meenan
 
WordPress performance tuning
WordPress performance tuningWordPress performance tuning
WordPress performance tuning
Vladimír Smitka
 
ASP.NET Scalability - VBUG London
ASP.NET Scalability - VBUG LondonASP.NET Scalability - VBUG London
ASP.NET Scalability - VBUG London
Phil Pursglove
 
Kubernetes & Google Container Engine @ mabl
Kubernetes & Google Container Engine @ mablKubernetes & Google Container Engine @ mabl
Kubernetes & Google Container Engine @ mabl
Joseph Lust
 
Extending Your Applications to the Edge with CDNs
Extending Your Applications to the Edge with CDNsExtending Your Applications to the Edge with CDNs
Extending Your Applications to the Edge with CDNs
Salesforce Developers
 

Similar to Front End Performance (20)

Front End Performance
Front End PerformanceFront End Performance
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
 
From One to a Cluster
From One to a ClusterFrom One to a Cluster
From One to a Cluster
 
#Webperf Choreography
#Webperf Choreography#Webperf Choreography
#Webperf Choreography
 
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
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
 
Capistrano
CapistranoCapistrano
Capistrano
 
Page Performance
Page PerformancePage Performance
Page Performance
 
ASP.NET Scalability - NxtGen Oxford
ASP.NET Scalability - NxtGen OxfordASP.NET Scalability - NxtGen Oxford
ASP.NET Scalability - NxtGen Oxford
 
WordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & TuningWordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & Tuning
 
High performance website
High performance websiteHigh performance website
High performance website
 
ASP.NET Scalability - WebDD
ASP.NET Scalability - WebDDASP.NET Scalability - WebDD
ASP.NET Scalability - WebDD
 
performance.ppt
performance.pptperformance.ppt
performance.ppt
 
Http2 in practice
Http2 in practiceHttp2 in practice
Http2 in practice
 
WordPress performance tuning
WordPress performance tuningWordPress performance tuning
WordPress performance tuning
 
ASP.NET Scalability - VBUG London
ASP.NET Scalability - VBUG LondonASP.NET Scalability - VBUG London
ASP.NET Scalability - VBUG London
 
Kubernetes & Google Container Engine @ mabl
Kubernetes & Google Container Engine @ mablKubernetes & Google Container Engine @ mabl
Kubernetes & Google Container Engine @ mabl
 
Extending Your Applications to the Edge with CDNs
Extending Your Applications to the Edge with CDNsExtending Your Applications to the Edge with CDNs
Extending Your Applications to the Edge with CDNs
 

Recently uploaded

What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 

Recently uploaded (20)

What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 

Front End Performance

  • 1. Front End Performance Konstantin Käfer
  • 2. What’s Performance? Loading Perception Measurement Using 2 Konstantin Käfer
  • 3. Styles, scripts and images account for over 80% of load time. 3 Konstantin Käfer
  • 4. Back- Other grounds Images Media HTML CSS Scripts 4 Konstantin Käfer
  • 5. Distribution (time) Images HTML Back- CSS Scripts grounds + Media Time spent generating the page in Drupal 5 Konstantin Käfer
  • 6. Overall load time? 6 Konstantin Käfer
  • 7. Page size? 7 Konstantin Käfer
  • 8. Time until DOM is loaded? 8 Konstantin Käfer
  • 9. Time until page is rendered? 9 Konstantin Käfer
  • 10. Time until page is functional? 10 Konstantin Käfer
  • 11. Render a usable version as early as possible. 11 Konstantin Käfer
  • 12. 1 Introduction ✔ 2 Tools & Measurement 3 Speed optimization 4 Beyond YSlow 12 Konstantin Käfer
  • 13. Measure to prove optimization success. 13 Konstantin Käfer
  • 14. Firebug’s Net panel 14 Konstantin Käfer
  • 15. YSlow ‣ Rates a webpage based on 13 criteria ‣ Determines overall load time ‣ Provides optimization suggestions ‣ Graphs, Numbers & Figures 15 Konstantin Käfer
  • 16. YSlow 16 Konstantin Käfer
  • 17. YSlow is not everything. 17 Konstantin Käfer
  • 18. Episodes ‣ Measure timing for Web 2.0 applications ‣ More granular measurement ‣ Drupal module! http://drupal.org/project/episodes 18 Konstantin Käfer
  • 19. Other tools ‣ AOL Page Test online version: http://webpagetest.org ‣ IBM Page Detailer http://www.alphaworks.ibm.com/tech/pagedetailer ‣ Pingdom http://tools.pingdom.com ‣ WebKit’s Web Inspector Safari 4 Beta or WebKit nightly from http://webkit.org ‣ Web Debugging Proxies http://charlesproxy.com, http://fiddlertool.com 19 Konstantin Käfer
  • 20. Waterfall diagrams Start Connect First byte Last byte 20 Konstantin Käfer
  • 21. 1 Introduction ✔ 2 Tools & Measurement ✔ 3 Speed optimization 4 Beyond YSlow 21 Konstantin Käfer
  • 22. 1. Reduce requests ‣ Every file produces an HTTP request 60s 45s 30s Requests Size 15s 0s 0 10 20 30 ‣ Fewer requests is better than smaller size ‣ HTTP 1.1: 2 components per host in parallel 22 Konstantin Käfer
  • 23. 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 23 Konstantin Käfer
  • 24. 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); 24 Konstantin Käfer
  • 25. 2. Use a CDN ‣ Content Delivery Network ‣ Lots of servers scattered around the world ‣ Reduces roundtrip times (ping) ‣ Comparably cheap: $0.07 - $0.80 per GB – http://www.simplecdn.com – http://pantherexpress.com – http://cachefly.com – http://aws.amazon.com/cloudfront – http://www.limelightnetworks.com – http://www.akamai.com 25 Konstantin Käfer
  • 26. Round Trip Time ‣ HTTP is usually done over TCP/IP ‣ Stateful: Three Way Handshakes ‣ Round trip time (ping) has high effect Request Client Server Response 26 Konstantin Käfer
  • 27. 3. Caching ? Disabled: Client Server Cache Full response ? Default: Client Server “Still fresh” Cache Partial response Aggressive: Client Server Cache 27 Konstantin Käfer
  • 28. 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 quot;access plus 1 yearquot; </Location> ‣ Change filenames/URLs when updating 28 Konstantin Käfer
  • 29. 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 ‣ NowPublic.com: 700 KB ➔ 300 KB ‣ Compress scripts and styles as well 29 Konstantin Käfer
  • 30. 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/ 30 Konstantin Käfer
  • 31. 31 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
  • 32. 7. Minify CSS and JS ‣ Remove comments and whitespace ‣ Still savings, even with GZip ‣ Drupal’s aggregator or sf_cache.module 32 Konstantin Käfer
  • 33. 1 Introduction ✔ 2 Tools & Measurement ✔ 3 Speed optimization ✔ 4 Beyond YSlow 33 Konstantin Käfer
  • 34. 8. Parallelization ‣ RFC: 2 requests per host name in parallel ‣ Use multiple host names ➔ higher parallelization (Don’t overdo it) ‣ Most current browsers use > 2 connections ‣ http://stevesouders.com/ua/ 34 Konstantin Käfer
  • 35. HTTP connections ‣ “A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.” (RFC 2616, 8.1.4) 35 1 2 3 4 5 Konstantin Käfer
  • 36. 9. Reduce image weight ‣ OptiPNG, PNGCrush, ... – Removes invisible content – Lossless recompression – for i in `find . -name quot;*.pngquot;` ; do optipng -o7 $i ; done ‣ JPEGtran/ImageMagick – Remove color profiles, meta data, … – Lossless JPEG operations ‣ http://smushit.com – now integrated into YSlow 36 Konstantin Käfer
  • 37. 10. Persistent HTTP ‣ HTTP supports persistent connections multiple connections persistent connection client server client server open open close open time close open close close ‣ Make sure KeepAlive is not turned off 37 Konstantin Käfer
  • 38. 10. Persistent HTTP ‣ AOL Pagetest has connection view 38 Konstantin Käfer
  • 39. 11. 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 39 Konstantin Käfer
  • 40. 12. 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/) 40 Konstantin Käfer
  • 41. Thanks! Questions? Konstantin Käfer mail@kkaefer.com 41 Konstantin Käfer
  • 42. Ressources – 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/ 42 Konstantin Käfer