Google Page Speed performance

[sarfraz-qasim]

Hello,

This is great framework without any doubt but when we talk about responsive websites for mobile devices speed must be a major factor. If you run html4up.net website on Google page speed this is showing very low page rank. Please have a look.

http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fhtml5up.net%2F

I think things can be improve if SkelJS framework loads dynamic CSS files into single <style> block and is it possible to load it at the bottom of page instead of header which is termed as above the fold by Google.

Waiting for your response as I am developing my website on this framework.

Thanks,
Sarfraz Qasim

[ajlkn]

It has less to do with skelJS and more to do with the fact that html5up.net is very image heavy.

[sarfraz-qasim]

Your page has 4 blocking script resources and 8 blocking CSS resources. This causes a delay in rendering your page.

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Remove render-blocking JavaScript:
    http://html5up.net/assets/js/jquery.min.js
    http://html5up.net/assets/js/config.js
    http://html5up.net/assets/js/skel.min.js
    http://platform.twitter.com/widgets.js
Optimize CSS Delivery of the following:
    http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,700,900
    http://html5up.net/assets/css/style.css
    http://html5up.net/assets/css/style-narrow.css
    http://html5up.net/assets/css/style.css
    http://html5up.net/assets/css/style-narrow.css
    http://html5up.net/assets/css/style-narrow-n1.css
    http://html5up.net/assets/css/style-narrow-n2.css
    http://html5up.net/assets/css/style-narrow-n3.css

[ajlkn]

I don't see why you couldn't move it out of the . I'll experiment with it in the next version.

[sarfraz-qasim]

Is there anyway from which we can add dynamically generated <style> blocks to footer of the page instead of header?

[ajlkn]

Not as of yet, but I'll see if it's feasible to add as a feature.

On 10/28/2013 1:25 PM, sarfraz-qasim wrote:

Is there anyway from which we can add dynamically generated <style> blocks to footer of the page instead of header?

---

Reply to this email directly or view it on GitHub:
#16 (comment)

[sarfraz-qasim]

I have achieved what I want by comment out the line (mentoned below) on skel.js file and replaced it with new line. Created span on html document somewhere in the footer with the "css-block" id. Not sure it is correct way to do that.

//_.registerLocation('head', document.getElementsByTagName('head')[0]);
_.registerLocation('head', document.getElementById('css-block'));

Now working on to create only one style block instead of multiple style blocks.

[tomByrer]

I think the JS generates the layout? If so, there is a good chunk of the page-lag. IMHO much of the layout should be in the CSS & @media rules.

html5up.net is very image heavy

Somewhat, but I've seen worse. You could squeeze out another ~6% of image filesize with some super-compressors. Also, I suspect that deviantArt runs on a CDN, so some of that is mitigated. You can "lazy-load" the images below the fold, minimize the files, etc to get a bit more speed also.

[ajlkn]

Media queries: skelJS replaces these (by design; see the docs).

html5up.net: Doesn't host anything at dA.

Lazy loading: Considered this. Didn't implement it because the images wouldn't be seen by Google Images.

[tomByrer]

Media queries: skelJS replaces these (by design; see the docs).

Exactly why skelJS is not as fast as it could be. CSS runs at browser-speed, fast as you can get since it is likely in C++. When you start writing CSS via JavaScript, you have to wait for all the JS & dependencies to be loaded, then it has to be re-written as bytecode, then ran, creating pointers & allocate memory to hold variables, manipulating strings, inserting into HTML/CSS, etc... all that can never be as fast as CSS by itself.

[tomByrer]

Lazy loading: images wouldn't be seen by Google Images.

True, that is why there is often an HTML sent to search engines, & a different HTML sent to other clients. Needs back-end .config editing & some extra work, but you can have the best of both worlds if you wish. Depends on how much time you have for optimization.