Menu icon Foundation
Foundation is slow for me

Hi,

I'm more of a hobby developer and in the process of finding my way in to a suitable responsive workflow.

Now I fiddled with the configurator before downloading and find that the page takes a huge amount of time to load (>10 seconds), no matter if I download all the features or just the grid.
This occurs when opening the example in the zip file and also when I create my own page with foundation (by removing the html content and inserting my own stuff).

Now I am probably doing something majorly wrong ;)
I would appreciate it if you could point me in the right direction.

Many thanks in advance!

slowload time

Hi,

I'm more of a hobby developer and in the process of finding my way in to a suitable responsive workflow.

Now I fiddled with the configurator before downloading and find that the page takes a huge amount of time to load (>10 seconds), no matter if I download all the features or just the grid.
This occurs when opening the example in the zip file and also when I create my own page with foundation (by removing the html content and inserting my own stuff).

Now I am probably doing something majorly wrong ;)
I would appreciate it if you could point me in the right direction.

Many thanks in advance!


Jake Braden gave the most helpful answer for this post
Jake Braden over 5 years ago

Preferable solution:

change the first line of the foundation.css file to

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

note the ":html" in front of it. Hope this helps!

joshua mccoy over 5 years ago

I seem to be having the exact same problem.
If you find a solution please share.

Jake Braden over 5 years ago

Hello! I have been having problem as well. However i believe that i have found a solution. Open your foundation.css file in a text editor. The top line of code should be

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

Copy and paste the link part of the code:

//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700

Copy and past the text on the page in to the first line of the foundation.css file.

Then, delete the
@import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
and save your file.

The page should refresh much faster. If you have any questions, simply reply back(:

Jake Braden over 5 years ago

Preferable solution:

change the first line of the foundation.css file to

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

note the ":html" in front of it. Hope this helps!

Robin Cox over 5 years ago

Thanks alot Jake, that preferable solution worked fine. I went from a loading time of 18 seconds to instantly loading the page :)

Robin Cox over 5 years ago

As soon as I save the file _settings.scss it changes back to:

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

which again results in a really slow loading time. Also this line seems to force "open sans" on all of my text on the website, even if I change h1, h2, h3 an so on to another font.

How can I change this permanent with the :http before the link and being able to change fonts without using !important?

Rafi Benkual over 5 years ago

Thanks everyone! We have added this post as a comment to our Foundation 5.1 milestone on GitHub https://github.com/zurb/foundation/issues/3951

Paul Ellis over 5 years ago

@Robin Cox:

We SCSS users have to make the change in the .../bower_components/foundation/scss/foundation/components/_global.scss file line 283, then recompile your app.scss file to app.css. The change should be maintained then.

Gary Dean over 4 years ago

My web pages take about 12 seconds to load. No caching seems to be happening either.

Basic web code is below.

My site uses SSL.

I've seen references to other messages here concerning slow response times, but these are related to a resolved issues with google fonts.

I'd be grateful for any assistance/comments.

<!DOCTYPE html>
<html class='no-js' lang='en'>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <link rel='stylesheet' href='css/normalize.min.css'>
  <link rel='stylesheet' href='css/foundation.min.css'>
  <link rel='stylesheet' href='img/foundation-icons/foundation-icons.css'>
  <script src='js/vendor/modernizr.js'></script>
  <link rel='shortcut icon' href='/favicon.ico'>
</head>
<body>


<script src='js/vendor/jquery.js'></script><script src='js/foundation.min.js'></script><script>$(document).foundation();</script>
</body>
</html>


NB: i tried posting this as a new message, but clicking "Publish" did nothing.



Karl Ward over 4 years ago

Foundation doesn't have much effect on how fast/slow your page loads, because essentially it's just a few files. There are many factors for load time, the most important to check:

  1. Are you using some backend/php? If so, check response time from your server.

  2. Even if you are not using any backend to process output, check response time of a single file from your server (for example a JS or CSS file). This is crucial, as some servers are simply slow, and will take time to respond for every call.

  3. If the above is eliminated, you should: A) Make sure your server is using GZIP compression, B) Minify and concatenate js and css files.