Назад | Перейти на главную страницу

Первоначальное соединение SSL мучительно медленное в Chrome

У нашего клиента есть интернет-магазин на базе PrestaShop (https://www.hoerschiff.at), и теперь его хостер установил сертификат SSL. Мы обновили конфигурацию PrestaShop, поэтому все страницы принудительно доставляются через SSL. Теперь мы столкнулись с проблемой, что время загрузки страницы через HTTPS в Chrome (также в Safari) очень медленное, тогда как в 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
  • минимизация изображений
  • использование общеизвестных CSS / JS (например, jQuery, Font Awesome 4.3, ...) из CDN
  • минификация файлов JS / CSS
  • использование сжатия GZip на сервере (например, для статических файлов, таких как файлы JS / CSS)
  • размещение всех образов на CDN. Например облачный позволяет бесплатно размещать множество изображений на CDN (2 ГБ, 7500 преобразований в месяц).

Я рекомендую вам протестировать свой веб-сайт хотя бы на предмет Qualys SSL Server, www.webpagetest.org и validator.w3.org. После этого я бы рекомендовал вам сравнить файл конфигурации вашего веб-сервера Apache с рекомендациями Mozilla, которые вы можете найти Вот.

Я бы рекомендовал вам начать с тестирования вашего веб-сайта на ssllabs. Вы увидите, что на вашем веб-сервере Apache есть серьезные проблемы с безопасностью. CVE-2016-2107, что можно исправить, обновив программное обеспечение 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>

злы.

Строго рекомендуется загружать часто используемые файлы 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, вы можете включить следующие строки перед первым <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 потом. Веб-браузер оптимизирует загрузку файлов, используя информацию. Видеть Вот, Вот Больше подробностей.

На следующем этапе я бы порекомендовал вам дополнительно использовать loadCSS и requireJs для загрузки большинства файлов CSS / JS асинхронно. Кроме того, есть очень хорошие инструменты, такие как критический, хрюкающий, демо или вот этот что позволяет извлекать критический путь CSS из 27 загружаемых вами файлов CSS. Будет извлечено небольшое подмножество правил CSS, которые действительно используются на вашем веб-сайте. Вы можете включить правила CSS как в линию CSS. Вы можете загрузить все остальные 27 файлов CSS. асинхронно используя loadCSS. В результате пользователю не нужно будет ждать 7,890 с, пока не увидит начало рендеринга вашего веб-сайта. Время будет резко сокращено. Асинхронная загрузка всех других файлов CSS / JS с использованием loadCSS и requireJs не блокирует пользовательский интерфейс. Это существенно повысит скорость вашего веб-сайта с точки зрения пользователей. Вы можете узнать больше о критическом пути рендеринга Вот например.