CODEWITHSUNDEEP
cssperformancetwitter-bootstrapbootswatch
Jeff Meigs
Jeff Meigs

Reputation: 305

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

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.

Upvotes: 2

Views: 1373

Answers (5)

RobDil
RobDil

Reputation: 4544

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.

Upvotes: -1

Oszur
Oszur

Reputation: 19

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");

Upvotes: 1

Three Value Logic
Three Value Logic

Reputation: 1112

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

Upvotes: 3

David Taiaroa
David Taiaroa

Reputation: 25475

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!

Upvotes: 0

Helike Long
Helike Long

Reputation: 58

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.

Upvotes: 0

Related Questions