• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Best Practices For Speeding Up Your Web Site
 

Best Practices For Speeding Up Your Web Site

on

  • 2,184 views

 

Statistics

Views

Total Views
2,184
Views on SlideShare
2,108
Embed Views
76

Actions

Likes
1
Downloads
36
Comments
0

6 Embeds 76

http://cms.kms-technology.com 36
http://cms.kms.com.vn 15
http://www.slideshare.net 12
http://www.linkedin.com 10
http://www.scoop.it 2
http://www.lmodules.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Best Practices For Speeding Up Your Web Site Best Practices For Speeding Up Your Web Site Presentation Transcript

    • Best Practices for Speeding Up Your Web Site
      Presenter: Tran Duc Minh
    • Performance Rule 80 / 20 in economic
    • Performance rule 80/20 in Web
    • Loading http://www.yahoo.com
    • Time spent loading popular web sites
    • 1) Make Fewer HTTP Requests
      Making your page fast for these first time visitors is key to a better user experience.
      Reducing the number of components in turn reduces the number of HTTP requests required to render the page.
    • 1) Make Fewer HTTP Requests
      Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet.
      CSS Sprites are the preferred method for reducing the number of image requests
    • 1) Make Fewer HTTP Requests
      Image maps combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page
      Inline images use the data:URL scheme to embed the image data in the actual page. This can increase the size of your HTML document (not yet supported across all major browsers.)
    • 2) Use a Content Delivery Network
      it's better to first serve your static content. This not only achieves a bigger reduction in response times
      A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users.
    • 2) Use a Content Delivery Network
      The server with the fewest network hops or the server with the quickest response time is chosen.
      Some CDN service providers like Akamai Technologies, Mirror Image Internet, or Limelight Networks
    • 3) Add an Expires or a Cache-Control Header
      There are two things in this rule:
      For static components: implement "Never expire" policy by setting far future Expires header
      For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests
    • 4) Gzip Components
      Compression reduces response times by reducing the size of the HTTP response.
      Starting with HTTP/1.1, web clients indicate support for compression with the Accept-Encoding header in the HTTP request.
      Accept-Encoding: gzip, deflate
    • 5) Put Stylesheets at the Top and Put Scripts at the Bottom
      Moving style sheets to the document HEAD makes pages appear to be loading faster
      While a script is downloading, the browser won't start any other downloads
    • 6) Make JavaScript and CSS External
      Using external files generally produces faster pages because the JavaScript and CSS files are cached by the browser.
    • 7) Minify JavaScript and CSS
      Remove unnecessary characters from code to reduce its size thereby improving load times.
      UseYUI Compressor, JSLint, Minify
    • 7) Remove Duplicate Scripts
      It hurts performance and increases requests to include the same JavaScript file twice in one page.
    • 8) Flush the Buffer Early
      In PHP you have the function flush(). It allows you to send your partially ready HTML response to the browser
      The browser can start fetching components while your backend is busy with the rest of the HTML page.
      The benefit is mainly seen on busy backends or light frontends.
    • 9) Use GET for AJAX Requests
      When we use XMLHttpRequest for AJAX request, POST method is implemented in the browsers as a two-step process: sending the headers first, then sending data
      So it's best to use GET, which only takes one TCP packet to send (unless you have a lot of cookies)
    • 10) Optimize Images
      Check the GIFs and see if they are using a palette size corresponding to the number of colors in the image.
      Try converting GIFs to PNGs and see if there is a saving.
      Run pngcrush on all your PNGs.
      Run jpegtran on all your JPEGs.
    • 11) Don't Scale Images in HTML
      Don't use a bigger image than you need just because you can set the width and height in HTML.
      If you need <img width="100" height="100" src="mycat.jpg" alt="My Cat" /> then your image should be 100x100px rather than a scaled down 500x500px image.
    • YslowPlugin
      http://developer.yahoo.com/yslow
    • Google Page Speed
      http://code.google.com/speed/page-speed/
    • More Rules at Yahoo, Google
      http://developer.yahoo.com/performance
      http://code.google.com/speed/page-speed/docs/rules_intro.html
    • Thank you for your listening
    • Question