随心笔客

If it’s taking more than 3 seconds then you should be really worried about your site speed. Because No-one really likes slow loading websites.

There is no meaning of doing all the hard work to produce amazing content because if your website is too slow to load, the user is going to get bounced from your website.

So if you are really worried about your website speed and want to optimize it for your user and SEO you are at the right place.

By end of the article, you will be able to boost your page speed so much that any page on your website will be loading within 1-2 seconds.

You can test your page speed at Google PageSpeed Insights. But I personally recommend GTmetrix

Fast-loading sites perform better on all fronts: better user experience, higher conversions, more engagement and even higher search rankings. Page speed becomes more important in case you are targeting mobile traffic(Actually everyone is targeting).

Google does not benefit the fast loading websites. But for sure It penalizes the slow loading website and that means a lot.

Why Page Speed is Important

The reason why it’s important right now is not that end users have noticed. It’s because Google has noticed.

With Google’s introduction of a mobile-first index, page speed is now more important than ever.

In 2006, Amazon reported that for every 100 milliseconds they speed up their website, they see a 1% increase in revenue.

How fast is fast enough?

There are always chances of improvement but it’s great if your page load within 1 second. Still, if you manage to load your page within 3 seconds, you are doing great. But when your page load time is going beyond 3 seconds, You need to pay serious attention towards it.

Over 10 seconds you are losing most of the audience of your site.

What Google say about page speed-

• 47% of people expect a Web page to load in two seconds or less.
• 57% of visitors will abandon a page that takes 3 seconds or more to load.
• At peak traffic times, more than 75% of online consumers left for a competitor’s site rather than suffer delays.
• A site that loads in 3 seconds experiences 22% fewer page views, a 50% higher bounce rate, and a 22% fewer conversions than a site that loads in 1 second. While a site that loads in 5 seconds experiences 35% fewer page views, a 105% higher bounce rate, and 38% fewer conversions.

Here I am listing some of the important factors. After fixing these I am pretty much sure that your page will be loaded in 1-2 seconds.

1. Minified CSS/JavaScript

By minifying(removing spaces, commented code) CSS and JavaScript file you can increase your page speed. And you don’t have to do it manually, There are a lot of free tool available which gives you compressed code. Personally, I use Javascript-minifier.

Google recommends using YUI Compressor for both CSS and JavaScript compression.

Keep un-minified version of your JavaScript file with you because it’s complex to work on a compressed JavaScript code.

2. Loading Resources Asynchronously

For most of the website, the time consumed in loading a page is consumed by images/CSS/JS

Loading Resources(CSS/JS) asynchronously make your Web pages amazingly fast. Because your content will not be waiting for any resource to be loaded.

If you manage to load them asynchronously, It will impact the speed amazingly.

3. Enable compression

Compression reduces response times by reducing the size of the HTTP response. Gzipping generally reduces the response size by about 70% . Some caching extensions/plugins do it automatically, sometimes you need to set it up manually at the Web server level.

So make sure you are using gzipped version of your HTML, CSS and JavaScript files to reduce the size.

This will really improve your page speed.

4. The sequence of CSS and JavaScript

It is preferable for performance that JavaScript files, as well as CSS files, are loaded in the footer of your site so that they don’t block the downloading of other assets on your site, therefore slowing it down.

You may need to load some CSS files in the header because in absence of these CSS your page will load broken or just white content until the CSS is loaded. The same case is for the jquery.js

5. Using CDN

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, When a user visits your site from India, they are downloading files from the server that is closest to them. Because the bandwidth is spread across so many different servers. Its really going to help you to improve the page speed.

Hosting your media files on a content delivery network is one of the best ways to speed up your site, and can often save up to 60% bandwidth and halve the number of requests your website makes.

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.

You can use MAXCDN or Amazon CloudFront.

6. Optimise your HTML

Always try to show more content using less HTML. Google also calculate the text to the content ratio which tells how much HTML you are writing to show a piece of content.

Make sure your page view source (press CTRL+U for view source) have the least space.

Always use margin/padding instead of a lot of nbsp’s. Try to remove commented text from the source. These all increase the size of your page and it takes more time to load more content. Also, try to ignore on-page CSS and JavaScript.

7. W3c validate

Most of the website doesn’t validate this But trust me it is one of the most important factors affecting your page speed. Make sure your content is W3c validated.

If your HTML is W3c validated means your HTML is more structured and authentic. It will help browser to understand and structure the HTML of your page.

8. Use a Fast Hosting Server

If you have a decent amount of traffic, you should not be on hosts like Bluehost, Hostgator, GoDaddy and other low-budget Web hosts like that.

There are a lot of premium hosting service provider with awesome speed. Using them you can boost your page speed amazingly.

• WP Engine – Web hosting made for WordPress. Blazing fast, fanatic support, stuff that dreams are made of. If you run WordPress and want a fast site, this is it.
• AWS – My favorite. It’s just amazing. You can use AWS for free for one year.
• LiquidWeb – Shared hosting, dedicated hosting, cloud hosting, CDN. They have it all.

9. Minimize 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
Location: http://example.com/newuri
Content-Type: text/html

The main thing to remember is that redirects slow down the user experience. Inserting a redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived.

One of the most wasteful redirects happens frequently and Web developers are generally not aware of it. It occurs when a trailing slash (/) is missing from a URL that should otherwise have one.

For example, going to http://yahoo.com/astrology results in a 301 response containing a redirect to http://yahoo.com/astrology/ (notice the added trailing slash). This is fixed in Apache by using Alias or mod_rewrite, or the DirectorySlash directive if you’re using Apache handlers.

10. Avoid using @import CSS

@import uses up more resource than directly linking to your stylesheets despite achieving the exact same result. Another reason why not to use @import is that some of the older browsers do not support it, so it’s best to avoid it where possible.

Another reason why not to use @import is that some of the older browsers do not support it, so it’s best to avoid it where possible.

11. Add Expire headers or a Cache-Control Header

Expires headers tell the browser whether a resource on a website needs to be requested from the source or if it can be fetched from the browser’s cache.

When you set an expires header for a resource, such as all jpeg images, the browser will store those resources in its cache.

Next time the visitor comes back to the page it will load faster, as the browser will already have those images available,
There are two aspects to 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.
Expires headers speed up your site in two ways. First of all, they reduce the need for users to download the same files from your Web server twice.

Secondly, it reduces the number of HTTP requests that need to be made, further speeding up the time it takes for the page to load.
Adding Expires Headers is extremely easy. You just need to follow the instructions here to add a bit of code to your .htaccess file.

Keep in mind if you use a far future Expires header you have to change the component’s filename whenever the component changes.

12. Specify Image Dimensions

Before your browser can display your Web page it has to figure out how to lay out your content around your images.

Without knowing the size of these images the browser works it out, causing it to work harder and take longer.

Specifying your image dimensions saves the browser having to go through this step, which helps to speed things up.

To specify height and width in elements, use height and width tags specifications.

13. Enable keep alive

HTTP Keep-Alive refers to the message that’s sent between the client machine and the Web server asking for permission to download a file.

Enabling Keep-Alive allows the client machine to download multiple files without repeatedly asking permission, which helps to save bandwidth.

To Enable Keep-Alive, simply add this code in your .htaccess file

Header set Connection keep-alive

14. Specify a character set

Specify a character set in HTTP headers to speed up browser rendering. This is done by adding a simple piece of code to your header:

15. Remove Query String

Remove query strings from your static content because the browser can’t cache a link with ? in the URL. So it will improve your page speed.

16. Serve Resources from Less Different Domains

Sometimes you are using more and more plugins on your site because of the functional requirement, But unknowingly you are using resources from a lot of the domains.

The browser has to make a new connection for every domain which is also time taking. So avoid loading your content from different servers. If you have to, download CSS, JS, images and upload these to CDN or your own server.

Conclusion

There are other ways to improve the speed of a Web page, but I have tried to write about the most important ones which even professional bloggers (like SEOmoz) can sometimes overlook.

Of course, site speed is not the main goal but even an ideal website with a bad load time will find it hard to achieve success. So always try to improve page speed and run the fastest website you can in order to reach your goals faster.

感谢原作者，博客转自（墙外）：http://acmeextension.com/improve-page-speed/