Improving page speed with a framework change
20.07.2017 | Programming | Framework Bootstrap Pagespeed
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});