Top Ways To Speed Up Your Website

Sharing is caring!

software development, social media optimization services in noida, software outsourcing company in Noida, affordable seo company in noida, IT outsourcing company in india, offshore software development company in noida,  seo outsourcing services in noida, software development consulting company in noida, outsource web development, seo web design company, ecommerce software development in noida, ecommerce software services in noidaThink 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:

CSS Sprites:

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.

6. Minify JavaScript and CSS

Minification is the process of removing unwanted characters from code to reduce its size thereby improving load times. When code is minified all comments and unneeded white space characters (space, newline, and tab) are removed. In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced. There are two popular tools available for minifying JavaScript code are JSMin and YUI Compressor. The YUI compressor can also minify CSS.

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

CSS expressions were introduced in Internet Explorer (IE) 5.0 and it allows you to to assign the JavaScript expressions to a CSS property. It is called as dynamic properties means it dynamically changes the document properties in response to various events. But in the web pages there are some problems occurs due to these expressions. The problem with the expressions is that they are evaluated more frequently than most people expect. Not only are they evaluated when the page is rendered and resized, but also when the page is scrolled and even when the user moves the mouse over the page.

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.

10. Make JavaScript and CSS External

Using external JavaScript and CSS files in the real world generally produces faster response of pages. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. So, it reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.

11. Remove Duplicate Scripts

It decrease the performance to include the same JavaScript file twice in one page. There are two main factors that should be keep in mind: low team size and low number of script. Duplicate scripts hurt performance by creating unnecessary HTTP requests and wasted JavaScript execution.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *