front end-performance
Post on 29-Nov-2014
808 Views
Preview:
DESCRIPTION
TRANSCRIPT
Azri
Faster Page Loads with Front End Performance
prajwala@azrisolutions.com
Azri
AGENDA
Me and my companyTools & MeasurementImprove page load time
Azri
‘Me’
My villageHUZURABAD
Azri
More about ‘Me’• I build applications on Drupal• I am an active contributor of code on
Drupal, jQuery and PHP communities• One of my projects, a real-time
collaboration suite was showcased at TechCrunch 50 in SF
• I build Facebook Applications• ...
Azri
My CompanyWe are based in
We code on
We build products & solutions using
Azri
Web Page
IMAGES + Flash
CSS
HTML + XHR
Javascript
Azri
80 % of load timeCome from
CSS + JS + Images
Azri
5 CSS Requests27 JS Requests29 Image Requests
Azri
Measure Overal load time Page size Time until DOM is loaded Time until Page is rendered Time until Page is functional
Azri
Azri
ToolsYslowFirebug NetWebpagetest.orgBlaze.io
Azri
YSlow
Azri
Waterfall Chart
Starrt Connect First byte transfer Last byte transfer
Azri
Reduce Requests Compress Styles and JS
Built into Drupal http://drupalmodules.com/module/ad
vanced-cssjs-aggregation Sprites
Many images into one file Shift into view with background-
position
Azri
Reduce Requests No Redirects Use CSS Instead of Images
-moz-border-radius:4px;-webkit-border-radius:4px;-border-radius:4px;
Data: URLs in style sheetsbackground: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///
+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/
A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')
Azri
Use CDN Content Delivery Network Servers Scattered around world Reduces roundtrip time Some providers
Akamai Simple CDN Panther Express
Azri
Cache Use Exprires header for http request Browser caches content Browser checks whether content is
fresh For images, js, css set expires header
far future Change filename/URL when updating
Azri
Compress Content Use apache mod_deflate module to
compress content Reduces page size more than 50% Compress script and styles
Azri
Keep CSS TOPPut <style> or <link> tags in <head> Page renders when all css loaded Loading CSS later causes re-
rendering
Azri
Keep JS Bottom Just before </body> Loading scripts in the head will block
page rendering Scripts load sequentially
Azri
Cookie Free Domain Use cookie-free domain for static
content (images, css, js) Create sub domain that point to
same server Use CDN module to serve static
content with the new domain Serve static content with nginx or
lighttpd servers
Azri
Smush.it Run smush.it Will reduce the size of images Removes white space from the
images Keeps the quality of the image
Azri
Parallelization Browser has limitation of 2 requests
per domain User multiple domains to serve static
content Use CDN module to serve content
from multiple domains
Azri
Questions?Questions?
prajwala@azrisolutions.comasif@azrisolutions.com
top related