DEV Community

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

Posted on

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

Discussion (0)