Optimizing performance with CopyandPay v4

Follow

Introduction

CopyandPay's JavaScript is designed for optimal rendering performance, meaning it will not block the rendering of a web shop's payment page.

Furthermore it is a stand-alone JavaScript application. This allows loading of the JavaScript in a way that best suits the needs of a particular shop or use case.

The integration guide describes the best practices for widget.js JavaScript file ofCopyandPay; this document is not inclusive of all use cases, thus it is recommended to use the best integration option for a given use case.

Async attribute script
 
<!doctype html>
<html>
    <head>
        <!-- your CSS goes here -->
    </head>
    <body>
        <form action="{url for redirecting the shopper after the payment}" id="{token}"></form>
    </body>
</html>

The HTML5 async attribute within the script element allows the widget.js JavaScript file to load immediately in a non-blocking async way. With async active, the script will run only when it's available, rather than delaying page from loading.

The async attribute is available in all modern browsers as well as Internet Explorer 10+.

The article "Can I use async attribute for external scripts" lists all browsers which support the async attribute on script tags. Current worldwide support is 80%.

Browsers which don't support the async attribute in script tags will simply fall back to a synchronous and load the widget.js JavaScript file with the rest of the page.

The impact on rendering performance is best described by this two web page tests:

Steps for further improvements:

  • If you have a lot of traffic from customers using older Internet Explorer 8 & 9, you should consider loading the widget.js JavaScript file as an injected script, below.

 

Injected script
 
<!doctype html>
<html>
    <head>
        <script>
            (function(d,t,w,s){
                w = d.createElement(t), s = d.getElementsByTagName(t)[0];
                s.parentNode.insertBefore(w, s);
            }(document, 'script'));
        </script>
        <!-- your CSS goes here -->
    </head>
    <body>
        <form action="{url for redirecting the shopper after the payment}" id="{token}"></form>
    </body>
</html>

The injected script technique allows the widget.js file to load after the CSS is downloaded, parsed, and the CSSOM is constructed. It loads in a non-blocking async way and runs when it's available, without delaying a page's loading.

The widget.js file is not loaded immediately, because the browser does not know what the above code block is planning to do. Since JavaScript can access and manipulate the CSSOM, it blocks the execution and waits until the CSSOM is ready.

The article "Script-injected "async scripts" considered harmful" has a good and more detailed explanation about the drawbacks of this technique.

Nevertheless, this technique has the widest browser support, and it is used by all big players like google, twitter, etc. to load their JavaScript files.

Icon
Important: Place the <script> for the injected script right after the opening <body> tag and before your CSS, as CSSOM blocks the reading of this <script> tag.

Conclusion:

  • Use this technique if a wide range of legacy browser support is needed, including older Internet Explorer 8 & 9
  • Should a large amount of CSS block the fetching of the widget.js file, place the above code block before any CSS files in your document.

 

Blocking script
 
<!doctype html>
<html>
    <head>
    </head>
    <body>
        <form action="{url for redirecting the shopper after the payment}" id="{token}"></form>
    </body>
</html>

The blocking script technique is an alternative that allows the widget.js file to load immediately. It loads in a blocking synchronous manner and runs when CSSOM is constructed

This implementation is only recommended as a last resort. Blocking scripts are bad for web site performance as they block the rendering of the page until the script was fully downloaded and executed.

Should this last resort for loading widget.js as a blocking script be unavoidable, it is recommended to include it right before the closing </body> tag.

 


Further Reading (external articles)

Critical Rendering Path

Analyzing Critical Rendering Path Performance

Script-injected "async scripts" considered harmful

Optimizing the Critical Rendering Path

 

Have more questions? Submit a request

Comments

Powered by Zendesk