page speed optimization problem

Discussion in 'Web Design and Development' started by olup, Jul 23, 2014.

  1. olup macrumors 6502

    Joined:
    Oct 11, 2011
    #1
    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?
     
  2. 960design macrumors 68020

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #2
    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?
     
  3. olup thread starter macrumors 6502

    Joined:
    Oct 11, 2011
    #3
    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.
     
  4. 960design macrumors 68020

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #4
    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...
     
  5. olup thread starter macrumors 6502

    Joined:
    Oct 11, 2011
    #5
    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.
     

Share This Page