Solve Minimize Critical Requests Depth – Page Performance

My Issue

For my web app, the initial loading of the page takes more that 20 seconds. On Chrome – Audit -LightHouse shows the below information.

I do not have idea on how to address this to make my page load faster. I’ve been with this for long time now.

I have placed below here some details on how the bundling and rendering of bundles in my partial layout and main page is done. Any help is really appreciated.

Below is my bundling of js & css files.

  bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));/*2.1.1*/

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui.js"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.min.js",
                  "~/Scripts/respond.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/signalConnect").Include(
                  "~/Scripts/SignalScripts/SignalConnectScript.js"));


        bundles.Add(new ScriptBundle("~/Content/sliderpips").Include(
                  "~/Content/jQuery_Slider_Pips/js/jquery-ui-slider-pips.js"));//,
                                                                               //"~/Scripts/respond.js"));

        bundles.Add(new ScriptBundle("~/bundles/highcharts").Include(
                  "~/Scripts/HighCharts/highcharts.js",
                  "~/Scripts/HighCharts/highcharts-more.js",
                  "~/Scripts/HighCharts/exporting.js")
                  );


        bundles.Add(new ScriptBundle("~/Content/TinyDateTimePicker").Include(
                 "~/Content/TinyDateTimePicker/demo/events.js",
                 "~/Content/TinyDateTimePicker/calendar.js",
                 "~/Content/TinyDateTimePicker/datePicker.js",
                 "~/Content/TinyDateTimePicker/tinyDateTimePicker.js")
                 );



        bundles.Add(new ScriptBundle("~/bundles/signalgen").Include(
                    "~/Scripts/SignalScripts/SignalGenScript.js"));

        bundles.Add(new ScriptBundle("~/bundles/signaldata").Include(
                    "~/Scripts/SignalScripts/SignalDataScript.js"));

        bundles.Add(new ScriptBundle("~/bundles/signaldatacompare").Include(
                    "~/Scripts/SignalScripts/SignalScript.js"));

        bundles.Add(new ScriptBundle("~/bundles/signaldatareport").Include(
                    "~/Scripts/SignalScripts/SignalReportScript.js"));

        bundles.Add(new ScriptBundle("~/bundles/signaldataalarm").Include(
                    "~/Scripts/SignalScripts/SignalAlarmScript.js"));

        bundles.Add(new ScriptBundle("~/bundles/signalmaster").Include(
                    "~/Scripts/SignalScripts/SignalMasterScript.js",
                    "~/Scripts/Misc/jscolor.js"));

        //bundles.Add(new ScriptBundle("~/bundles/highcharts").IncludeDirectory("~/Scripts/HighCharts","*.js"));


        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"//,

                  ));

        bundles.Add(new StyleBundle("~/Content/papercss").Include(
                   "~/Content/assets/css/paper-dashboard.css",
                   // "~/Content/assets/css/themify-icons.css",
                  //"~/Content/Custom/site_layout/css/bootstrap-responsive.min.css"//,
                  "~/Content/Custom/site_layout/css/site_layout.css"
                  //"~/Content/3rdCss/flick/jquery-ui.css",
                  //"~/Content/3rdCss/smoothness/jquery-ui.css"
                  ));

        bundles.Add(new StyleBundle("~/Content/jqueryUIcss").Include(
                 "~/Content/jqueryui.min.css"));

        bundles.Add(new StyleBundle("~/Content/sliderpipscss").Include(
                 "~/Content/jQuery_Slider_Pips/css/jquery-ui-slider-pips.css"));

        bundles.Add(new StyleBundle("~/Content/TinyDateTimePickercss").Include(
                 "~/Content/TinyDateTimePicker/datePicker.css",
                 "~/Content/TinyDateTimePicker/themes/white/datePicker.css"));

In my _Layout.cshtml

At the start of the partial view (_Lyout.cshtml)I have rendered the below

<title>@ViewBag.Title - Dashboard - IO </title>
@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

At the end of the partial view (_Layout.cshtml) I have rendered the below scripts

 @Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/signalgen")

@RenderSection("Scripts", required: false)
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/highcharts")</body>

In my index.cshtml I have the below code at the end view

@section scripts{

@Styles.Render("~/Content/jqueryUIcss")
@Styles.Render("~/Content/sliderpipscss")
@Scripts.Render("~/Content/sliderpips")


@*<!- -SignalR- ->*@
<script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
<script src="~/SignalR/hubs"></script>
@Scripts.Render("~/bundles/signalConnect")

<script type="text/javascript">
        $(document).ready(function () {
            var dModel = @Html.Raw(Json.Encode(Model));
            prepareSignalData(dModel);


        });

</script>}

Answer

• defer/async non critical js.

• combine css/js files to minimize the request.

• pre-connect with external domain for example:

  <link href='fonts.googleapis.com' rel='preconnect' crossorigin>
  

• pre-load css/js, for example:

   <!-- Preloading resources -––––––––––––––––––––––––––– -->
   <link rel="preload" href="http://www.pagespeedinsights.org/theme/css/normalize.css" as="style">
   <link rel="preload" href="http://www.pagespeedinsights.org/theme/css/skeleton.css" as="style">
   <link rel="preload" href="http://www.pagespeedinsights.org/theme/css/custom.css" as="style" >
  
   <!-- FONT –––––––––––––––––––––––––––––––––––––––––––– -->
   <link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
  
   <!-- CSS -----–––––––––––––––––––––––––––––––––––––––– -->
   <link rel="stylesheet" href="http://www.pagespeedinsights.org/theme/css/normalize.css">
   <link rel="stylesheet" href="http://www.pagespeedinsights.org/theme/css/skeleton.css">
   <link rel="stylesheet" href="http://www.pagespeedinsights.org/theme/css/custom.css" >