Chrome 中的 SSL 初始連接非常緩慢

我們的客戶有一個基於 PrestaShop 的網上商店 ( https://www.hoerschiff.at )，現在他的主機安裝了 SSL 證書。我們更新了 PrestaShop 的配置，因此所有頁面都強制通過 SSL 傳遞。我們現在面臨的問題是，在 Chrome 中（也在 Safari 中）通過 HTTPS 載入頁面的時間非常緩慢，而在 Firefox 中則載入正常。

開發人員工具顯示，許多資產（JS、CSS、PNG 等）的“初始連接”時間非常長（從 5 秒到 1.5 分鐘）。這僅在載入完整頁面時發生。如果我直接載入一項資產（例如https://www.hoerschiff.at/themes/PRS030068/js/megnor/custom.js）它載入就好了。

我還發現了這個問題：Chrome 在 https 站點上執行速度很慢，尤其是內部站點， 但與它無關，因為當資產已經被記憶體時，站點載入正常。

首先，我認為這可能是 Apache/SSL 配置問題，但由於它在 Firefox 中正常載入，因此不應該是這種情況。

你有什麼想法會導致這個緩慢的初始連接時間嗎？

提前致謝！

我仍然無法找出問題所在，但事實證明它只是通過我在辦公室的網際網路訪問發生的。在其他任何地方（大學、朋友的網際網路訪問、客戶等）它在每個瀏覽器中都執行良好。所以這是一個非常奇怪的行為，但由於沒有其他人經歷過這種情況，而且這是一個預算非常低的項目，我不會進一步調查它。

我查看了網站https://www.hoerschiff.at/並且可以看到許多不同的問題。我會將問題分組：

• SSL/TLS 問題
• HTTP/2 支持
• 最小化圖像
• 使用來自 CDN 的常見 CSS/JS（如 jQuery、Font Awesome 4.3、…）
• 縮小 JS/CSS 文件
• 在伺服器上使用 GZip 壓縮（例如，對於像 JS/CSS 文件這樣的靜態文件）
• 將所有圖像放在 CDN 上。例如cloudinary允許在 CDN 上免費託管許多圖像（2 GB，7,500 次轉換/月）。

我建議您至少在Qualys SSL Server、www.webpagetest.org和validator.w3.org方面測試您的網站。之後，我建議您將 Apache Web 伺服器的配置文件與 Mozilla 的建議進行比較，您可以在此處找到。

我建議您先在ssllabs上測試您的網站。您會看到您的 Apache Web 伺服器存在嚴重的安全問題CVE-2016-2107，可以通過更新 Web 伺服器上的 Apache 和 OpenSSL 軟體來修復。由於安全問題，該網站僅獲得 F 級。

更新 Apache 軟體後，您的伺服器將支持 HTTP/2 協議，這對您的網站非常有幫助。問題是：您的 HTML 頁面載入了 27 個單獨的 CSS 文件（！！！）和 26 個單獨的 JS 文件。http://www.webpagetest.org/網站上的測試（見結果）顯示的結果如下圖所示

可以看到，從你的網站載入的大多數 CSS 和 JS 文件都會一個接一個地載入，這從本質上增加了載入。HTML文件中的以下行：

<link rel="stylesheet" href="/themes/PRS030068/css/global.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/autoload/uniform.default.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/modules/blockcart/blockcart.css" type="text/css" media="all" />
<link rel="stylesheet" href="/js/jquery/plugins/bxslider/jquery.bxslider.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/modules/blockcurrencies/blockcurrencies.css" type="text/css" media="all" />
<link rel="stylesheet" href="/modules/blockfacebook/css/blockfacebook.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/modules/blocklanguages/blocklanguages.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/modules/blockcontact/blockcontact.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/modules/blockmyaccountfooter/blockmyaccount.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/modules/blocknewsletter/blocknewsletter.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/modules/blocksearch/blocksearch.css" type="text/css" media="all" />
<link rel="stylesheet" href="/js/jquery/plugins/autocomplete/jquery.autocomplete.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/modules/blocktags/blocktags.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/modules/blockviewed/blockviewed.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/product_list.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/modules/themeconfigurator/css/hooks.css" type="text/css" media="all" />
<link rel="stylesheet" href="/modules/tmnewproducts/tmnewproducts.css" type="text/css" media="all" />
<link rel="stylesheet" href="/modules/tmfeatureproducts/css/tmfeatureproducts.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/modules/tmhomeslider/css/flexslider.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/modules/blockpermanentlinks/blockpermanentlinks.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/modules/blocktopmenu/css/blocktopmenu.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/modules/blocktopmenu/css/superfish-modified.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/modules/blockcategories/blockcategories.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/modules/blockuserinfo/blockuserinfo.css" type="text/css" media="all" />
<link rel="stylesheet" href="/modules/paypal/views/css/paypal.css" type="text/css" media="all" />
<link rel="stylesheet" href="/themes/PRS030068/css/modules/tmcmsblock/css/tmstyle.css" type="text/css" media="all" />

和

<script type="text/javascript" src="/js/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/js/jquery/plugins/jquery.easing.js"></script>
<script type="text/javascript" src="/js/tools.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/global.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/autoload/10-bootstrap.min.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/autoload/15-jquery.total-storage.min.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/autoload/15-jquery.uniform-modified.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/products-comparison.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/modules/blockcart/ajax-cart.js"></script>
<script type="text/javascript" src="/js/jquery/plugins/jquery.scrollTo.js"></script>
<script type="text/javascript" src="/js/jquery/plugins/jquery.serialScroll.js"></script>
<script type="text/javascript" src="/js/jquery/plugins/bxslider/jquery.bxslider.js"></script>
<script type="text/javascript" src="/modules/blockfacebook/blockfacebook.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/modules/blocknewsletter/blocknewsletter.js"></script>
<script type="text/javascript" src="/js/jquery/plugins/autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/modules/blocksearch/blocksearch.js"></script>
<script type="text/javascript" src="/modules/tmhomeslider/js/jquery.flexslider.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/modules/blocktopmenu/js/hoverIntent.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/modules/blocktopmenu/js/superfish-modified.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/modules/blocktopmenu/js/blocktopmenu.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/tools/treeManagement.js"></script>
<script type="text/javascript" src="/themes/PRS030068/js/index.js"></script>
<script type="text/javascript" src="https://www.hoerschiff.at/themes/PRS030068/js/megnor/owl.carousel.js"></script>
<script type="text/javascript" src="https://www.hoerschiff.at/themes/PRS030068/js/megnor/custom.js"></script>

是邪惡的。

強烈建議從 CDN 載入常用的 CSS/JS 文件。例如，您可以替換行

<script type="text/javascript" src="/js/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-migrate-1.2.1.min.js"></script>

到

<script src="https://cdn.jsdelivr.net/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.migrate/1.2.1/jquery-migrate.min.js"></script>

或者

<script src="https://cdn.jsdelivr.net/jquery/1.11.0/jquery.min.js"
   integrity="sha256-spTpc4lvj4dOkKjrGokIrHkJgNA0xMS98Pw9N7ir9oI="
   crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/jquery.migrate/1.2.1/jquery-migrate.min.js"
   integrity="sha256-xNJPayfMfO6lb77HhrsfSG/a2aH5mPdg920fRGceEFw="
   crossorigin="anonymous"></script>

為了優化在 Chrome 中載入您的網站，您可以在第一行之前添加以下行<link rel="stylesheet" ...>：

<link rel="preload" as="script" crossorigin="anonymous" href="https://cdn.jsdelivr.net/jquery/1.11.0/jquery.min.js"/>
<link rel="preload" as="script" crossorigin="anonymous" href="https://cdn.jsdelivr.net/jquery.migrate/1.2.1/jquery-migrate.min.js"/>
<link rel="preload" as="script" href="/js/jquery/plugins/jquery.easing.js"/>
<link rel="preload" as="script" href="/js/tools.js"/>
<link rel="preload" as="script" href="/themes/PRS030068/js/global.js"/>
...
<link rel="preload" as="style" href="/themes/PRS030068/css/global.css"/>
<link rel="preload" as="style" href="/themes/PRS030068/css/autoload/uniform.default.css"/>
<link rel="preload" as="style" href="/themes/PRS030068/css/modules/blockcart/blockcart.css"/>
...

可以通知網路瀏覽器<link rel="preload"（Chrome 從版本 50 開始，Opera 從版本 38 開始）CSS/JS/Image/Font 可以稍後載入。Web 瀏覽器將使用這些資訊優化文件的載入。請參閱此處，此處了解更多詳細資訊。

在下一步中，我建議您另外使用loadCSS和requireJs來非同步載入大多數 CSS/JS 文件。此外，還有一些非常不錯的工具，例如critical、grunt-critical、demo或這個允許從您載入的 27 個 CSS 文件中提取**關鍵路徑 CSS的工具。**將提取您網站上真正使用的一小部分 CSS 規則。您可以將 CSS 規則包含為內聯CSS。您可以非同步載入所有其他 27 個 CSS 文件使用載入CSS。因此，使用者無需等待 7.890 秒即可看到您的網站開始呈現。時間將大大減少。使用 loadCSS 和 requireJs 非同步載入所有其他 CSS/JS 文件不會阻塞使用者界面。從使用者的角度來看，它將提高您網站的速度。例如，您可以在此處閱讀有關關鍵渲染路徑的更多資訊。

引用自：https://serverfault.com/questions/784591