Optimize CSS Delivery question

[Tamás Barta]

Hi,

PageSpeed Insights says at "Should Fix" that "Optimize CSS Delivery" is needed for "https://bookline.hu"

I implemented their suggestion and it is still reporting the same problem:

{

<script>
	// CSS delivery optimization: How to defer css loading
	var loadDeferredStyles = function() {
	var addStylesNode = document.getElementById("deferred-styles");
	var replacement = document.createElement("div");
	replacement.innerHTML = addStylesNode.textContent;
	document.body.appendChild(replacement)
	addStylesNode.parentElement.removeChild(addStylesNode);
	};
	var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
	if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
	else window.addEventListener('load', loadDeferredStyles);
	</script>
	<noscript id="deferred-styles">
	<link rel="stylesheet" type="text/css" href="//marvin.bline.hu/css/combined.css?v=1465887046000" />
	<link rel="stylesheet" type="text/css" href="//marvin.bline.hu/nimg/news.css" />
	<link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,300,400,600&subset=latin,latin-ext' rel='stylesheet' type='text/css'/>
	</noscript> } Could somebody check what did I do wrong? Thanks, Tamás

[Rick Steinwand]

I would think working on things you can fix easily would be best. Optimizing CSS delivery is one of the harder ones.

Enable compression

Optimize images

(Those two alone would help a lot.)

Move inline css to the head. (always load css before scripts)

Move inline scripts to the bottom of the page, before the </body>

Combine external scripts into one and load it at the bottom of the page.

See if you can add "defer" to external scripts without breaking anything.

Optimizing css delivery involves determining what css is needed to render the page and inlining it at the top of all pages. Then you defer loading of the remaining css with a script at the bottom. It's not an easy project and should be the last thing you do. (Go for the low hanging fruit first.)

[Tamás Barta]

Hi,

I understand what you wrote but now my problem is why the suggested solution by PageSpeed for css delivery isn't accepted.

I load every css after window.load as they wrote.

[Joshua Marantz]

Did you also inline the critical css in the head?  Otherwise, delay loading the critical css will make your page slower and add a flash of unstyled content.

You might want to consider using one of the automated solutions described in the site to help you determine the critical css.

Josh

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/985267c4-cccf-4252-b88d-d9a51b72f564%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Rick Steinwand]

Here's an online critical css generator: https://jonassebastianohlsson.com/criticalpathcssgenerator/

Much easier to add the PageSpeed modules to your server tho. http://blog.chromium.org/2016/05/saving-data-with-googles-pagespeed.html