Optimize the order of styles and scripts

dksellou · June 23rd, 2015, 02:08 PM

Hello I am using GTMetrix website to evaluate my website and I got this:

The following external CSS files were included after an external JavaScript file in http://mywebsite.com/. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.

http://mywebsite.com/App_Themes/Mono...onochrome2.css

I built my website based on the planet wrox covered in the book:
here is my master page that included the modernizer script:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Frontend.master.cs" Inherits="MasterPages_Frontend" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link id="Link1" runat="server" rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>

<link href="../App_Themes/Monochrome/Monochrome2.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<%-- <div id="wrapper"> --%>
<form id="form1" runat="server">
<div id="PageWrapper">
<div class="beforeHead"></div> <header> </header>
<section id="MainContent">
<asp:ContentPlaceHolder ID="cpMainContent" runat="server"><header> </header>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
<Scripts>
<asp:ScriptReference Name="jquery" />
</Scripts>
</asp:ScriptManager>
</asp:ContentPlaceHolder>
</section>
<footer>
<hr class="hr"/>
<span >Copyright © 2014 EAS company - All Rights Reserved </span>
</footer>
</div>
<asp:ContentPlaceHolder ID="cpClientScript" runat="server">
</asp:ContentPlaceHolder>
</form>
<%--</div> --%>
</body>
</html>

Please help me!

karanluthra001 · June 24th, 2015, 03:45 AM

Good question

dksellou · June 24th, 2015, 05:44 PM

ok I wanted to update and also to ask if this is the solution.
I moved the
<script src="/scripts/modernizr-2.8.3.js"></script>
from the head section to the body .
The warning at GTMetrix is gone but is this the solution?
So, now that the script src is in the body does it really affect the page or not?
Thanks

Imar · June 25th, 2015, 02:44 PM

Yes, it does. It allows the browser to process the HTML and apply the CSS while it's downloading the JavaScript.

You can read more about the why here: https://www.google.com/?gws_rd=ssl#q...and+JavaScript

Cheers,

Imar

dksellou · June 25th, 2015, 02:57 PM

Thank you!