28.Serve static content from a cookieless domain: To increase the loading speed of a website, you need to setup your website to serve the static content, such as images and css files, from a cookieless domain. This will speed up your page loads by reducing unnecessary traffic and distributing the traffic across more two addresses instead of one, working around the limit that browsers place on how many simultaneous requests can be made on each address. As described by Yahoo!, when the browser requests a static image and sends cookies with the request, the server ignores the cookies. These cookies are unnecessary network traffic. For more about cookieless domains read our post – How to use cookie-free domains for static content
29.Specify a Cache Validator: If you are seeing the “Specify a cache validator” warning on your website. This is due to missing HTTP caching headers which should be included on every origin server response, as they both validate and set the length of the cache. If the headers aren’t found, it will generate a new request for the resource every time, which increases the load on your server. Utilizing caching headers ensures that subsequent requests don’t have to be loaded from the server, thus saving bandwidth and improving performance for the user. For more about cache validator click here – How to specify a cache validator for a webpage in PHP
30.Specify a character set early:A character set is essentially a set of characters represented by numbers for a computer. For example in the ASCII character set the numbers 0-127 are used to represent all English characters as well as special control characters. It’s important to specify a character set in the HTTP response headers of your HTML documents to allow the browser to begin parsing HTML and executing scripts immediately. Without specifying a character set the browser is left to figure it out on its own which takes time and therefore negatively impacts your page load times. Web developers should specify the CHARSET in the HTTP Content-Type response header, as this ensures that the performance benefit of the Lookahead Downloader is realized.
How to Specify a character set?
In order to avoid using meta tags you must set the Character Set from the Server. This is the most efficient method to set the character set, because you don’t need to set it for every page. Set your server to send a Content-Type header for all documents it serves that are of type text/html. For example:
Charset is where you set your character type.
31.Specify a Vary: Accept-Encoding header: Bugs in some public proxies may lead to compressed versions of your resources being served to users that don’t support compression. Specifying the Vary: Accept-Encoding header instructs the proxy to store both a compressed and uncompressed version of the resource.
32.Specify a viewport for mobile browsers: The viewport meta tag is a way to let developers control how a user’s browser will display a page, specifically the size and scale of the page. Since mobile viewing of a website is now common place, the popularity of this particular tag has increased.
The following is an example of the viewport meta tag in use.
<meta name=”viewport” content=“width=device-width, initial-scale=1, maximum-scale=1”>
</head>
The width property determines the size of the page. You can either specify a particular size, such as width=500 (if you want the width to be 500px), or you can set it to ‘device-width’ if you want the width to be the size of the window when it is at a scale of 100%. The ‘initial-scale’ property controls the zoom level on initial page load. The ‘maximum-scale’ property controls the max limitation of zooming.
33.Specify image dimensions: When the browser lays out the page, it needs to be able to flow around replaceable elements such as images. It can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. If no dimensions are specified in the containing document, or if the dimensions specified don’t match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML <img> tag, or in CSS.
34.Use an application cache: The application cache allows you to specify which files should be cached by a user’s browser. By caching specific files, you are making these files available to the user while they are offline.
How to enable the Application Cache?
To enable the cache, you need to add a manifest attribute to your file’s html tag. This attribute needs to be on every page that you want cached. Your browser immediately knows to cache a document if it has a manifest attribute on the html tag.
Below is an example of an added manifest attribute, specifying an application cache.
<head>
</head>
<body>
<p>My html document</p>
</body>
</html>
structure of the manifest file
The first line of the manifest must be CACHE MANIFEST, and the following must specify files which should be cached on the particular page.
about.html
src/example.js
css/style.css
images/sprite_map.png
This is a very basic structure for a cache manifest, and there are many more options which can be included in the manifest file.
YSlow
Slow is an open source project and tool that analyzes web pages and helps you figure out why they are slow based on Yahoo!’s rules for high performance websites. It is currently maintained by Marcel Duran, who is also involved in the WebPageTest project. It is important to note that YSlow is rarely being updated anymore. According to GitHub the last commit from Marcel was on March 15th, 2014. However the scores and advice the tool gives you can still be very helpful and when working with clients unfortunately sometimes they do request you improve certain scores. YSlow has 23 different rules that it runs your website against to grade it.
Rules that comes under YSlow tool:
1.Add Expires headers: Expires headers tell the browser whether they should request a specific file from the server or whether they should grab it from the browser’s cache. The whole idea behind Expires Headers is not only to reduce the load of downloads from the server but rather to reduce the number of HTTP requests for the server. The idea is to set late expiry times for items that don’t change on your website (logo, colours etc). Set short expiry times for things that change regularly. For more about Expires headers click this link – How to add Expires headers
2.Avoid AlphaImageLoader filter: AlphaImageLoader is a technique used to support transparent PNG files on older versions of Internet Explorer. It is probably used in the CSS of your Magento theme. It should only affect IE6, so you’re probably best off ignoring the warning of use of AlphaImageLoader filter. this filter blocks rendering and freezes the browser while the image is being downloaded. Additionally, it increases memory consumption. The problem is further multiplied because it is applied per element, not per image.
3.Avoid CSS expressions: CSS expressions (supported in IE beginning with Version 5) are a powerful but dangerous way to dynamically set CSS properties. Internet Explorer 5 introduced CSS expressions, or “dynamic properties”, as a means of dynamically changing document properties in response to various events. They consist of JavaScript expressions embedded as the values of CSS properties in CSS declarations. For the most part, they are used for the following purposes:
Unfortunately, the performance penalty imposed by CSS expressions is considerable, as the browser reevaluates each expression whenever any event is triggered, such as a window resize, a mouse movement and so on. The poor performance of CSS expressions is one of the reasons they are now deprecated in IE 8. If you have used CSS expressions in your pages, you should make every effort to remove them and use other methods to achieve the same functionality.
4.Avoid empty src or href: You might expect a browser to do nothing when it encounters an element with an empty src or href attribute, however this is not the case in a considerable number of browsers. As of 2016, IE and Edge will both make a request to the page’s parent directory, while Firefox and older Webkit browsers (like Safari) will re-request the page itself! This behavior could potentially corrupt user data, waste server computing cycles generating a page that is never viewed, or in the worst case, cripple your servers by sending them a large amount of unexpected traffic.
Example of empty src or href in HTML code:
<script src=“”></script>
<link href=“”/>
Example of empty src or href in javascript:
var img = new Image();
img.src = “”;
</script>
Example of empty src or href in CSS:
background-image: url();
</style>
5.Avoid HTTP 404 (Not Found) error: Technically, an Error 404 is a client-side error, implying that the error is your mistake, either because you typed the URL incorrectly or the page has been moved or removed from the website and you should have known.
Another possibility is if a website has moved a page or resource but did so without redirecting the old URL to the new one. When that happens, you’ll receive a 404 error instead of being automatically routed to the new page.
How to avoid HTTP 404 (Not Found) error?
You should redirect the page to a main page of your site (or a page that displays a message saying “Sorry but this page is no longer updated. Please visit our homepage or contact us for more information”). Another option is to check with your hosting company to see if they offer a 404 redirect. Then, when a user enters the URL of any page off your domain that doesn’t exist, they are automatically taken to a specified page, such as your index or home page. It’s the easiest way to ensure that a potential customer is never lost due to a page not being found. Another good idea is to resubmit new pages to search engines for reindexing. Although it’s nice to inform visitors that a page they’re looking for no longer exists, it’s even better to have the new page with all the information the visitor wants appear when they perform a search.
6.Avoid URL redirects: URL redirection, also called URL forwarding, is a World Wide Web technique for making a web page available under more than one URL address. When a web browser attempts to open a URL that has been redirected, a page with a different URL is opened.
Whenever you change the URL of one of your store’s pages, you run the risk that customers could return to their bookmarks and saved links and find them broken. URL redirection is a technique for making a web page direct a visitor to a new URL address. For more information about URL redirects and how to avoid them go to our link – How to avoid URL redirects for faster loading of webpages
7.Configure entity tags (ETags): Entity tags, also commonly referred to as ETags, are cache validators which help the browser determine if it can retrieve the requested resource from local cache or if it must be retrieved from the server. This mechanism helps improve loading times since if the resource can be retrieved from local cache, the browser does not need to make an additional request to the server.
How to Configure Entity Tags (ETags)?
This section shows the simple process of how to configure entity tags (ETags) on your origin server. For those using Apache 2.4 or higher, there is no configuration required as Apache has updated the FileETag directive. However, to configure entity tags (ETags) for websites running on older versions of Apache, the INode portion of the Etag can be stripped by modifying the snippet within your httpd.conf file from
to
This will remove the first section of the ETag and will leave you with something similar to b438-524daace96280. Now that there is no server component within the ETag, this fixes the multiple server issue.
8.Do not scale images in HTML: Scaling images in HTML can result in unnecessary bandwidth wasted downloading large images. Do not use HTML to scale your images. This mainly applies to making images smaller by setting the width and height attributes in your code. If you need a smaller image, just make the image smaller and reduce the file size.
Yahoo does not comment on this, but it is ok to scale up certain images in HTML. For example, a background image that repeats could be scaled in HTML. This would allow you to use a smaller file size.
From the server side, making files smaller means they get served faster. By serving files faster, you free up resources to serve more files, thus improving sever loads and site speed.
9.Make AJAX cacheable: AJAX is extensively used on all modern web applications. The ability to grab content on the fly using asynchronous calls improves user experience by providing a native desktop application feel. You can enhance the user experience by optimizing your AJAX calls. Remember, AJAX does not guarantee that the user will receive the response instantly. The most simple way to enhance AJAX performance is to make AJAX response cacheable. For more about making Ajax cacheable read our post – How to make Ajax cacheable for website optimization
10.Make favicon small and cacheable: The favicon.ico is an 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. Also since it’s on the same server, cookies are sent every time it’s requested. This image also interferes with the download sequence, for example in IE when you request extra components in the onload, the favicon will be downloaded before these extra components.
How to make favicon small and cacheable?
Optimizing your favicon by making it cacheable can avoids frequent requests for it. So it is important to leverage browser caching by adding expire headers and utilizing cache-control. Another recommendation is to load your favicon from your CDN. YSlow also has a recommendation of trying to keep your favicon under 1 KB. If anything, just try to keep you favicon as small as possible.
11.Make fewer HTTP requests: Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages. This is the most important guideline for improving performance for first time visitors. 40-60% of daily visitors to your site come in with an empty cache. Making your page fast for these first time visitors is key to a better user experience.
How to decrease the number of HTTP requests?
Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times. CSS Sprites are 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.
12.Make JavaScript and CSS external: JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This 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. If users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files.
13.Put CSS at the top: Moving 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. The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. This is especially important for pages with a lot of content and for users on slower Internet connections. The importance of giving users visual feedback, such as progress indicators, has been well researched and documented. In our case the HTML page is the progress indicator! When the browser loads the page progressively the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience.
14.Put JavaScript at bottom: JavaScript scripts block parallel downloads. That is, when a script is downloading, the browser will not start any other downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, 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 different hostnames. 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.
15.Reduce cookie size: HTTP cookies are used for a variety of reasons such as authentication and personalization. Information about cookies is exchanged in the HTTP headers between web servers and browsers. It’s important to keep the size of cookies as low as possible to minimize the impact on the user’s response time. For reducing cookie size you can follow this steps:
16.Reduce DNS lookups: The Domain Name System (DNS) maps hostnames to IP addresses, just like phonebooks map people’s names to their phone numbers. When you type URL http://www.yahoo.com into the browser, the browser contacts a DNS resolver that returns the server’s IP address. DNS lookups are cached for better performance. This caching can occur on a special caching server, maintained by the user’s ISP or local area network, but there is also caching that occurs on the individual user’s computer. The DNS information remains in the operating system’s DNS cache (the “DNS Client service” on Microsoft Windows). Most browsers have their own caches, separate from the operating system’s cache. As long as the browser keeps a DNS record in its own cache, it doesn’t bother the operating system with a request for the record. Internet Explorer caches DNS lookups for 30 minutes by default, as specified by the DnsCacheTimeout registry setting. Firefox caches DNS lookups for 1 minute, controlled by the network.dnsCacheExpiration configuration setting. Reducing the number of unique hostnames has the potential to reduce the amount of parallel downloading that takes place in the page. Avoiding DNS lookups cuts response times, but reducing parallel downloads may increase response times.
17.Reduce the number of DOM elements: The DOM is the way Javascript sees its containing pages’ data. It is an object that includes how the HTML/XHTML/XML is formatted, as well as the browser state. A DOM element is something like a DIV, HTML, BODY element on a page. You can add classes to all of these using CSS, or interact with them using JavaScript. A high number of DOM elements can be a symptom that there’s something that should be improved with the markup of the page without necessarily removing content. Are you using nested tables for layout purposes? Are you throwing in more <div>s only to fix layout issues? Maybe there’s a better and more semantically correct way to do your markup. The number of DOM elements is easy to test, just type in Firebug’s console:
18.Remove duplicate JavaScript and CSS: Different web browsers handle multiple instances of the same script on one page differently. Firefox is the only browser that downloads the script as many times as it is present on the page unless it is specifically cacheable. However all browsers cannot deal accordingly with the execution of the script and do it as many times as it exist. Sometimes more than one instance of the script is available on the same page because there is a widget that has added the script more than once. Duplicated scripts hurt the performance by executing the same content more than once. In both IE and Firefox, duplicate JavaScript scripts cause wasted time evaluating the same scripts more than once. This redundant script execution happens regardless of whether the script is cacheable. In IE, if an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. Even if the script is cacheable, extra HTTP requests occur when the user reloads the page.
You can remove duplicated JavaScript and CSS from your website by creating a function called insertScript:
19.Use a Content Delivery Network : 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, the server with the fewest network hops or the server with the quickest response time is chosen.
As a first step to implementing geographically dispersed content, don’t attempt to redesign your web application to work in a distributed architecture. Depending on the application, changing the architecture could include daunting tasks such as synchronizing session state and replicating database transactions across server locations. Attempts to reduce the distance between users and your content could be delayed by, or never pass, this application architecture step.
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. Rather than starting with the difficult task of redesigning your application architecture, it’s better to first disperse your static content. This not only achieves a bigger reduction in response times, but it’s easier thanks to content delivery networks.
Some large Internet companies own their own CDN, but it’s cost-effective to use a CDN service provider, such as Akamai Technologies, EdgeCast, or level3. For start-up companies and private web sites, the cost of a CDN service can be prohibitive, but as your target audience grows larger and becomes more global, a CDN is necessary to achieve fast response times.
20.Use cookie-free domains: HTTP cookies are small pieces of data that are sent from a website and stored in your browser. While a user is viewing a website that uses cookies, the cookies collect data pertaining to your website activity such as preferences, shopping cart items, which pages you visited, etc. Cookies are very useful in some cases, in other cases – such as the delivery of static content, they can hinder performance. When a browser makes a request for a static asset such as an image or CSS file, there is no need for it to also send a cookie to the server. This only creates additional network traffic and since the files are static (they do not change) the server has no use for the added cookie. For details about cookie-free domains read our post – How to use cookie-free domains for static content
21.Use GET for AJAX requests: When using the XMLHttpRequest object, the browser implements POST in two steps:
It is better to use GET instead of POST since GET sends the headers and the data together (unless there are many cookies). IE’s maximum URL length is 2 KB, so if you are sending more than this amount of data you may not be able to use GET.
[…] Reduce DNS Lookups – How to reduce DNS lookups […]