Frontend Performance Optimiziation

Step by Step with Symfony2

phpday.it, 18.5.2012 © David Buchmann, Liip AG

What makes a website slow?

What makes a website slow?



Measure - change - measure

Jordi Boggiano



Find out the effects of your changes.



Remember:

«Premature optimization is the root of all evil»

Donald E. Knuth

I am going to talk about:

  1. Frontend performance analysis and basic tips
  2. Assetic to get serious about css and js optimization
  3. Caching
  4. Varnish and ESI

I am not going to talk about:

Overview:

  1. Frontend performance analysis and basic tips
  2. Assetic to get serious about css and js optimization
  3. Caching
  4. Varnish and ESI

Tools and helpers

The demo application:


github.com/dbu/symfony-speed

Demo application

Measure

Measure

About 10 seconds until the user sees a page

Optimization: Move javascript to the bottom

@@ -6,8 +6,6 @@
    {% include 'DbuCoreBundle::stylesheets.html.twig' %}
-   {% include 'DbuCoreBundle::javascripts.html.twig' %}
    <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" >
  </head>

@@ -91,5 +89,11 @@
    </div>
+   {# javascript at the bottom: browser waits with rendering
+      until all files referenced before are loaded
+   #}
+   {% include 'DbuCoreBundle::javascripts.html.twig' %}

</body>
        

Measure:
We just doubled the speed the user perceives!

Browser starts rendering after as soon as it has all CSS files, no need to wait for javascript to load.

Page renders after about 5 seconds

Measure:
We just doubled the speed the user perceives!

Browser starts rendering after as soon as it has all CSS files, no need to wait for javascript to load.

Page renders after about 5 seconds

There is still a huge number of requests

Overview:

  1. Frontend performance analysis and basic tips
  2. Assetic to get serious about css and js optimization
  3. Caching
  4. Varnish and ESI

Enter assetic: Combine js files, combine css files

Using assetic

Measure:
Reduced the number of requests from 62 to 9

Measure:
Reduced the number of requests from 62 to 9

But there are lots of image files
(a real page could have many more)

CSS Sprites


background: url('../images/sprites.png')
no-repeat -2px -43px;

CSS Sprites

/* main.css */

.sprite {
    display:block;
    background-repeat:no-repeat;
    background-image:url(/assets/images/sprite.png);
}

.logo {
    width:336px;
    height:63px;
}
/* generated sprites.css */

.logo {background-position:-160px 0px}
        

Measure: Down to 4 requests

Measure: Down to 4 requests

But still large files, downloaded 720 KB in total

YUI compressor

# config_prod.yml
assetic:
  filters:
    yui_css:
      jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
      apply_to: "\.css$"
    yui_js:
      jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
      apply_to: "\.js$"