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>
javascriptcsshtmlsrc

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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Kendo UI Jsonp in conjunction with a WordPress json plugin: A comprehensive

Issue at Hand: My goal is to modify a kendo UI data-binding example to work with my own jsonp request. Description of the Problem: Starting from a data-binding example here, I have created this jsfiddle that demonstrates the desired functionality. To a ...

javascriptjsonwordpresskendo-ui

Items on Bootstrap have been expanded to fit larger screens

I'm currently working on a webpage () and facing an issue with the size of objects on a specific screen resolution. When users click on items in the accordions, multiple information cards are displayed. However, on larger screens, these cards appear ...

htmlcsstwitter-bootstrap

Ways to update the text alongside a slider form with JavaScript

I am currently working on a project using html and js function slide(){ let v= document.getElementById("slide_inner"); document.getElementById("slider").textContent=v.value; } <form id="slider"> <label for="slide_inner"&g ...

javascripthtml

The Image Slider functions smoothly in Chrome, but encounters issues in IE11

Here is a link to the code I've been working on: http://jsfiddle.net/wf32jbhx/ I attempted to host images on my SharePoint site, but they ended up stacking on top of each other instead of formatting properly. Oddly enough, everything appears fine in ...

htmlcssgoogle-chromesharepointinternet-explorer-11

retrieveSourceData(), postmodification of Handsontable with Vue

How can I use getSourceData() after a change event in Vue? I need to access the instance of Handsontable, but I'm not sure how to do that in Vue. Essentially, I need to retrieve all rows that have been edited. For example: const my_instance = this.$ ...

javascriptvue.jsvue-componenthandsontableref

Angular File Sorting Error in Gulp detected

After including .pipe(angularFilesort()) in my gulp script, the task runs wiredep but never proceeds to the default task. It just stops after executing wiredep. However, if I remove .pipe(angularFilesort()), the script works perfectly fine. Can someone h ...

javascriptangularjsgulp

Tips for validating updates in MongooseEnsuring data integrity is

My current Schema does not validate upon updating. Can you please point out where I went wrong and help me fix it? ...

javascriptnode.jsmongoose

Creating a dynamic tbody element on button click with the help of javascript or jquery

I am working with the following code: $(document).ready(function() { //Optimizing by selecting tbody first using jquery children var tbody = $('#myTable').children('tbody'); //If no tbody found, select the table itself ...

javascripthtmljquerydynamic

How to manage simultaneous requests in Parse Server Cloud Code

Imagine having some Cloud Code running on a Parse Server: Parse.Cloud.beforeSave("UserProfiles", function(request, response) { const query = new Parse.Query("UserProfiles"); query.equalTo("user", request.user); query.count({ success: f ...

javascriptnode.jsparse-platformparse-serverparse-cloud-code

jQuery click event handler performing no action

I am encountering an issue with the input on my index page: <input type="button" name="goReplaceAll" value="Go" id="allReplaceGo" style="cursor:hand;" /> There is an onclick call from jQuery as follows: $(document).ready(function() { $(&ap ...

javascriptjqueryajax

Retrieve the current language from a non-page component on the server side with the help of Next.js and the next-i18next

I am working on a nextjs application that utilizes the next-i18next library for internationalization. I'm struggling to figure out how to access the current language on the server-side within a component that is not a page. On the server side, you ca ...

javascriptreactjsnext.jsserver-sidenext-i18next

How to build a login page with a static header and footer using Angular2

For my latest project, I am currently in the process of developing an application using Angular2 and eclipse Neon. Utilizing angular-cli for this app, I am now focused on creating the login page. Within the app.component.html file, you will find the follow ...

cssangulartypescript

The present URL of Next.js version 13

When working with Next.js App Router in SSR, how can I retrieve the complete URL of the current page? I am unable to use window.location.href due to the absence of a defined window object, and using useRouter() does not provide access to the full URL. ...

javascripttypescriptnext.jsnext.js13

What is the best way to ensure that the same information is included on every page of

Currently developing a dynamic website where certain components such as the fixed header, menubar, and footer are common across multiple pages. What is the best way to include these fixed components on every webpage? I am utilizing JSP and JavaScript for ...

javascripthtmlcssjsp

The button's onclick function is failing to save the record in the database

Hello everyone, I am facing an issue with the ONCLICK button functionality. I have written code to save a form to the database. In the image, there are 2 buttons: Save button (type="submit") Save and New button (type="button") The Save button is ...

javascriptjqueryajaxspringjsp

Leveraging grunt-develop

I have recently developed a basic NodeJS + Express application that runs smoothly when I use the command node app.js. However, my current task is to incorporate grunt-develop into my project. Here is how I configured it: grunt.initConfig({ develop: { ...

javascriptnode.jsgruntjs

If you click outside of a Div element, the Div element will close

I am looking for a way to implement a function that will hide a specific div when I click outside of its area. The div is initially set to Position: none and can be made visible using the following function: Div Element: <div id="TopBarBoxInfo1" oncli ...

javascriptjquerycsshtml

Tips for incorporating JavaScript code into back4app.com using Objective-C:1. Start by accessing the

Currently, I am trying to retrieve "ServerDate" from back4app.com using PFCloud. Unfortunately, I have encountered the following issue: Invalid function: "getServerDate" (Code: 141, Version: 1.13.0) When I attempted to use the code below: [PFCloud ...

javascriptiosobjective-cparse-platformback4app

Is there a way to create an <a> element so that clicking on it does not update the URL in the address bar?

Within my JSP, there is an anchor tag that looks like this: <a href="patient/tools.do?Id=<%=mp.get("FROM_RANGE") %>"> <%= mp.get("DESCRITPION") %></a>. Whenever I click on the anchor tag, the URL appears in the Address bar. How can ...

javascripthtmljspjquerystruts

How can I maintain the state of an HTML checkbox in Django even after reloading the page?

In the following sample code, I am looking to maintain the checkbox as checked even after a page reload when the submit button has been pressed. <td><input type="checkbox" value="{{ item }}" name="selectedcheckbox"/ ...

pythonhtmldjangocheckbox