Best_Practices_for_Speeding_Up_Your_Web_Site
5星 · 超过95%的资源 需积分: 9 76 浏览量
2008-06-20
14:47:32
上传
评论
收藏 364KB PDF 举报 
Performance | Best Practices | YSlow | Blog | Group | Feedback
Minimize HTTP Requests
tag: content
80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images,
stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is
the key to faster pages.
One way to reduce the number of components in the page is to simplify the page's design. But is there a way to build pages with richer content while
also achieving fast response times? Here are some techniques for reducing the number of HTTP requests, while still supporting rich page designs.
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. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release
process improves response times.
CSS Sprites
are the preferred method for reducing the number of image requests. 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. The overall size is about the same, but reducing the number of HTTP requests speeds up
the page. Image maps only work if the images are contiguous in the page, such as a navigation bar. Defining the coordinates of image maps can be
tedious and error prone. Using image maps for navigation is not accessible too, so it's not recommended.
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. Combining
inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet
supported across all major browsers.
Reducing the number of HTTP requests in your page is the place to start. This is the most important guideline for improving performance for first time
visitors. As described in Tenni Theurer's blog post Browser
Cache Usage - Exposed!, 40-60% of daily visitors to your site come in with an empty cache.
Making your page fast for these first time visitors is key to a better user experience.
top
| discuss this rule
Use a Content Delivery Network
tag: server
The user's proximity to your web server has an impact on response times. Deploying your content across multiple, geographically dispersed servers will
make your pages load faster from the user's perspective. But where should you start?
As a first step to implementing geographically dispersed content, don't attempt to redesign your web application to work in a distributed architecture.
Depending on the application, changing the architecture could include daunting tasks such as synchronizing session state and replicating database
transactions across server locations. Attempts to reduce the distance between users and your content could be delayed by, or never pass, this
application architecture step.
Remember that 80-90% of the end-user response time is spent downloading all the components in the page: images, stylesheets, scripts, Flash, etc.
This is the Performance Golden Rule. Rather than starting with the difficult task of redesigning your application architecture, it's better to first disperse
your static content. This not only achieves a bigger reduction in response times, but it's easier thanks to content delivery networks.
A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The
server selected for delivering content to a specific user is typically based on a measure of network proximity. For example, the server with the fewest
network hops or the server with the quickest response time is chosen.
Some large Internet companies own their own CDN, but it's cost-effective to use a CDN service provider, such as Akamai Technologies
, Mirror Image
Internet, or Limelight Networks. For start-up companies and private web sites, the cost of a CDN service can be prohibitive, but as your target audience
grows larger and becomes more global, a CDN is necessary to achieve fast response times. At Yahoo!, properties that moved static content off their
application web servers to a CDN improved end-user response times by 20% or more. Switching to a CDN is a relatively easy code change that will
dramatically improve the speed of your web site.
top
| discuss this rule
Add an Expires or a Cache-Control Header
tag: server
There are two things in this rule:
z For static components: implement "Never expire" policy by setting far future Expires header
z For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests
Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page. A first-time visitor to your page
may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP
requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts,
stylesheets, and Flash components.
Browsers (and proxies) use a cache to reduce the number and size of HTTP requests, making web pages load faster. A web server uses the Expires
header in the HTTP response to tell the client how long a component can be cached. This is a far future Expires header, telling the browser that this
response won't be stale until April 15, 2010.
Best Practices for Speeding Up Your Web Site
Exceptional Performance : Best Practices for Speeding Up Your Web Site
The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 34 best practices divided
into 7 categories.
Filter rules by category: content server cookie css javascript images mobile all
Page 1 of 9Best Practices for Speeding Up Your Web Site
2008-6-20
评论1
最新资源