推迟在Laravel中解析Javascript

好的,所以我知道有很多关于这方面的话题,但我无法解决这个问题.

我的网站(bricklist.nl)在Laravel上运行,似乎在样式表之前加载内容,这有点问题(现在得到用户的反馈几次).

我的直觉说这是因为我头上的Javascripts. GTmetrix给了我这个：

在初始页面加载期间解析456.3KiB的JavaScript.推迟解析JavaScript以减少页面呈现的阻塞.

https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js (217.7KiB)
https://bricklist.nl/js/less.min.js (118.0KiB)
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js (87.0KiB)
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js (30.6KiB)
https://bricklist.nl/ (1.4KiB of inline JavaScript)
https://bricklist.nl/js/home.js (1.2KiB)
https://bricklist.nl/js/main.js (345B)

我尝试在每一个之前添加’defer’标签,但这只会搞砸我的布局.

目前,这是我的主要布局标题：

<link rel="canonical" href="@yield('canonical')"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
{{-- <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> --}}

<script defer src="{{ URL::asset('/js/packs/solid.min.js') }}"></script>
<link rel="stylesheet/less" type="text/css" href="{{ URL::asset('css/main.less') }}">
<link rel="stylesheet/less" type="text/css" href="{{ URL::asset('css/custom.less') }}">

这是在身体标签：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
{{-- <script type="text/javascript" src="{{ URL::asset('js/ui-bootstrap-2.5.0.min.js') }}"></script> --}}
<script type="text/javascript" src="{{ URL::asset('js/less.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/main.js') }}"></script>

我读了很多关于这个主题的内容,我希望有人可以给我一些关于Laravel最佳实践的建议.任何人都可以指出我正确的方向来解决这个问题吗？欢迎任何建议.

谢谢！

解决方法:

您可以使用此示例修复您的问题.只需将该方法应用到您的网站：

页面负责人：

<noscript>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto&amp;subset=latin-ext">
<link rel="stylesheet" type="text/css" href="//cdn.siberfx.com/css/bootstrap.min.css">
</noscript>

页面末尾：

<script type="text/javascript" async>
/* WebFont CSS File */
var sbxSpeed_0 = document.createElement('link');
sbxSpeed_0.rel = 'stylesheet';
sbxSpeed_0.href = '//fonts.googleapis.com/css?family=Roboto&amp;subset=latin-ext';
sbxSpeed_0.type = 'text/css';
var ParseDefer_0 = document.getElementsByTagName('link')[0];
ParseDefer_0.parentNode.insertBefore(sbxSpeed_0, ParseDefer_0);

/* Bootstrap CSS File */
var sbxSpeed_1 = document.createElement('link');
sbxSpeed_1.rel = 'stylesheet';
sbxSpeed_1.href = '<?PHP echo cdn;?>css/bootstrap.min.css';
sbxSpeed_1.type = 'text/css';
var ParseDefer_1 = document.getElementsByTagName('link')[0];
ParseDefer_1.parentNode.insertBefore(sbxSpeed_1, ParseDefer_1);