Problem with blocking css and font
-
Hi guys;
I have a problem, analyzing my web page speed google have a block of two files that do not know how to solve:
Google tells me: Your page has 2 CSS resources causing a blockage, and are these two:
https://luengos.es/…-QPTRzu8ye_rnc5SMdiu4NtuqxwWLtVctbTw.css
https://fonts.googleapis.com/css?family=Droid+Sans:400,700The first file is generated by the css minify plugin w3 Total cache, not how to solve this problem is the most important. What I can do to fix it?
Moreover also google tells me this:
Set an expiration date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than through the network.https://www.google-analytics.com/analytics.js (2 hours)
Here also is to set an expiration date greater, Where in I have to do?
-
RE: Render Blocking CSS:
1.) W3TC does not currently offer a means by which to render CSS as non-blocking. For that, you can try Autoptimize and make use of its ‘Inline and Defer CSS’ option (make sure you’ve disabled CSS minification in W3TC). A tutorial for Autoptimize’s Inline and Defer CSS feature can be found here.
2.) Unless you install the Google Fonts you want to use on your server, they will always block page rendering. You appear to only have one; so, to be honest, you can ignore the Google PS suggestion there. It’s really not a big deal.RE: Expires Headers
You cannot change the expires headers of items served from 3rd party resources, e.g. Google Analytics. Again, just ignore it.From the looks of it, the best thing you can do to improve your site’s speed is improve your server’s response time which is very, very bad. A close second would be to make use of a CDN to serve all of your site’s static resources. CloudFlare is free.
Best,
AJI installed the Autoptimize and have disabled minify W3 Total Cache, the javascript files is not able to combine them all into one, and pulled out the lowest score in google page speed, I think it’s better to have the minify of w3 Total cache or not the Autoptimize is set, there is some kind of tutorial to configure correctly Autoptimize with the w3 Total cache?
On the issue of burden of my server does not understand why it takes so long to answer,? is there any way to know what is fault ?.
Cloudflare improves the loading time of the web ?, I have fear because you have to change the dns domain and did not like it much, I’m afraid that the burden of web malfunction or slow down, I hope it is as kind as to help me as above,
Thank you, Regards
Hi RebellionNT1,
I installed the Autoptimize and have disabled minify W3 Total Cache, the javascript files is not able to combine them all into one, and pulled out the lowest score in google page speed, I think it’s better to have the minify of w3 Total cache or not the Autoptimize is set,
If you were happy with what W3TC was doing for your JavaScript, you should continue to use W3TC for that. You do, however, need to make sure that you are only using one plugin for each type of minification or you’re website will ‘break’.
For example, if you’re using W3TC for your JavaScript, make sure that you’re not also attempting to minify your JavaScript with Autoptimize; if you’re using Autoptimize to minify your CSS, make sure that CSS minification is disabled in W3TC. Etc.
In short, It is not an all-one-plugin-or-the-other-for-all-minification-purposes solution I am proposing, but a ‘mix-and-match’ sort of thing, pulling the best features out of each to achieve your goal.
As I understood it, the primary issue you were having had to do with the render blocking, combined CSS file created by W3TC (as indicated by Google Page Speed Insights). W3TC cannot help you with Google’s recommendation to fix this render blocking CSS file. The first, best plugin solution is Autoptimize and its Inline and Defer CSS option (you will see this option if you click on “Show Advanced Features” in the Autoptimize dashboard). Follow the above linked how-to guide for this feature and you’ll more than likely have solved the problem.
there is some kind of tutorial to configure correctly Autoptimize with the w3 Total cache?
Not that I am aware of; if there were, it is unlikely it would do you any good: There are simply too many variables and permutations since every website is different. Further, the online set up guides for just W3TC, are actually people illustrating what worked for their site and set-up, not what constitutes a fully optimized scenario for yours since your site and set-up is unique (more info here).
On the issue of burden of my server does not understand why it takes so long to answer,? is there any way to know what is fault ?
Are you on shared hosting?
Cloudflare improves the loading time of the web ?
Oh yes. ??
I have fear because you have to change the dns domain and did not like it much, I’m afraid that the burden of web malfunction or slow down,
We add CloudFlare to our own client’s sites all day every day and it always goes smoothly. I am confident that once you sign up for CloudFlare, you’ll be happy that you did.
Best,
AJWell, because I do not think you’ll be able to optimize more ?? anyway in GTmetrix I have 91% of punctuation.
In ping doom hosting guys told me I had to make a choice of amsterdan and gives me a punctuation of 99/100 and 937ms load time.
The worst thing I have is google page speed that the issue of punctuation mobile only have 72 and version desktop 89 which is not bad, what I would like would be to improve the punctuation for mobile, the guys on the server on warning the server response told me that google servers are in california and mine in amsterdan that’s why I get the warning, but the interesting thing is to load either from Spain.
My hosting is shared.
Well, because I do not think you’ll be able to optimize more
You can, though. If you inline critical, above-the-fold CSS and defer the rest (i.e. make use of Autoptimize’s Inline and Defer CSS option), this will be — by definition — a more optimized scenario.
In ping doom hosting guys told me I had to make a choice of amsterdan and gives me a punctuation of 99/100 and 937ms load time.
If your site’s users are all in the general vicinity of Amsterdam (it appears that this site is for a local business in Asturias?), then you’re fine. If and when, however, your business site caters to the larger, Spanish-speaking world or begins to do European-wide (or global) business, you’ll want to make use of a CDN so the site is fast everywhere. (As an aside: CloudFlare would still benefit your site in numerous ways. Further, for Spanish visitors, CloudFlare would serve your site from Madrid: The closer the site’s user is to an edge server, the faster your site will be. I.e. a Spanish user of your site, in Spain, would experience a faster page load than that same Spanish visitor being served your website from Amsterdam.)
The worst thing I have is google page speed that the issue of punctuation mobile only have 72 and version desktop 89 which is not bad, what I would like would be to improve the punctuation for mobile
Which is exactly why you might try to inline the site’s CSS with Autoptimize, as in-lining critical, above the fold CSS shows its greatest benefits for high latency devices such as mobiles. The Google Page Speed warning you are getting about render blocking CSS is there primarily to let you know that you can improve the speed (and therefore user experience) of your mobile site by optimizing your CSS:
Optimize CSS Delivery:
This rule triggers when PageSpeed Insights detects that a page includes render blocking external stylesheets, which delay the time to first render.
Overview:
Before the browser can render content it must process all the style and layout information for the current page. As a result, the browser will block rendering until external stylesheets are downloaded and processed, which may require multiple roundtrips and delay the time to first render. See render-tree construction, layout, and paint to learn more about the critical rendering path, and render blocking CSS for tips on how to unblock rendering and improve CSS delivery.Recommendations:
If the external CSS resources are small, you can insert those directly into the HTML document, which is called inlining. Inlining small CSS in this way allows the browser to proceed with rendering the page. Keep in mind if the CSS file is large, completely inlining the CSS may cause PageSpeed Insights to warn that the above-the-fold portion of your page is too large via Prioritize Visible Content. In the case of a large CSS file, you will need to identify and inline the CSS necessary for rendering the above-the-fold content and defer loading the remaining styles until after the above-the-fold content.^ Ergo, Autoptimize.
Best,
AJyou know fix bugs to leave my website optimized?
My apologies, RebellionNT1, but I don’t understand the question.
Hi AJ @ WpFASTER,
I’ve progressed a little, now I have to google page speed mobile speed 91/100 and 90/100 desktop.
I used autoptimize, and this is the best I could get, I deleted the google font Droid Sans of my theme.
Any recommendations to make the final push towards the 100/100 ?.
My previous question was, if you know how I could optimize my web more?
Regards and Thanks.
@ RebellionNT1,
You’re pretty much good to go, but there are a couple of easy things (they won’t improve your score on Google’s Page Speed Insights but will make the site even faster):
1.) You can Sprite those background images.
2.) I didn’t look at every page, but it appears your site is entirely static or nearly so. So, were you to sign up for CloudFlare, you could set up a Page Rule for the site and make use of the “Cache Everything” directive therein, thereby making your site as fast as if it were on a VPS or dedicated server.Best,
AJ
- The topic ‘Problem with blocking css and font’ is closed to new replies.