AsyncBee.js file and changing the attributes will boost the Google's page insight speed from any score to 95 ~ 100. AsyncBee delays the resource to load up and synchronously loads the Javascript and other resource is right order without making any dependency errors. AsyncBee is very flexible and comes with a prebuild loading animation which can be fully customized.
You can use the Jquery CDN :
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>First of all we need to download AsyncBee.js file from this GitHub repository or if you don't want to include files in your project, you may use it from CDN :
<script src='https://cdn.jsdelivr.net/gh/Niyko/AsyncBee/AsyncBee.js'></script>After that we need to include AsyncBee.js files to our website/app. In your html file:
<!DOCTYPE html>
<html lang="en">
<head>
...
<script src="path/to/AsyncBee.js"></script>
</head>
<body>
...
</body>
</html>Replace all your src attribute in <script> tag with asyncbee and replace the href attribute in tag with asyncbee. If you want to load the images asynchronously too, you can replace the src attribute in tag with
asyncbee.
for example if your website contains script tags like this:
<script src='path/to/main.js'></script>
<link href='path/to/bootstrap.css'></link>
<img src='path/to/image.jpg'>replace the src attribute with the asyncbee atttribute like given below
<script asyncbee='path/to/main.js'></script>
<link asyncbee='path/to/bootstrap.css'></link>
<img asyncbee='path/to/image.jpg'>Finally, we need to initialize AsyncBee in JS, To initilize add this below code in the inline script or in script file that is included in the very end of body (right before closing tag):
myasyncbee = new asyncBee();All the options aviablabe in the myAsyncBee() funtion are given below and an example of its usage is also given below. All the options are optional.
| Option | Description | Value Type | Example Value |
|---|---|---|---|
| loadingcolor | color of the loading spinner | String | #ff0000 or rgb(255,0,0) |
| loadingbgcolor | color of the loading background | String | #ff0000 or rgb(255,0,0) |
| loading | disable the default loading screen | Boolean | true or false |
| ondone | is a callback and called when finished loading all resources | Function | function (){ alert("all loaded"); } |
| loadingtime | Time delay for loading the resources and given in Millisec |
Int | 5000 |
Example usage of options:
myasyncbee = new asyncBee({
loadingcolor: '#000000',
loadingbgcolor: 'rgb(255, 181, 46)',
ondone: function (){
alert("hello");
}
});AsyncBee is licensed under the GNU GENERAL PUBLIC LICENSE.