Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

olup

Cancelled
Original poster
Oct 11, 2011
383
40
I'm currently trying to improve the page speed of my website.
The most important css, most of the stuff above the fold, is inlined in a style tag in the head.

The rest is served, using javascript provided by the filament group on github, source is below. To defer it, if you will and send things across the wire more quickly.

Code:
 function loadCSS(e,t,n){"use strict";var i=window.document.createElement("link");var o=t||window.document.getElementsByTagName("script")[0];i.rel="stylesheet";i.href=e;i.media="only x";o.parentNode.insertBefore(i,o);setTimeout(function(){i.media=n||"all"})}
      loadCSS('//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css');
      loadCSS('http://fonts.googleapis.com/css?family=Carrois+Gothic|Yanone+Kaffeesatz:700');
      loadCSS('css/screen.css');
The complete function can be https://github.com/filamentgroup/loadCSS
Yet I still get complaints from pagespeed insights, that I have 3 css resources, above mentioned ones, blocking my page. I don't understand, why that is. Can anyone shed any light on this?
 

960design

macrumors 68040
Apr 17, 2012
3,689
1,548
Destin, FL
I'm sorry to read that you are having slow page loading times. Without actually seeing your code and website host setup we can only guess at what maybe slowing your page down.

After only reading your description you've seemed to hit every one of my speed peeves in a bad way.

1) Header styled css
2) Javascript to load css


What is your current average load time?
 

olup

Cancelled
Original poster
Oct 11, 2011
383
40
I'm sorry to read that you are having slow page loading times. Without actually seeing your code and website host setup we can only guess at what maybe slowing your page down.

After only reading your description you've seemed to hit every one of my speed peeves in a bad way.

1) Header styled css
2) Javascript to load css


What is your current average load time?

Loadtime as of now is 420ms, getting 91/100 on the pagespeed insights. I tried to stick to the suggestions as much as possible that Google makes.

https://developers.google.com/speed/pagespeed/service/DeferJavaScript


http://https://developers.google.com/speed/pagespeed/service/PrioritizeCriticalCss

Everything is minified and gzipped, I also optimized the images. Not sure what else I can do. The javascript to load the css, loads it assynchronously.
 

960design

macrumors 68040
Apr 17, 2012
3,689
1,548
Destin, FL
420ms? Why are you spending time on this? Anything less than a second is considered instant. Your site is twice as fast as instant. Working your fingers to the bone to load your page even 100ms faster will not be noticeable by humans. You are definitely doing it the right way.

If your site makes you money by the number of page load times per second try rewriting your code in node.js.

420ms is plenty fast. Now get outside and run some miles, sail some ships, ride some bikes, make a new friend...
 

olup

Cancelled
Original poster
Oct 11, 2011
383
40
yeah you're right. It's just my portfolio, so I shouldn't spend indefinite amounts of time on this. What's odd though is that I can't defer the jquery loaded from a cdn. So I decided to let it load asynchronously. I have no idea why this is.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.