web-dev-qa-db-ja.com

SSLの初期接続がChrome

私たちの顧客にはPrestaShopベースのWebショップ（ https://www.hoerschiff.at ）があり、ホスティング業者はSSL証明書をインストールしています。 PrestaShopの設定を更新したため、すべてのページがSSL経由で配信されるように強制されました。 Chrome（Safariでも））でのHTTPS経由のページの読み込み時間が非常に遅いのに、Firefoxでは正しく読み込まれるという問題に直面しています。

開発者ツールは、多くのアセット（JS、CSS、PNGなど）の「初期接続」時間が非常に長い（5秒から1.5分まで）ことを示しています。これは、ページ全体が読み込まれたときにのみ発生します。 1つのアセットを直接ロードした場合（例： https://www.hoerschiff.at/themes/PRS030068/js/megnor/custom.js ）、問題なくロードされます。

私はこの問題も発見しました： Chromeはhttpsサイト、特に内部サイトでは遅くなります しかし、アセットがすでにキャッシュされている場合はサイトが正常に読み込まれるため、それを関連付けることができませんでした。

最初に、これはApache/SSL構成の問題である可能性があると思いましたが、Firefoxで正常にロードされるため、当てはまりません。

この初期接続時間が遅くなる原因となるアイデアはありますか？

前もって感謝します！

sslhttpsgoogle-chrome
3
Lukas Leitner

私はまだ問題が何であるかを見つけることができませんでしたが、オフィスで私のインターネットアクセスを介してのみ発生したことが判明しました。それ以外の場所（大学、友人、顧客のインターネットアクセスなど）では、すべてのブラウザで問題なく動作しました。したがって、これは本当に奇妙な動作ですが、他の誰もこれを経験しておらず、非常に低予算のプロジェクトであるため、これ以上調査することはしません。

1
Lukas Leitner

私はWebサイト 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 に関してWebサイトをテストすることをお勧めします。その後、Apache Webサーバーの構成ファイルをMozillaの推奨事項と比較することをお勧めします。Mozillaの推奨事項は here にあります。

ssllabs でのWebサイトのテストから始めることをお勧めします。 Apache Webサーバーに深刻なセキュリティ問題があることがわかります CVE-2016-2107 。これは、Webサーバー上のApacheおよびOpenSSLソフトウェアを更新することで修正できます。セキュリティ問題のため、このWebサイトはFグレードのみを取得しています。

Apacheソフトウェアを更新した後、サーバーはHTTP/2プロトコルをサポートします。これは、Webサイトで非常に役立ちます。問題は、HTMLページが27の個別のCSSファイル（!!!）と26の個別のJSファイルをロードすることです。 http://www.webpagetest.org/ サイト（ the results を参照）でのテストは、以下の画像のような結果を示します

enter image description hereenter image description hereenter image description here

Webサイトから読み込まれたほとんどの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>

悪です。

一般的に使用されるCSS/JSファイルをCDNからロードすることを強くお勧めします。たとえば、行を置き換えることができます

<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=でWebサイトのロードを最適化するには、最初の<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"は、CSS/JS/Image/FontをロードできることをWebブラウザ（バージョン50以降のChromeおよびOperaバージョン38以降））に通知できる後でWebブラウザは、情報を使用してファイルのロードを最適化します。詳細については、 ここ 、 ここ を参照してください。

次のステップでは、 loadCSS と requireJs を使用して、ほとんどのCSS/JSファイルを非同期でロードすることをお勧めします。さらに critical 、 grunt-critical 、 デモ または これ のような非常に優れたツールがあり、抽出できますロードした27個のCSSファイルからのクリティカルパスCSS。 Webサイトで実際に使用されているCSSルールの小さなサブセットが抽出されます。 CSSルールをinlineCSSとして含めることができます。 loadCSSを使用して、他のすべての27個のCSSファイルを非同期でロードできます。その結果、ユーザーはWebサイトのレンダリングの開始を見るまで7.890秒待つ必要はありません。時間は劇的に短縮されます。 loadCSSおよびrequireJsを使用して他のすべてのCSS/JSファイルを非同期にロードしても、ユーザーインターフェイスはブロックされません。それは本質的にユーザーの観点からあなたのウェブサイトの速度を改善します。たとえば、クリティカルレンダリングパス here の詳細を読むことができます。

1
Oleg