在 Google PageSpeed Insights 中加载速度最快的 fancyBox/jQuery v3 而不会丢失分数

Question

目前我们的一个旧网络项目中有 fancyBox v2.1.5 和 jQuery v1.11.3。它们附加到关闭 </body> 标记之前的 HTML 页面，如下所示：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        document.write(unescape("%3Cscript src='/scripts/jquery-1.11.3.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
</script>

<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox({
            beforeShow: function () {
                var alt = this.element.find('img').attr('alt');
                this.inner.find('img').attr('alt', alt);
                this.title = alt;
            }
        });
    });
</script>

</body>

fancyBox的CSS在<head>部分是这样添加的：

<link rel="stylesheet" href="/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />

当我为 HTML 页面启动 Google 的 PageSpeed Insights 测试时，Google 总是提到这个 CSS 并告诉我们有 1 个阻塞 CSS 首屏内容中的资源。为了解决这个问题并使页面加载时间更好，我将升级到最新版本的 fancyBox 和 jQuery（这也会带来新功能）。

fancyBox项目的home page告诉我们如何将v3添加到HTML页：

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>

如果我在 </body> 结束标记之前添加这些行，是否有助于实现我的目标？在使用 fancyBox/jQuery（例如，通过在 <script> 标记中添加 async 属性或将 fancyBox/jQuery 文件托管在我们的网络服务器）？

P.S。建议的解决方案的一个可能问题是 <link> 标签应仅放置在 <head> 部分中，尽管它似乎在 HTML5 中也适用于正文（参见 this thread).

Answer 1

查看 Google 推荐 - https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery and this SO thread - How to load CSS Asynchronously

在 Google PageSpeed Insights 中加载速度最快的 fancyBox/jQuery v3 而不会丢失分数

The fastest loading of fancyBox/jQuery v3 without loosing scores in Google PageSpeed Insights

jquery

fancybox

pagespeed

fancybox-3