解决最小化关键请求深度 - 页面性能

Question

我的问题

对于我的网络应用程序，页面的初始加载时间超过 20 秒。在 Chrome - Audit -LightHouse 显示以下信息。

我不知道如何解决这个问题来加快我的页面加载速度。我已经用了很长时间了。

我在下面放置了一些详细信息，说明如何在我的部分布局和主页中完成捆绑和呈现。非常感谢任何帮助。

下面是我打包的 js 和 css 文件。

  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"));

在我的_Layout.cshtml

在部分视图的开头 (_Lyout.cshtml)我渲染了下面的内容

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

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

在部分视图的末尾 (_Layout.cshtml) 我已经渲染了以下脚本

 @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>

在我的 index.cshtml 中，我在结束视图中有以下代码

@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 1

defer/async非关键js.
合并 css/js 个文件以最小化请求。

预连接外域例如：

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

预加载css/js，例如：

 <!-- 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" >

解决最小化关键请求深度 - 页面性能

Solve Minimize Critical Requests Depth - Page Performance

html

javascript

css

asp.net-mvc

pagespeed