Frontend Performance Optimiziation

Step by Step with Symfony2

SunshinePHP, Feb 8th 2013 © David Buchmann, Liip AG

About David Buchmann

Twitter: @dbu

David is a senior developper at Liip SA, specializing in Symfony2. He happens to also be a certified Scrum Master and sometimes enjoys doing the scrum master or product owner role for a project.

Liip is doing custom web development with PHP in Switzerland.

What makes a website slow?

• Inefficient application code
• Response time
• Bandwith
• Browser side rendering

What makes a website slow?

• Inefficient application code
• Response time
• Bandwith
• Browser side rendering

Measure - change - measure

Jordi Boggiano

Understand 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

• PHP code optimization
• PHP accelerators like APC
• Webserver optimization

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

• firebug / chrome debug toolbar
• YSlow: yslow.org
• netem (linux): Simulate slow network
  $ tc qdisc add dev lo root netem delay 300ms 30ms loss 0.10%
  Caution: This will affect everything on your machine
• Sloppy: www.dallaway.com/sloppy/
• Decrease Apache performance: SetEnv no-gzip, KeepAlive Off
• Decrease Symfony2 performance: twig > cache: false

The demo application

github.com/dbu/symfony-speed

Demo application

• Controller with usleep
• Artificially bloated number and size of javascript and css
  • But big projects can reach such numbers
• In-memory login and a form to show interaction

Measure

• 2 seconds to load HTML page
• Tons of CSS files
• Tons of JS files
• Page is rendered after about 10 seconds
• Once rendering is done, requests the images that are visible

Measure

• 2 seconds to load HTML page
• Tons of CSS files
• Tons of JS files
• Page is rendered after about 10 seconds
• Once rendering is done, requests the images that are visible

About 10 seconds until the user sees a page

Optimization: Move javascript to the bottom

# layout.html.twig
@@ -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>