pagespeed 摘要 - Minimize round-trip times

最新推荐文章于 2023-10-17 19:39:34 发布

李亞飛

最新推荐文章于 2023-10-17 19:39:34 发布

阅读量729

点赞数

分类专栏： web 文章标签： resources javascript redirect asynchronous css styles

本文链接：https://blog.csdn.net/louieuser/article/details/7848252

版权

web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

Minimize DNS lookups

The optimal number is somewhere between 1 and 5hosts (1 main host plus 4 hosts on which to parallelize cacheable resources). As a rule of thumb, you shouldn't use more than 1 host for fewer than 6 resources; fewer than 2 resources on a single host is especially wasteful. It should never be necessary to use more than 5 hosts (not counting hosts serving resources over which you have nocontrol, such as ads).

1.Use URL paths instead of hostnames wherever possible.

2.Serve early-loaded JavaScript files from the same hostname as the main document.

It's especially important to minimize lookups in the "critical path". We define the critical path as the code and resources required to render the initial view of a web page.

Minimize redirects

1.Eliminate unnecessary redirects.

Here are some strategies for simply eliminating unnecessary redirects:

Never reference URLs in your pages that are known to redirect to other URLs. Your application needs to have a way of updating URL references whenever resources change their location.

Never require more than one redirect to get to a given resource. For instance, if C is the target page, and there are two different start points, A and B, both A and B should redirect directly to C; A should never redirect intermediately to B.

Minimize the number of extra domains that issue redirects but don't actually serve content. Sometimes there is a temptation to redirect from multiple domains in order to reserve name space and catch incorrect user input (misspelled/mistyped URLs). However, if you train users into thinking they can reach your site from multiple URLs, you can wind up in a costly cycle of buying up new domains just to stop cybersquatters from taking over every variant of your name.

2.Use server rewrites for user-typed URLs.

3.Track web traffic in the background

<scripttype="text/javascript">

var thisPage =location.href;

var referringPage= (document.referrer) ? document.referrer : "none";

var beacon = newImage();

beacon.src ="http://www.example.com/logger/beacon.gif?page=" + encodeURI(thisPage)

+"&ref=" + encodeURI(referringPage);

</script>

4.Prefer HTTP overJavaScript or meta redirects.

There are several ways to issue a redirect:

Server-side: You configure your web server to issue a 300 HTTP response code (most commonly 301 ("moved permanently") or 302 ("found"/"moved temporarily")), with a Location header set to the new URL.

Client-side: You include the http-equiv="refresh" attribute in the meta tag or set the JavaScript window.location object (with or without the replace() method) in the head of the HTML document.

Avoid bad requests

1.Avoid using redirects to handle broken links.

Combine external JavaScript

1.Partition files optimally.

Here are some rules of thumb for combining your JavaScript files in production:

Partition the JavaScript into 2 files: one JS containing the minimal code needed to render the page at startup; and one JS file containing the code that isn't needed until the page load has completed.
Serve as few JavaScript files from the document <head> as possible, and keep the size of those files to a minimum.
Serve JavaScript of a rarely visited component in its own file. Serve the file only when that component is requested by a user.
For small bits of JavaScript code that shouldn't be cached, consider inlining that JavaScript in the HTML page itself.

2.Position scripts correctly in the document head.

Combine external CSS

1.Partition files optimally.

Here are some rules of thumb for combining your CSS files in production:

Partition the CSS into 2 files each: one CSS file containing the minimal code needed to render the page at startup; and one CSS file containing the code that isn't needed until the page load has completed.
Serve CSS of a rarely visited component in its own file. Serve the file only when that component is requested by a user.
For CSS that shouldn't be cached, consider inlining it.
Don't use CSS @import from a CSS file.

2.Position stylesheets correctly in the document head.

Combine images using CSS sprites

1.Sprite images that are loaded together

2.Sprite GIF and PNG images first

3.Sprite small images first

4.Sprite cacheable images

5.Using a spriting service SpriteMe

6.Minimize the amount of "empty space" in the sprited image

7.Sprite images with similar color palettes

Optimize the order of styles and scripts

1.Put external scripts after external stylesheets if possible.

2.Put inline scripts after other resources if possible.

Avoid document.write

1.Declare resources directly in HTML markup

2.Prefer asynchronous resources

3.Use "friendly iframes"

Avoid CSS @import

Use the <link> tag instead of CSS @import

Prefer asynchronous resources

1.Use a script DOM element

var node =document.createElement('script');
node.type = 'text/javascript';
node.async = true;
node.src = 'example.js';
// Now insert the node into the DOM, perhaps using insertBefore()

</script>

2.Load Google Analytics asynchronously

Parallelize downloads across hostnames

1.Balance parallelizable resources across hostnames.

2.Prevent external JS from blocking parallel downloads.

3.Always serve a resource from the same hostname.