How to speed up your web site
Upcoming SlideShare
Loading in...5

How to speed up your web site



محاضرة القيتها في الرياض بعنوان: كيف تسرع تحميل موقعك على الإنترنت. بعض النصائح المفيدة التي ستجعل موقع يتم ...

محاضرة القيتها في الرياض بعنوان: كيف تسرع تحميل موقعك على الإنترنت. بعض النصائح المفيدة التي ستجعل موقع يتم تحميلة بسرعة وبدون ان يكلفك باندوث عالي



Total Views
Slideshare-icon Views on SlideShare
Embed Views



2 Embeds 652 651
url_unknown 1



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.

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

    How to speed up your web site How to speed up your web site Presentation Transcript

    • How to Speed Up Your Web Site
      Nawaf Albadia
      Twitter: @nalbadia
      Best Practices & Tips
    • Introduction
      Understanding the Web
      Best Practices
      Image Optimization
      Q & A
    • Disclaimer
      Most of the contents of this presentation are derived from Yahoo’s Best Practices for speeding up web pages that can be found in
    • Understanding the Web
    • Best Practices
      - Minimize HTTP Requests
      Combined files
      Combining all scripts into a single script, and similarly combining all CSS into a single styleshee
      CSS Sprites
      Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment
      Image maps
      Combine multiple images into a single image
      Inline images
      Use the data: URL scheme to embed the image data in the actual page
    • - Use a Content Delivery Network
      80-90% of the end-user response time is spent downloading all the components in the page: images, stylesheets, scripts, Flash, etc
      A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users
      • Add an Expires or a Cache-Control Header
      Static components: implement "Never expire" policy by setting far future Expires header
      Dynamic components: Cache-Control header to help the browser with conditional requests
      Expires: Thu, 15 Apr 2010 20:00:00 GMT
      ExpiresDefault"access plus 10 years"
    • - Gzip & Deflate Compression
      Starting with HTTP/1.1, web clients indicate support for compression with the Accept-Encoding header in the HTTP request.
      Accept-Encoding: gzip, deflate
      The web server notifies the web client of this via the Content-Encoding header in the response.
      Content-Encoding: gzip
      • Put Stylesheets at the Top
      Moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.
    • - Put Scripts at the Bottom
      The problem caused by scripts is that they block parallel downloads
      • Avoid CSS Expressions
      The problem with expressions is that they are evaluated more frequently than most people expect
      background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
      • Make JavaScript and CSS External
      Produces faster pages because the JavaScript and CSS files are cached by the browser.
      JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested.
      This reduces the number of HTTP requests that are needed, but increases the size of the HTML document.
      On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.
    • - Reduce DNS Lookups
      • Minify JavaScript and CSS
      Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times
      • Don't Scale Images in HTML
      <img width="100" height="100" src="mycat.jpg" alt="My Cat" />
      • Avoid Redirects
      Redirects are accomplished using the 301 and 302 status codes. Here's an example of the HTTP headers in a 301 response:
      HTTP/1.1 301 Moved Permanently
      Content-Type: text/html
    • - Remove Duplicate Scripts
      <script type="text/javascript" src="menu_1.0.17.js"></script>
      An alternative in PHP would be to create a function called insertScript.
      <?phpinsertScript("menu.js") ?>
      • Configure ETags
      HTTP/1.1 200 OK
      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
      ETag: "10c24bc-4ab-457e1c1f"
      Content-Length: 12195
      Later, if the browser has to validate a component, it uses the If-None-Match header to pass the ETag back to the origin server. If the ETags match, a 304 status code is returned reducing the response by 12195 bytes for this example.
      GET /i/yahoo.gif HTTP/1.1
      If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
      If-None-Match: "10c24bc-4ab-457e1c1f"
      HTTP/1.1 304 Not Modified
      • Make Ajax Cacheable
    • - Flush the Buffer Early
      When users request a page, it can take anywhere from 200 to 500ms for the backend server to stitch together the HTML page. During this time, the browser is idle
      Good practice
      ... <!-- css, js -->
      <?php flush(); ?>
      <body> ... <!-- content -->
      • Use GET for AJAX Requests
      XMLHttpRequest, POST is implemented in the browsers as a two-step process
      • Reduce the Number of DOM Elements
      DOM (HTML Tags)
    • - Split Components Across Domains
      Splitting components allows you to maximize parallel downloads
      • Minimize the Number of iframes
      <iframe> pros:
      * Helps with slow third-party content like badges and ads
      * Security sandbox
      * Download scripts in parallel
      <iframe> cons:
      * Costly even if blank
      * Blocks page onload
      * Non-semantic
      • Avoid 404s Error Code
      • Reduce Cookie Size
    • - Minimize DOM Access
      * Cache references to accessed elements
      * Update nodes "offline" and then add them to the tree
      * Avoid fixing layout with JavaScript
      • Choose <link> over @import
      <link href="styles.css" type="text/css" />
      <style type="text/css">@import url("styles.css");</style>
      • Avoid Filters
      IE-proprietary AlphaImageLoader
      • Make favicon.ico Small and Cacheable
      • Avoid Empty Image src
      • Keep Components under 25K
    • Optimize Images
      JPEG: a lossy format with tunable compression. JPEG is best suited for imagery layers, where the pixel color varies continuously from one pixel to the next one.
      PNG:A non lossy format allowing for both full color and paletted. The full color version is sometimes referred as PNG24, the paletted version as PNG8.
      GIF: A non lossy format with a 256 colors palette, best suited for vector layers. Does not support translucency, but allows for fully transparent pixels.
    • Optimize Images
      Try converting GIFs to PNGs
      Run pngcrush (or any other PNG optimizer tool) on all your PNGs
      Run jpegtran on all your JPEGs
      Try to save your image in a different settings.
    • Tools
    • Demo
    • Q & A