New Rules?!.

[Miguel García Sánchez - Colomer]

Dave, Dani... I have problems with the new detection rules... i have a lot of problems with css optimization and new rules.

I'm in blogger and with the past rules i've fixed the css render blocking inlining my css code... but now it has improved the "prioritize visible content" and all my "inlined css" it's bad... what can i do to fix it? (i have a very long css file). My web is www.diariosdelanube.com

Thenk you in advance

[Miguel García Sánchez - Colomer]

Nobody could help??

El jueves, 19 de junio de 2014 15:43:19 UTC+2, Miguel García Sánchez - Colomer escribió:

Dave, Dani... I have problems with the new detection rules... i have a lot of problems with css optimization and new rules.

I'm in blogger and with the past rules i've fixed the css render blocking inlining my css code... but now it has improved the "prioritize visible content" and all my "inlined css" it's bad... what can i do to fix it? (i have a very long css file). My web is www.diariosdelanube.com

Thank you in advance

[Dave Mankoff]

Howdy Miguel.

Looking at your results, I don't see Prioritize Visible Content triggering. You're actually looking pretty good on the whole. Maybe work on Minify HTML, but other than that, I'd say you've been quite successful in getting the most out of the Blogger platform that you can.

-dave mankoff

man...@google.com

[Miguel García Sánchez - Colomer]

Howdy Dave, it's a pleasure to talk with you.

i have seen my new pagespeed results. I have lowered my score from 90 to 73 in mobile section with the latest rules (and 92 to 88 in desktop). Before the latest update, i don't have any "Prioritize visible content" message (i have moved my javascript to the "correct place" where it's going to be used), but now it's my main suggestion in mobile section.   

Look at my results (they are in spanish):

73 / 100Velocidad

Elementos que debes corregir:

Prioriza el contenido visible

Tu página requiere indicaciones completas de red adicionales para procesar el contenido destacado en la parte superior de la página. Para obtener un rendimiento óptimo, reduce la cantidad de HTML necesario para procesar dicho contenido.

Toda la respuesta HTML no era suficiente para visualizar el contenido de la mitad superior de la página. Esto suele indicar que eran necesarios recursos adicionales, que se cargan después del análisis de HTML, para presentar este contenido.Prioriza el contenido visible que se necesita para visualizar el contenido de la mitad superior de la página incluyéndolo directamente en la respuesta HTML.

• Solo se ha podido procesar cerca de un 1% del contenido final de la mitad superior de la página con la respuesta de HTML completa ver la captura de pantalla.

Ocultar detalles

I have a lot of css code and jquery code "inlined" in my page to optimize the delivery and to avoid the render blocking, I think that this would be the problem. I can't fix it correctly, could you help me anwering some questions?:

1) I don't know how to optimize my css delivery because i have a "long" css, I have inlined it but it's very long even minified. What can i do?

 

2) I can't make "async" my jquery "includes" and i don't know how to do it correctly. As with CSS if i inline the jquery .js, the code it's too long. What can i do?

Best regards and than you very much in advance. 

[Dave Mankoff]

Howdy Miguel.

Taking a look at your page, it appears as though the css to size the top image carousel is not in place. That is to say, when your page first loads, the red button is pulled near the top of the page, and then it pushes down after the images load. Maybe this is JavaScript related?

-dave mankoff

man...@google.com

[Miguel García Sánchez - Colomer]

Ok Dave,

but what i have to do?, i have deleted the carousel and the "tickers" with their buttons and it continues the "prioritize visible content" suggestion. 

[Dave Mankoff]

I wouldn't necessarily recommend deleting the carousel. The problem is that your inline CSS did not define the size of the carousel. When the page first loads, it is rendered at 0px high, and then later pops into place, causing all of the content to jump.

The easiest way to think about this rule is this: Find all of the HTML elements (<div>, <img>, <form>, <input>, <span>, <table>, <iframe> etc) that are visible above the fold when your page is fully loaded. Make sure that your inlined CSS specifies the necessary information to figure out the size of those elements. This might include widths, heights, font sizes, font weights, floats, displays, etc. This includes content as well - if you have a <p> tag that starts empty and then gets filled in via AJAX, that causes a problem because it will cause the size of the <p> tag to change.

-dave mankoff

man...@google.com

[Miguel García Sánchez - Colomer]

Oh, but the size of that carousel it's calculated because it's fully responsive... what can i do in that case?

[Dave Mankoff]

So I don't know of any solutions to this problem that I love or otherwise consider elegant. Here is a post that I just searched that shows how to define a div with a fixed ratio using only css:

http://www.mademyday.de/css-height-equals-width-with-pure-css.html

If you know the ratio that you want your carousel displayed at, you need only to follow that guide.

Alternatively, you can try doing it with a small bit of inline javascript: Figure out the width of the page and set the height of the carousel accordingly. As long as you inline the JS, we don't consider it a blocking resource. Just make sure that it's small enough to stay under 14KB for the above-the-fold content.

-dave mankoff

man...@google.com

[Miguel García Sánchez - Colomer]

So, the problem it's the height in auto? please write the part of css that it may causing the problem.

Thank you.

--
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/CACsObMOcqjAH31U9vYa-8DV7m6cc2C5m2W7sFRGE0QfnO%2BuRgA%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

[Dave Mankoff]

"height: auto" is the basic problem, yes. The browser can't figure out the height of your carousel until after the image has started downloading - a separate request. The goal of this rule is to get the page as close to it's final layout as possible in a single request.

The article that I linked provides an example of how to specify a width/height ratio using only CSS. You can size your carousel in this way before the images have started downloading.

-dave mankoff

man...@google.com

[Miguel García Sánchez - Colomer]

Ok, i'm going to investigate... I have changed it and i continue with "prioritize visible contente"... but all the webs that i have tested (not made for me only) have this problem... it's going to be very hard to fix it... let me try. I'll write you with  news. 

Thank you very much.

[Miguel García Sánchez - Colomer]

I have changed the height from auto... but it's nothing to do with the prirotize visible content... i think that i have change all my template with a new design...

[Dave Mankoff]

I think there was some miscommunication. Height-auto will not fix the problem; it is part of the problem. When you use height-auto, the browser can't figure out the size of the image until it downloads it.

You need to use a technique which specifies both the width and the height of the image before the image is downloaded.

-dave mankoff

man...@google.com

[Miguel García Sánchez - Colomer]

I know... but it's complicated because there are a lot of "auto" when you are doing something "responsive"... i have to pre-calculate the aspect ratio and the width plus heigh... i'll try it but i think that i have to redefine a lot of things

[Miguel García Sánchez - Colomer]

After done a lot of proobs i have  seen that the most blogger templates are using javascript to make "responsive" their images or to load the posts via feed... so i can't prioritize visible content well, there are a lot of pages using this way to make their pages... i'm continue trying ;) but it's very difficult.

[Carlos Lizaga Anadon]

Try to set up a min-height for the carousel with the average size of desktop and mobile screens. Keep in mind that you can use http://detectmobilebrowsers.com/ script to know the device via user-agent or php and adjust your inbuilt css to the desired size.

It can be done even without that library using just apache user-agent rules and code igniter / nginx should have similar addons / scripts that should fit in.

Regards.

[Miguel García Sánchez - Colomer]

Thank you very much Carlos but i've found a lot of javascript used to mount all the template with no predefined values and using a lot of "auto"... So i'll change the template for other better designed. Thank you very much.