•No matter how beautiful your site is, your website page speed is critical to success.
Not only do faster load times help boost search engine rankings, but 40% of people will abandon a site if it takes longer than three seconds to load. To make matters worse, every extra second your site takes to load will cause a 7% decrease in your conversion rate.
•Well, I’ve used the techniques below to optimize Quick Sprout, and I’ve improved my load time by five seconds. Results, of course, vary, but if you follow the techniques below, you can expect anywhere from four to six seconds in time savings.
•For starters, the key to faster pages is reducing the front-end load time. For the end-user, 80% of the response time is tied up in HTTP requests. This is the performance golden rule. That means you have to minimize those requests.
Here’s how to do that:
•Simplicity – Make the page design simple. One or two images and text. But you probably want richer components on your site.
Combination – Taking all the scripts and piling them into a single script and, similarly, combining all CSS into a single stylesheet.
•The rest of the performance techniques I’ll share with you will also render HTTP requests lower.
Combine images with CSS sprites
•If you have many images on your page, you are forcing multiple roundtrips of the server to get all the resources secured. This slows down page speed.
•Sprites combine all background images on a page into one single image. The proper image segment will be displayed because of the CSS background-image and background-position properties.
CSS sprites reduce:
•Delays caused by roundtrips made as the server is downloading other resources.
•Total number of bytes a page downloads.
You can use a service like SpriteMe to make this process easy. Otherwise, you can follow the sprite recommendations made by Google.
•You still need to optimize your content for compression. There are two things you need to do to make sure your web content compresses effectively:
•Create consistency across your HTML and CSS code. This happens when you:
Order the CSS key-value pairs in a common sense way, e.g., alphabetically.
Do the same with your HTML attributes.
Be consistent with your casing and use lowercase as often as possible.
•Make sure you are consistent with your HTML tag attribute quotes.
Spread your static content with CDNs
•Because the location of the user impacts page load speed, spreading your content across servers will speed up this process. You can use a content delivery network (CDN) to make this happen.
•What exactly is a CDN? It’s just a collection of servers that exist at different places in the world. CDNs do two things:
•Send files faster – Cached files are sent from locations that are closer to the specified user.
Shrink file size – CDNs deliver content that is without cookies. No bloated files.
•For example, a CDN service provider could have servers in California, New York, Sweden and Hong Kong. When a user accesses your site, the server with the fastest network hops or quickest response time delivers the content. Someone in the Philippines might get served from Hong Kong. Someone in Mexico might get served content from California.
•Using a CDN is a pretty simple code change, but it can be expensive. And while some large Internet providers have their own CDN, it’s best to use a service provider devoted to CDNs.
Leverage browsing caching by using “expires” headers
•Any time someone visits your website, his or her browser will store a ton of files like stylesheets, scripts and images onto that persons’ hard drive. That will reduce the number of HTTP requests and speed things up next time that person visits your site.
•Those files have an expiration date in the header. This is known as “expires” headers. By default, that expiration date could be set to 24 hours, meaning it will update every day. Very few, if any, websites need that short of an expiration date.
There are two things about this rule you have to keep in mind:
•Static components – Set a “Never expire” policy far into the future. These components become cachable, avoiding time-consuming and unnecessary HTTP requests. “Expires” headers should be used for images, Flash, scripts and stylesheets.
•Dynamic component – Use a cache-control header to help the browser with conditional requests.
•The “expires” headers will tell a server for how long to cache an item. Most static files should be set to one year into the future
•While websites get richer and cooler, page speed slows down. So, each time you are getting ready to implement a new plug-in, code or rich media, you have to ask yourself:
•What is going to be the impact on page and site speed?
Sacrificing site speed to have the newest tool is probably not worth the money you may lose because of latency issues.