DEV Community

Cover image for Where Should you use async and defer ? Good SEO-practices
PREM KUMAR
PREM KUMAR

Posted on

3 3

Where Should you use async and defer ? Good SEO-practices

share your Knowledge as well

Lets see the difference between async and defer first

normal Script Execution

image

Keep only important Scripts here , that should execute while the page loading itself

with Async

image

If you want a script that should be executed immediately after fetching you may use async that also helps increases the performance of your website

with Defer

image

and Finally defer if you want some script to execute after all the contents are loaded and executed , or any less important scripts can be executed with defer

Now you know the difference , lets also see how to use it

using Defer

<script defer src="sitewide.js"></script>
<script defer src="jquery.min.js"></script>
<script defer src="page-specific.js"></script>
Enter fullscreen mode Exit fullscreen mode

using Async

<script async src="sitewide.js"></script>
<script async src="jquery.min.js"></script>
<script async src="page-specific.js"></script>
Enter fullscreen mode Exit fullscreen mode

Next i will post how to reduce the unwanted Css Load stay tuned !!

you can also edit this files : github

addition tips

Don't leave Anchor Tage Empty

<a> something </a>
This will be a bad practise instead use p tag or use href inside <a> tag

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (1)

Collapse
 
gamerseo profile image
Gamerseo

Very interesting post :)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay