Think the speed of your website doesn’t matter! In 2006, Amazon reported that every 100 milliseconds they speed up their website, they see a 1% increase in revenue. Then Google announced, in an effort to improve the web, that page speed was a consideration in how they rank search results.
A slow website is bad not only for the end-user, but also for search engine optimization. Meaning, the slow website can cause to rank lower in search engine results.
1. Minimize HTTP Requests
According to the report of Yahoo, 80% of a Web page’s load time is spent downloading the different components of the page: scripts, Flash, images, stylesheets, etc. When an HTTP request is made for each one of these components, the more on-page elements, the longer it takes for the page to render. This is the most important key to faster the pages.
Simplifying the web page design is one of the best ways to speed up the pages.
Tips to fast the web pages:
Start to combine the files by combining all scripts into a single script, and similarly combining all CSS into a single style-sheet. Combining files are the most challenging job but making this improves your response time.
There are various other methods to increase the response rate of your website:
It is 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.
Inline Images Use The Data:
Accoring to Yaghoo, combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages.
2. Use a Content Delivery Network
A content delivery network (CDN) is a large collection of web servers dispense across multiple locations to deliver content more efficiently to users. The server selected specific user for delivering content 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.
3. Add Expires or Cache Control Header
There are main two different aspects of 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
Since web page design comprises many components like scripts, stylesheets, images, and Flash in the page. When you first visit a website, the elements on the page you visit are stored on your hard drive in a cache, or temporary storage, so the next time you visit the site, your browser can load the page without having to send another HTTP request to the server. For all these cacheable resources (JS and CSS files, image files, media files, PDFs, etc.), set Expires to a minimum of one week, and preferably up to one year in the future. Don’t set it to more than one year in the future because that violates the RFC guidelines.
4. Gzip Components
Gzip is the most popular and effective compression method at this time. The only other compression format you’re likely to see is deflate, but it’s less effective and less popular. G zipping generally reduces the response size by about 70%. Approximately 95% of today’s Internet traffic travels through browsers that claim to support gzip.
5. Put Stylesheets at the Top
Putting 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.
7. Put Scripts at the Bottom
The general problem caused by scripts is that they block parallel downloads. According to HTTP/1.1 specification, browsers download no more than two components in parallel per hostname. If you serve your images from multiple host-names, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on various host-names.
In some situations it’s not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page’s content, it can’t be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.
An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering.
8. Avoid CSS Expressions
9. Avoid Redirects
Redirects are accomplished using the 301 and 302 status codes. The main thing to remember is that redirects slow down the response rate. 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.
11. Remove Duplicate Scripts
12. Make favicon icon Small and Cacheable
The favicon icon is an small image that stays in the root of your server. It’s a necessary evil because even if you don’t care about it the browser will still request it, so it’s better not to respond with a 404 Not Found. So to mitigate the drawbacks of having a favicon icon make sure it is of very small size less than 1k.
13. Configure Etags
Etag is a string that uniquely identifies a specific version of a component. Entity tags (ETags) are a mechanism that web servers and browsers use to determine whether the component in the browser’s cache matches the one on the origin server.
14. Optimize CSS Sprites
There are three different methods to optimize the CSS Sprites:
Arrange the images in the sprite horizontally as opposed to vertically usually results in a smaller file size.
Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8.
“Be mobile-friendly” and don’t leave big gaps between the images in a sprite. This doesn’t affect the file size as much but requires less memory for the user agent to decompress the image into a pixel map. 100×100 image is 10 thousand pixels, where 1000×1000 is 1 million pixels
The Bottom Line:
Some of these tips are easy to implement, but a few are advanced tactics that can be intimidating if you aren’t technically inclined. If that’s the case, you might want to get help, contact to Vibrantworx.
Now it’s your turn. Have you come up with a unique way to speed up your website? Share your tips below.