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

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

with Async

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

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>

using Async

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

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