When I migrated my website to Jekyll a few months ago, I used a free template for my layout. Although it looked quite good, it came with a major tradeoff. It used Skel, a JavaScript framework for responsive websites. Skel loads arbitrary CSS stylesheets with JavaScript, based on the user’s screen resolution. This may sound convenient, but the page will load visibly slower, because the stylesheets will only load after all the JavaScript is loaded and executed. See an example of Skel in action in the following listing:
1skel.init({
2 reset: 'full',
3 breakpoints: {
4 global: { range: '*', href: '/css/style.css', containers: 1400, grid: { gutters: 50 } },
5 wide: { range: '-1680', href: '/css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
6 normal: { range: '-1280', href: '/css/style-normal.css', containers: 960, viewport: { scalable: false } },
7 narrow: { range: '-980', href: '/css/style-narrow.css', containers: '95%', grid: { gutters: 30 } },
8 narrower: { range: '-840', href: '/css/style-narrower.css', grid: { collapse: 1 } },
9 mobile: { range: '-736', href: '/css/style-mobile.css', containers: '100%', grid: { gutters: 15, collapse: 2 } }
10 },
11 // ...
12});
So I decided to replace Skel with Bootstrap. Bootstrap uses media queries to determine the user’s screen resolution. As media queries are executed when the stylesheet is loaded, the page will display content significantly faster. In the following listing, you can see the differences regarding loaded stylesheets and scripts:
1<!-- Before -->
2<script src="/js/skel.min.js"></script>
3<script src="/js/skel-layers.min.js"></script>
4<script src="/js/init.js"></script>
5
6<link rel="stylesheet" href="/css/syntax.css"/>
7
8<noscript>
9 <link rel="stylesheet" href="/css/skel.css"/>
10 <link rel="stylesheet" href="/css/style.css"/>
11 <link rel="stylesheet" href="/css/style-wide.css"/>
12 <link rel="stylesheet" href="/css/style-noscript.css"/>
13</noscript>
14
15<!-- After -->
16<link rel="stylesheet" href="/css/bootstrap.min.css"/>
17<link rel="stylesheet" href="/css/bootstrap-grid.min.css"/>
18<link rel="stylesheet" href="/css/bootstrap-reboot.min.css"/>
19<link rel="stylesheet" href="/css/syntax.css"/>
20<link rel="stylesheet" href="/css/style.css"/>
21
22<script src="/js/bootstrap.min.js"></script>
On the other side, the HTML markup got a little more complex - but that’s just the bootstrap way. As long as the page loads faster, I’m happy ;)