Critical Rendering Path is a sequence of steps the browser needs to go through to convert the most important HTML, CSS and Javascript into actual pixels on the screen. This also means we make the most important visual parts of our site load first instead of loading everything at once.
In order to set up the appropriate Critical Rendering Path for any site, it is important to understand the terms “Above the Fold” and “Below the Fold.” Above the Fold is basically the initial view users get on their screens when they visit a website, without having to scroll down. Think about a newspaper, when you have just bought it. It typically comes folded, and the most important headlines appear above the fold, which is defined as critical. Everything else will appear below the fold and is revealed after you have bought and opened the newspaper. This content is called Below the Fold. Web page and browser behaviors are no different. The browser has to download, parse and render the content for Above the Fold, while it has to only download and parse the content for Below the Fold. By mainly focusing on loading the content for the initial/Above the Fold view, it is possible to load a page with hundreds of CSS and Javascript files in less than a second. This is where Critical Rendering Path comes into effect; setting it up effectively helps us load the page faster and improve performance.
Once we understand the need for Critical Rendering Path, it is time to determine the Content that makes up the initial/Above the Fold view in order to setup the Critical Rendering Path. The below table outlines the content a webpage typically needs and does not need for the initial view –
| Function | Current Process | Future Process | Impacted |
|---|---|---|---|
| Security and Digital Identity – Compliance (KYC) | The Know Your Customer (KYC) regulation is an integral part of global anti-money laundering (AML) efforts. Compiling and maintaining these databases is expensive for financial services; this can lead to duplication of effort and can delay transactions. | If digital identities are recorded on a blockchain shared ledger, an individual can add devices to their identity and add authorization to transact on their behalf. Verifiable and robust identities, cryptographically secured blockchain technology could provide a single digital source of ID information, allowing for the seamless exchange of documents between banks and external agencies. This would likely result in automated account opening and reduced resources and costs, while maintaining the legally required privacy of data. | All financial services firms, payment card networks, regulators |
| Cross-border Payments | Cross-border payments use SWIFT messaging. Fees are leveraged by multiple intermediaries. | BBVA cleared a real money transfer between Spain and Mexico in minutes. One-fee Smart contracts can be coded to reflect any data-driven business logic. For example: •Cross-border transactions •Digitalizing letters of credit •Loan repayments | Consumer banks, commercial banks |
| Clearing & Settlement | Centralized clearing and settlement for all financial instruments. Settlement can take from days to weeks, depending on the complexity of the transaction. | Settlement can be done in minutes using blockchain. A fundamental advantage of a distributed ledger system, in which no single company has control, is that it resolves problems of disclosure and accountability between individuals and institutions whose interests are not necessarily aligned. It gives each member of the network far greater and timelier visibility of the total activity. DTCC has already proven that complex post-trade events inherent to credit default swaps (CDS) can be managed with distributed ledger technology in a permissioned, distributed, peer-to-peer network. | Investment banking, asset management, corporate banking, hedge funds, ForEx trading, clearinghouses, central banks, regulators |
| Transfer of Ownership (Contracts, Titles) | Transferring title of a property or negotiating contractual terms for financing, funding and loads is a long and onerous process with multiple intermediaries, include the legal profession. | Securities based on payments and rights that are executed according to predefined rules can be written as smart contracts. A smart contract is any contract that can automatically enforce itself without the need for a trusted intermediary. Any contract can be a smart contract if the terms of the contract can be automated. The blockchain assures that everybody is seeing the same thing at the same time, which negates the need for trust. | All banks, legal profession, real estate industry, regulators |
| Asset Management | Each party in the trade lifecycle (e.g., broker dealers, intermediaries, custodians, clearing and settlement teams) currently keeps its own copy of the same record of a transaction, creating significant inefficiencies and room for error. | Blockchain technology would provide an automated trade lifecycle in which all parties to the transaction would have access to the exact same data about a trade. This would lead to substantial infrastructural cost savings, effective data management and transparency, faster processing cycles, minimal reconciliation, and a reduced need for brokers and intermediaries. | Asset management banks, broker-dealers, custodians |
| Smart Assets (Supply Chain/Trade Finance) | Primary pain points for supply chain firms are: no visibility of payments, long payment schedules, demand management. | Blockchain provides a system of trusted records that addresses all three. Digitizing letters of credit and bills of lading facilitates a smart asset tracking system. Tracking assets that are rich in data can be turned into information for corporate clients. | Financing firms, supply chain industry |
| Lending | Multiple intermediaries and fees for bank loans, mortgages, credit card debt, government bonds, muni bonds, asset-back securities | Both loan and collateral can be stored in a blockchain. A smart contract can automatically revoke access to the collateral if the terms of the loan are broken. Debt can be issued, traded and settled on the blockchain. Improves small business lending and lending for the unbanked (Approx. 2bn – World Bank). | Commercial banking, consumer banking, payment card network, money transfer services, telecommunications, regulators |
| Funding | Funding and investing in an asset, IPOs, dividends, capital appreciation, rental income | Peer-to-peer financing, recording of corporate actions, automatic payment of dividends, smart contracts for title registries. Contracts that monitor the performance of digital or non-digital assets can also be used as futures, forwards, swaps, and options. | Investment banking, corporate banking, real estate, legal |
| Insurance | Managing risk, derivatives, insuring assets | Decentralized markets for insurance, more transparent derivatives | Insurance, risk management, brokerages, corporate banks, clearinghouses, regulators |
| Governance | Accounting for value | A distributed ledger will mean real-time audit and financial reporting capabilities. Transparency of the blockchain improves regulatory management. | Audit, asset management, regulators, banks |
| Recording and storing transactions and custody | Centralized recording and storage of financial assets, currencies, commodities for all types of accounts | Cryptographic mathematical equations and immutable blockchain secures recording and storing of all transactions. Will reduce need for typical financial services accounts (brokerage, checking, savings, etc.). | Consumer banks, Investment banks, brokerages, asset management, regulators |
Now that we have identified the content for the initial view, certain steps that can be taken to speed up the initial view are:
Defer loading of low priority Javascripts
-
Find Javascript that is not needed for the initial/Above the Fold view.
-
Copy and paste all of them in a single .JS file.
-
Add the following code snippet (provided by Google Page Speed Experts) to the bottom of the HTML page just before the closing </body> tag
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = “deferScripts.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
- We are now telling the browser to load ‘deferScripts.js’ after the page has finished loading.
Use asynchronous scripts
Asynchronous scripts ensure us that they do not hinder the rendering of our page in any way, because they are loaded separately from the actual page. It is important to load only those scripts asynchronously that are not needed for the initial view. A good example is the social media feeds (Twitter, Facebook, etc).
- Use the ‘async’ tag in the following way –
<script src="yourscript.js" async></script>
Inline small Javascripts
If you only have a few lines of Javascript on your page, it is better to inline this, rather than calling it from a new file altogether. This results in fewer HTTP requests which will help in rendering your page instantly.
- Below is an example of how to inline small codes of Javascript –
<head> <script type="text/javascript"> YOUR JAVASCRIPT </script> </head>
Lazy load CSS
- Do not lazy load small or medium-sized CSS scripts; rather inline them. Only lazy load bigger CSS scripts.
- Find out which part of your CSS is used for the Above the Fold/initial view of your page. Inline this CSS in your HTML header.
- Copy rest of the CSS in a new file and add the below script (provided by Google Page Speed Experts) before the closing </body> tag to lazy load this new file, required for below the fold content.
<script>
var cb = function() {
var l = document.createElement('link');
l.rel = 'stylesheet'; l.href = 'yourCSSfile.css’;
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb); else window.addEventListener('load', cb);
</script>
Minify and compress the static assets (CSS, JS, PNG, GIF, JPG and other media files)
- To optimize images and to perform minimization and compression of CSS, JS and media files, there are a bunch of grunt/gulp plugins available to do this for us.
- This link provides a list of great plugins to improve the performance.
- If you are not using Grunt/Gulp, you can still enable Gzip compression to compress the assets to about 30% or less of their original size. This link has more details on how to enable Gzip compression.
The techniques mentioned above should greatly help in improving the page speed performance and load the initial view as quickly as possible to the user, irrespective of the device/browser they are using to load the site.
Below are some useful resources to learn more about Critical Rendering Path and improving page speed performance –
- Google Developer Web Fundamentals – CRP
- Gift of Speed – How to improve Performance
- Website Performance Optimization – a great free video tutorial by Google about CRP
I hope this post helped you understand the need for Critical Rendering Path and ways to improve page speed performance. What are some of the techniques that you have been following to improve your site’s performance ? Do share them below.
