In years 2010 Google announced that it is incorporating site speed as one of the over 200 signals that we use in determining search rankings. There are many ways to improve the website performance and reduce the page load time, which includes Minimize HTTP Requests, Optimize Images, Optimize CSS & Java Scripts and Cache-Control etc.
In this blog I am going to talk about optimizing JavaScript to reduce load time and improve web performance. Google strongly recommends that all webmasters regularly monitor site performance using Page Speed, YSlow, WebPageTest, or other tools.
Minimize JavaScript HTTP Requests
Reducing the number of HTTP requests in your web pages is one of the key for faster web pages. By combining all external Java Scripts into a single Java Script file will reduce the number of HTTP requests.
Example: Many website will have multiple Java Script files inside tag for different purpose.
<!-- Not recommended -->
<script src="https://www.example.com/menu.js"></script>
<script src="https://www.example.com/ajax.js"></script>
<script src="https://www.example.com/nav.js"></script>
<script src="https://www.example.com/tools.js"></script>
<script src="https://www.example.com/footer.js"></script>
<script src="https://www.example.com/others.js"></script>All the above six Java Script files can be combined in one Java Script file:
<!-- Recommended -->
<script src="https://www.example.com/combined-all.js"></script>By doing this I have reduced the numbers HTTP Requests to my web server from six Java Script HTTP Requests files to only one Java Script HTTP Request, which can really add up when you have thousands of visitors visiting your website every single day.
Place CSS tags first in source code, before Java Script tags
Place you CSS tag(s) before any Java Script tag(s), embedding stylesheets before external or internal scripts enables better, parallel download which can speed up browser rendering time. Browsers can delay rendering page content that follows from script tags until they are fully downloaded, parsed and executed.
Example:
<!-- Not recommended -->
<head>
<script src="https://www.example.com/nav.js"></script>
<script src="https://www.example.com/tools.js"></script>
<script src="https://www.example.com/footer.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
</head><!-- Recommended -->
<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<script src="https://www.example.com/nav.js"></script>
<script src="https://www.example.com/tools.js"></script>
<script src="https://www.example.com/footer.js"></script>
</head>Omit the Protocol
Omitting the protocol from embedded resources makes the URL relative and avoids mixed content issues and results in minor file size savings. Omit the protocol portion (http:, https:) from URLs pointing to javascripts unless the respective files are not available over both protocols.
<!-- Not recommended -->
<script src="https://www.example.com/scripts/javascript.js"></script><!-- Recommended -->
<script src="//www.example.com/scripts/javascript.js"></script>When a URL's protocol is omitted, the browser uses the underlying document's protocol instead. It looks strange at first, but this "protocol-less" URL is the best way to reference third party content that's available via both HTTP and HTTPS. This would certainly solve a bunch of mixed-content errors we're seeing on HTTP pages -- assuming that our assets are available via both HTTP and HTTPS.
General Rules
Omit type attributes for Java Scripts. Specifying type attributes in these contexts is not necessary as HTML5 implies text/css and text/javascript as defaults. Do not use type attributes for scripts (unless not using JavaScript).
<!-- Not recommended -->
<script src="//www.example.com/scripts/javascript.js" type="text/javascript"></script><!-- Recommended -->
<script src="//www.example.com/scripts/javascript.js"></script>Add an Expires or a Cache-Control Header
Browsers and Proxies use a cache to reduce the number and size of HTTP requests, making web pages load faster. By using Expires header, you increase the number of static resources that are cached by the web browser and are re-used on subsequent page views without making a single HTTP Request.
Browser Caching: Web servers use the Expires header in the HTTP response to tell the clients how long any component can be cached at user end. Any first time visitor on your website has to make several HTTP requests, but by using the Expires Header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Use expires header for all static resources like image(s), script(s), CSS, PDF, Flash etc. (HTML is not static, and shouldn't be considered cacheable).
Google: For all static resources set "Expires header" to a minimum of one month, and preferably up to one year. Do not set it to more than one year in the future, as that violates the RFC guidelines.
Click here: https://code.google.com/speed/page-speed/docs/caching.html
Proxy Caching: Enabling public caching in the HTTP headers for static resources allows the browser to download resources from a nearby proxy server rather than from a remoter origin server. HTTP provides for proxy caching, which enables static resources to be cached on public web proxy servers, most notably those used by ISPs.
Remove Comments: Remove all unnecessary and unwanted comments from your HTML, Java Script and CSS, as it save many bytes of data, and reduces the file size and browser renders them faster.
If you liked this post, you might also enjoy How Many Users Have JavaScript Disabled
