Our customer has a PrestaShop based Webshop (https://www.hoerschiff.at) and now his hoster installed a SSL Cert. We updated the configuration of PrestaShop, so all pages are forced to be delivered via SSL.
We're now facing the issue that the page loading time via HTTPS in Chrome (also in Safari) is painfully slow, while in Firefox it loads as it should.
The developer tools show that a lot of assets (JS, CSS, PNG etc.) have a very high 'initial connection' time (from 5sec up to 1.5min).
This only occurs when the complete page is loaded. If I load one asset directly (e.g. https://www.hoerschiff.at/themes/PRS030068/js/megnor/custom.js) it loads just fine.
I also found this issue: Chrome slow over https sites, particularly internal ones
But couldn't relate to it since when the assets are already cached the site loads normally.
First I thought this might be a Apache/SSL configuration issue, but since it loads normally in Firefox that shouldn't be the case.
Do you have any ideas what could cause this slow initial connection time?
Thanks in advance!
Best Answer
I looked the web site https://www.hoerschiff.at/ and could see many different problems. I would separate the problem in groups:
I recommend you to test your web site at least with respect of Qualys SSL Server, www.webpagetest.org and validator.w3.org. After that I'd recommend you to compare the configuration file of your Apache web server with Mozilla recommendations, which you can find here.
I'd recommend you to start with testing of your web site on ssllabs. You will see that your Apache web server have serious security problem CVE-2016-2107, which can be fixed by updating Apache and OpenSSL software on the web server. Because of the security problem the web site gets the grade F only.
After updating Apache software your server will support HTTP/2 protocol, which is very helpful on your web site. The problem is: your HTML page loads 27 separate CSS files (!!!) and 26 separate JS files. The test on http://www.webpagetest.org/ site (see the results) shows the results like on the picture below
You can see that the most CSS and JS files loaded from your web site will be loaded one after another, which increases the loading essentially. The below lines from HTML files:
and
are evil.
It's strictly recommended to load common used CSS/JS files from CDN. For example you can replace the lines
to
or
To optimize loading of your web site in Chrome you can include the following lines before the first
<link rel="stylesheet" ...>:The
<link rel="preload"can informs the web browser (Chrome starting with version 50 and Opera starting with version 38) that CSS/JS/Image/Font can be loaded later. The web browser will optimize the loading of the files using the information. See here, here for more details.In the next step, I'd recommend you additionally to use loadCSS and requireJs to load the most CSS/JS files asynchronously. Moreover there are very nice tools like critical, grunt-critical, the demo or this one which allows to extract critical path CSS from 27 CSS files which you loads. The small subset of CSS rules which are really used on your web site will be extracted. You can include the CSS rules as inline CSS. You can loads all other 27 CSS files asynchronously using loadCSS. As the result the user will don't need to wait 7.890s till seen the starting rendering of your web site. The time will be dramatically reduced. Asynchronously loading of all other CSS/JS files using loadCSS and requireJs will don't block the user interface. It will improve the speed of your web site essentially from the users point of view. You can read more about critical rendering path here for example.