Boost your website's loading time by utilizing the async and defer attributes

Question

Boost your website's loading time by utilizing the async and defer attributes

Looking to enhance the speed of my webpage, particularly focusing on improving initial page speed. Research suggests that using the async and defer attributes for JavaScript can be beneficial. All JavaScript scripts are currently placed just above the closing </body> tag. Can you provide recommendations on how to effectively utilize these attributes in my specific page setup?

<html>
<head>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/css/style/mystyle.css"> 


</head>
<body>
<!--HTML content-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-touch.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.min.js"></script>

google analytics script

</body>
</html>

javascript css html src

Answer 1

Answer №1

To implement defer:

<script src="path" defer="defer"></script>

To utilize async:

<script src="path" async="async"></script>

When is it appropriate to use defer/async?

If you require your scripts to load asynchronously while the HTML and CSS are loading, using the async attribute will prompt the browser to load them in the background as other elements render.

Alternatively, if you need your scripts to load only after the HTML and CSS have fully loaded, then utilizing the defer attribute would be suitable.

It's crucial to exercise caution when employing this technique, as certain JavaScript functionalities may not behave as expected due to these attributes.

How can you maximize their effectiveness?

I recommend avoiding the use of async, as it may cause scripts to load out of order based on file size or dependencies, potentially impacting functionality. Instead, opt for defer to adhere to Google Page Speed recommendations for script loading order.

However, using defer may affect your website if some scripts should run before the document is fully ready. In such cases, it's best to prioritize the script execution over adhering strictly to Google Page Speed guidelines.

In the end, the choice between defer and async depends on your specific needs and script requirements.

Answer 2

To implement defer:

<script src="path" defer="defer"></script>

To utilize async:

<script src="path" async="async"></script>

When is it appropriate to use defer/async?

If you require your scripts to load asynchronously while the HTML and CSS are loading, using the async attribute will prompt the browser to load them in the background as other elements render.

Alternatively, if you need your scripts to load only after the HTML and CSS have fully loaded, then utilizing the defer attribute would be suitable.

It's crucial to exercise caution when employing this technique, as certain JavaScript functionalities may not behave as expected due to these attributes.

How can you maximize their effectiveness?

I recommend avoiding the use of async, as it may cause scripts to load out of order based on file size or dependencies, potentially impacting functionality. Instead, opt for defer to adhere to Google Page Speed recommendations for script loading order.

However, using defer may affect your website if some scripts should run before the document is fully ready. In such cases, it's best to prioritize the script execution over adhering strictly to Google Page Speed guidelines.

In the end, the choice between defer and async depends on your specific needs and script requirements.

Answer 3

Answer №2

Avoid altering anything or opting for defer universally.

Bootstrap necessitates the loading of jQuery (even though you're not directly establishing Bootstrap in this instance, but rather an Angular-Bootstrap template). Consequently, employing async to load either of these resources is not feasible. Furthermore, there is a substantial quantity of Angular resources being loaded, all contingent on the primary angular.min.js resource, thus using async here is also impractical.

You could elect to use defer universally, but it will not expedite the rendering of the page. The sole distinction lies in the fact that the scripts will execute upon total loading instead of sequentially (executing as they are downloaded), although this does not impact the overall page load time.

Answer 4

Avoid altering anything or opting for defer universally.

Bootstrap necessitates the loading of jQuery (even though you're not directly establishing Bootstrap in this instance, but rather an Angular-Bootstrap template). Consequently, employing async to load either of these resources is not feasible. Furthermore, there is a substantial quantity of Angular resources being loaded, all contingent on the primary angular.min.js resource, thus using async here is also impractical.

You could elect to use defer universally, but it will not expedite the rendering of the page. The sole distinction lies in the fact that the scripts will execute upon total loading instead of sequentially (executing as they are downloaded), although this does not impact the overall page load time.

Boost your website's loading time by utilizing the async and defer attributes

Answer №1

Answer №2

Similar questions

Displaying items in the shopping cart across two separate columns

Problem with Bootstrap 5 dropdown menu: Functional on main page, but failing on subpages

Create a loop in Vue.js 3 without the need for a query

When designing a webpage using HTML and CSS, the size of HTML blocks decreases as the page is made smaller

Adjusting the grid for various mobile screen sizes

Utilizing the `this` keyword within a click handler that is passed through an intermediary function

Nesting maps in JavaScript is a powerful way to transform

VueJS and Vite: Encountering an unexpected character '�' while attempting to import files that are not JavaScript. Keep in mind that plugins are required for importing such files

The communication between socket.io encountered a net::ERR_SSL_PROTOCOL_ERROR

Is it possible to customize the close icons on the autocomplete feature in Material UI?

Error encountered while using the Fetch API: SyntaxError - the JSON data contains an unexpected character at the beginning

The error message is stating that the module located at C://.. does not have an exported member named "firebaseObservable"

Unable to input Email ID and Password within a Selenium Java script for a Bootstrap dropdown menu on the website "https://qa01.pdng.pepsico.com/" without using a frame

Function $locationChangeStart in AngularJS not triggering

Bootstrap navbar partially collapsed with inner items concealed not at the edges

Incorporating lazy loading for diverse content to enhance pagination

Vue.js and the hidden input value that remains unseen

Input specific ng-if conditions

What steps should I take to create a slider using my image gallery?

Prevent highlighting of empty spaces in HTML by disabling selection