bootswatch makes my webpage load slow even on my computer in previews?

Question

So Bootswatch.com has some awesome themes for twitter bootstrap. Unfortunately as soon as I swapped out the CSS scripts for Bootswatch.com the webpage loads super super slow. On my computer when i click preview or double click the .html file.

What is causing this to happen? its not even uploaded to the internet, this is all local. I cant understand why changing the CSS would make a difference. Not to mention the new CSS has fewer lines of code.

What counts as "super super slow"? Are we talking 0.5-1.0s or 5-6s? In my experience bootstrap is a very slow and poorly optimized CSS/JS framework/library. So some kind of increased render-time will be experienced. — Daniel, Sep 12 '13 at 22:48
Slow as in like 6-9 seconds. Othersise BS loads instantly without the theme. I decided just to make my own CSS theme using bootstrap behind it. Thanks for the input though :) — Jeff Meigs, Sep 20 '13 at 02:28

Three Value Logic · Accepted Answer · 2014-02-05T12:04:06.033

3

I had exactly the same problem.

The issue the the first line of the CSS where it tries to load from google fonts:

@import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");

Simply delete or comment out this line so the file starts like this:

 * Bootswatch v3.1.0
 * Homepage: http://bootswatch.com
 * Copyright 2012-2014 Thomas Park
 * Licensed under MIT
 * Based on Bootstrap

edited Feb 05 '14 at 12:04

answered Feb 05 '14 at 11:47

Three Value Logic

1,102
1
15
37

1

this worked perfectly and I did not have any css issues with the fonts either. Thank you! – Bacon2305 Apr 16 '14 at 16:55

score 1 · Answer 2 · answered Jul 06 '14 at 15:55

1

Late to the party but the URL is broken, put "http:" in front of the URL:

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");

answered Jul 06 '14 at 15:55

Oszur

19
3

2

For reference, the missing protocol is/was a feature, not a bug, and allows the browser to request the resource over whatever the current protocol is. This avoids "insecure content" warnings if the page was https but the protocol used in the font request was http. More info http://www.paulirish.com/2010/the-protocol-relative-url/ – Don't Panic Apr 02 '16 at 09:54

score 0 · Answer 3 · answered Sep 12 '13 at 20:43

0

Did you download any image with the theme? Maybe the CSS has external references for images.

If you didn't, try to load again your site with your firebug open in 'Network', so you can see whats making the load slow.

answered Sep 12 '13 at 20:43

Helike Long

58
4

score 0 · Answer 4 · answered Sep 12 '13 at 23:31

Some themes from any source often use code which is easy to customise but may not be the most efficient. Out of the box Bootstrap 2 has a max of 2 css files and 1 JS file (if you go with the combined file)

If I check the source code for the Bootswatch Amelia theme I see an extra 2 CSS files, an extra 2 JS files plus at least 2 Google fonts.

This maybe doesn't explain everything, though it wouldn't help for sure.

Good luck!

RobDil · Answer 5 · 2016-07-27T08:12:13.113

If a Bootswatch theme is loading slowly and you find the reason to be the referenced Google fonts, you can try to embed them into your application to make them available offline.

The latest Bootswatch versions (> 3.3.6.1) introduce a SASS variable $web-font-path that you can override and set to an empty value:

// use google fonts api offline
$web-font-path: '';
@import "fonts.yeti.offline";

@import "yeti/variables";
@import "yeti/bootswatch";

To serve the required fonts offline, I used https://google-webfonts-helper.herokuapp.com to generate the fonts.yeti.offline.scss file and to download the required font files. To switch between online and offline mode, you can toggle the first two lines in your code.

bootswatch makes my webpage load slow even on my computer in previews?

5 Answers5