2

HTTP is fast (on initial pageload) while HTTPS is secure. I have a site example.com that only needs to be secure when the user is logged in (it uses secure cookies for authentication).

With speed being one of the most important factors in a first impression, I want to serve the normal HTTP page (http://example.com) and then lazily upgrade to HTTPS using Javascript.

if ( location.protocol === 'http:' ) {
    $.ajax({
        url: 'https://example.com',
        cache: true,
        success: function() {
            window.top.location.replace('https://example.com');
        }
    );
}

Doing it this way can cause the page to "flash" as the new page loads. Is there a way to do this that is less noticeable for the user?

Justin Elkow
  • 2,833
  • 6
  • 28
  • 60

2 Answers2

5

The flash would be coming from the loading of assets/css/images etc from the second https url.

While http is faster there are SEO benefits for making the public facing parts of a site https which would solve the dual domain issue.

Prefetch

If they were on the login screen and you knew they were soon to be redirected to secure https version you could start preloading the assets on the https protocol.

Some HTML5 prefetching could be nice for that, How can I preload a page using HTML5?

<link rel="prefetch" href="/path/to/prefetch" />

link to assets consistently with https

You could link to all your assets on the http site with the https protocol, no preloading required. This might add overhead to anyone not on the https version. So you may just want to load logo/header graphics and css/js over https. This would improve the perceived performance for when the domain switched the main assets and styles would snap into place like any other reload.

CDN

Ultimate solution would be to push out the assets to a Content Delivery Network like Amazon Web Services. So both domains load the same assets, you'll have to use https or else you'll get warnings when linking to http when on a https domain. When the user switches the browser will already hold a cached copy of all the assets. This will speed up page loads in general to. With the concurrent request limits browsers have (between 6 - 8) it means your server will deliver important things like HTML, and the browser can simultaneously load assets from the CDN.

SPDY

Getting back on topic, considering protocol upgrades I would start looking into Google's SPDY. Chrome Firefox Opera & IE11 have support. Its secure and faster than HTTP or HTTPS. Couple that with some WEBP graphics loading off a CDN and you'll be in danger of near light speed. http://en.wikipedia.org/wiki/SPDY#Browser_support_and_usage

Lex
  • 4,749
  • 3
  • 45
  • 66
  • This article from 2009 suggests not upgrading to SPDY due to the overhead created by mandatory SSL encryption and gzip compression which, "will hit server and client CPUs much harder than traditional HTTP" Obviously it will depend a lot on your specific website and your user base but it is a factor you may want to look at if all you want is avoiding the "'flash' as the new page loads". http://arstechnica.com/business/2009/11/spdy-google-wants-to-speed-up-the-web-by-ditching-http/ – Only You Apr 10 '14 at 18:24
  • If you want to make the flash caused by page load less noticeable by loading it faster, you will need to keep page load time closest to a number of milliseconds that make it imperceptible to the human eye. That number is typically just a few milliseconds. From Wikipedia "When looking at a lighted display, people begin to notice a brief interruption of darkness if it is about 16 milliseconds or longer." http://en.wikipedia.org/wiki/Frame_rate – Only You Apr 10 '14 at 20:16
  • 1
    Another initiative from Google to speed up download and rendering. "Using mod-pagespeed, Google says, can often halve the download times for larger websites." http://techcrunch.com/2012/10/10/googles-mod_pagespeed-is-now-out-of-beta-and-ready-to-make-your-sites-faster/ Regarding the Content Delivery Network solution, make sure resources served through HTTPS can be cached. http://www.web-caching.com/ – Only You Apr 10 '14 at 20:31
-1

you you want you can do it in php only. 

if($_SERVER['SERVER_PORT'] != 443) {
  $url = "https://{$_SERVER[HTTP_HOST]}{$_SERVER[REQUEST_URI]}";
  header("Location: $url");
  exit;
}
Dimitri
  • 453
  • 3
  • 11