Swiss Air

View Swiss Air

Swiss Air is an airline website built with progressive enhancement in mind.  A lovely responsive experience that works without javascript, however it does have some performance improvements that could be made.

There are 4 separate CSS file http requests (none of which are hidden in conditional comments) which means that they could be saving 3 http requests.

There are also 6 separate JS file requests, again some of them could be concatenated to save the additional http requests.

While there are some strange additional http requests they do include both Modernizr and Respond.js to help with providing a better experience for the user.

Require.JS loads in the relevant JS files and modules when required for each page/section, an example implementation from the homepage below.

var require = {
    paths: {
        jquery: "lib/util/loaded-jquery",
        moment: "vendor/moment"
    },
    shim: {
        "app/plugins": {
            deps: ["jquery"]
        },
        "app/modules": {
            deps: ["jquery", "app/plugins"]
        }
    }
};

Swiss Air Technical Details

Site Meta Tag

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">

Media Queries

@media only screen and (max-width: 400px) { }

@media only screen and (max-width: 520px) { }

@media only screen and (max-width: 750px) { }

@media only screen and (max-width: 850px) { }

@media only screen and (max-width: 1020px) { }

@media (max-width: 1050px) { }

@media (min-width: 1051px) { }