다음을 통해 공유

Improve Performance of your website

  • 아티클

I recently went to a talk about how to improve performance of your website. In this post I am going to share out the lessons I learnt while applying some of the best practices to my personal photo view application. The high level points I will be mentioning are not tied to web programing languages such as php, asp.net etc but more around javacript/css optimizations for the browser. In the end I will highlight some tools that I used for this exercise

Functions of the Browser

When you make a request to the webpage in the browser following is what happens

  • Requests are made to download the webpage/ JS files/ CSS files/ images
  • DOM for the page is constructed as follows
    • CSS parser parses the css
    • Javscript parser parses the javascript code
    • html parser parses the html
  • javascript execution happens and changes to the DOM are made
  • Formatting of the DOM by applying styles
  • Layout of the page is created with different blocks
  • page is rendered in the browser and the user sees the result

Quite a lot of activities happening right? Lets build on this overall flow and see how can we optimize our site’s performance for each step

Network Requests

  • No redirection calls. Try to change the code so that it goes to the correct location. redirection means you are making 2 requests as compared to 1 so it will take more time for the user to get the response
  • Avoid meta refresh  to refresh content on the page or redirect to a different page after 5 sec(say you are showing an add). This approach is also not SEO optimized
  • Use CDN Use the servers closet to you to serve the content so it takes less time to download the content
  • ReuseConnection Do not send response with Connection:close header -not efficient for the same request as the connection needs to be recreated useConnection: Keep-Alive

Minimize Bytes Downloaded

  • Use Compression
  • Use Caching of the content where applicable
  • Cache data requests in browser cache(eg jquery json result)
  • Standard File Capitalization :Icon.png, icon.png are treated as separate downloaded file. make sure you are checking for  this while coding

Efficiently Structure markup

This is critical to make sure the browser does the parsing of html, javasccript and css efficiently

  • Use html5 doctype. Use the latest ie standards mode
  • Use httpheader to specify mode. Not metatag since at that time ie will use the ie9 by default. Need to do a bunch of resetting . IE uses httpheader to see which parser to use for the page
    • Bad <meta http-equiv="X-UA-Compatible" content="IE-9" >
    • Good: x-UA-Compatible:IE-9
  • Link css at the top of page so they downloaded in order
  • Do Not use @import in css files
    • Legacy browser do a sync block to download this and then build the css
  • Avoid embedded inline styles/js
    • This causes context switching b/w html and css/js parser reducing performance
  • No js in head since the browser does a sync block to execute js since js can manipulate the page. If you have to
    • Defer loading: <script src="script.js" type="text/javascript" defer="defer"></script>
    • Async tag in html5 : <script async src="slow.js"></script>
  • Include js in the end

Optimize Media Usage

  • Use Image Sprites
    • # network connections used to download are less
    • Size of the content being downloaded is less
  • Image Formats
    • Png- for the most common cases/jpeg for photo/jpeg-xr(photo high res)
    • Decoding algo is factor to consider which algo to use
  • Use native image resolutions
    • Get an image 500x500 and do not resize in the image tag as shown <img h=50 w=50 />
  • Replace single pixel img/border radius with css3 gradient since decoding of the image take time
  • Use datauril for small image
    • no network request needed to download the image
    • eg. following code displays the windows folder icon on the webpage
    • <img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH
    • 5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0Ccg
    • uWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" width="16" height="14"
    • alt="embedded folder icon">

Write Fast JS

  • Do Minification of JS/CSS3
  • Minimize dom interactions
    • Do not query the dom directly in javascript. cache the DOM and use the cached DOM

Tools that I used

Hopefully you find this useful…

Cheers!!!!!

Comments

  • Anonymous
    July 30, 2011
    Why using EmulateIE7 and not IE9 in http header? Perhaps I missed that, but you forgot to mention IE Developer Toolbar (F12) in tools section.

  • Anonymous
    August 25, 2011
    @Dragan Panjkov Good points..done