Optimize CSS Delivery
-
Hi,
I am loading 3 CSS files here: http://www.viatrading.com/wholesale/9/Domestics.html
PageSpeed is telling me I "should fix" the delivery of these CSS Files (see image).
I read https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery , but can't figure out which is my case. The CSS are big, but even if I split them in several, all CSS files are still showing up as render-blocking. I moved them to the header/footer, but the message is still appearing.
Do you know what might be the problem and how to solve it?
Thank you,
-
The concept that Google is trying to setup here is that your CSS and JS contain elements that are critical for the page to render. The problem is that as the browser downloads them, they can block other resources from being downloaded. This is because the browser wants to read these files to see everything they need to download to render the page. Part of fixing render blocking is to reduce the number of files that a browser has to download, especially those in the critical path (html, CSS, JS) that can block the downloading of other files (images, etc)
Google is getting even more specific in your case. They are looking at the "above the fold" parts of your page. What Google wants you to do is take any CSS or JS that you use to render what is "above the fold" on that page and inline that code into your HTML file. That way when the browser downloads the HTML file it has all it needs to render the visible / "above the fold" part of the page vs having to wait for the CSS and/or JS files to download.
The problem is that defining "above the fold" is relative due to the multiple browser size and OS and devices that your web server sees on a regular basis.
If you have a really good front end developer, they can take the time to figure out what viewport size is the most common and then take all the CSS and JS and inline that (and note this may be different depending on the page) into your HTML (and this assumes that your CSS and JS do not bloat your HTML file size too much). One approach is to take your most common large viewport size and then inline all those items into your HTML that are above the fold so you have everything covered as the viewport gets smaller. The issue there (and this is also with most responsive sites) is that you have a lot of code bloat for your phone browsers. You can also use a sniffer to determine what the size of the viewport is and then having the appropriate amount of CS and JS inlined on the fly. I have also seen people suggesting that we should design websites for the phone first and then expand out from there.
This is the best website I have seen that talks about how all these files interact and what Google is really getting at
https://varvy.com/pagespeed/critical-render-path.html
Here is what I would do.
- Have a single CSS file for your site and host it on your server, not an external domain. This is best practice. Take the time to strip out all of the stuff you do not use out of the CSS to get the file size down. Minify and compress it, reference your CSS in your header. This may help with the render blocking as you are reducing the number of files requested to just 1, but it may not help with the above the fold render blocking.
If you want to move forward with with "fixing" the above the fold render blocking. Extract the CSS that is critical to render above the fold items on your site (noting the caveats above) and place it inline within your HTML file and then put the rest in your single CSS file. https://varvy.com/pagespeed/optimize-css-delivery.html
- Have a single JS file and host it on your server. If there is any external JS try and see if you can host it within your single JS file. Strip out all the JS you do not use to get the file size down. Minify and compress it.
If you want to get past the render blocking above the fold item above, figure out what JS is needed to render the page above the fold. Inline that JS within your HTML and then setup a single file for all the other JS and then defer loading of that file using this technique: https://varvy.com/pagespeed/defer-loading-javascript.html
I noticed your external JS file to Googleadservices. You may not be able to put that JS into your main JS file and have to keep the external JS reference. I would then try and defer the loading of that using the technique above. You need to do some testing to make sure that doing this does not throw off how your ads are displayed or tracked. I would also make sure your GA or other web tracking JS code is inlined as well, otherwise you risk throwing off your web stats.
This is what makes all of this tricky. The Google page speed tool is just looking at a list of best practices and seeing if they are present or not. They are not looking to see if your page is actually getting faster or not, or if you change any of these things if they throw off the function of your site.
https://developers.google.com/speed/pagespeed/insights/
PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster
This is why with all of this you need to use a tool that shows actual page speed and will show a waterfall chart with timings to see how everything interacts. webpagetest.org is a common one.
It gets really complicated, really fast, and this is where a a really good front end guy or gal is worth it to look at these things. I would start with my initial simple suggestions above and not sweat the above the fold stuff. Test your site with actual speed and see how it does. You can also setup GA to give you page speed data. You can then decide if you need to take it to the next level.
Another thing you can try (I have not been able to get this to work for me) is that Google has a tool that can do all the "above the fold" inlining and other speed tricks for you
https://developers.google.com/speed/pagespeed/module/
Just like above, I would benchmark your performance and then see if this makes a difference on your site.
Good luck!
-
The main thing this is trying to communicate is that your CSS files should come above / before any Javascript files. When the browser downloads your HTML, it starts at the top and goes down and downloads resources (CSS, JS, fonts, images, etc).
When the browser comes to a JS file, it calls the server to retreive the file, and once it's downloaded, the browser begins to execute that javascript. When that JS is executing, it's delaying the handling of CSS files which help paint the elements and make them look how you want.
Move your CSS files to be above all your JS files and see if that fixes it.
In general, most (not always ALL) JS files should be loaded as the last thing so that it doesn't block / delay the browser in rendering the page.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Optimizing a large mess
An agency referred me to a client who wants a proposal for SEO. The website has been recently completed, but it a complete train wreck. I just ran a Moz crawl and I'm looking at 303 issues to fix out of a site with 377 pages. I just downloaded an xml sitemap, hoping to prioritize what needs to be done, however I'm not getting a clear sense of the hierarchy. In your opinion, what is the best way to attack a project of this size? I am clear on the client's business goals, so I can work on the most crucial pages first, but I can't leave the rest of the site a mess. Should I start by gathering for links that have no user value and plan to block them with meta tags? I'm used to optimizing much smaller sites, so any advice on how to approach this proposal would be much appreciated. Thank you!
On-Page Optimization | | ptdodge0 -
Should a keyword be optimized on One page only?
I have a niche website that focusses on selling pizza delivery bags, the search keywords that are used by users are about 7 and their are another 15 long tail keywords. The question is do i optimize every keyword per one page only? i have a blog on the website www.prodelpizzabags.com/blog/ if i write a blog post that would "compete" internally with another keyword, what should i do, what are the best practices I would be thankful for any insights regarding keyword/page optimization
On-Page Optimization | | akramsabra0 -
How should i optimize this page
Hi, i am having major problems in optimizing this page as it is a magazine site. On normal sites i have no problem in optimizing the page to get the correct keywords to come up in the search engines but since the upgrade and also because it is a magazine site, i am having problems on how i should do this. my site is www.in2town.co.uk and i am trying to optimize the page for the following keywords lifestyle magazine online magazine lifestyle news Life and Style articles healthy lifestyle i am trying to make sure that google knows what the magazine is about, as i know have dropped down the rankings since the upgrade and for lifestyle magazine we were number one in google for such a long time but now we are on page 9 and this is our home page. we are seeing sites that have hardly any content ranking above us for this keyword i have a small intro which i have just put in the past few days at the top and we have a welcome in the middle which is here. Welcome to In2town Lifestyle Magazine Our Lifestyle Magazine is a fresh, innovative and vibrant online magazine offering you the best in health,fitness and life & style features, as well as modern lifestyle, beauty, fashion, personal finance and entertainment. Over the years In2town Lifestyle Magazine has established a reputation for quality articles and informed lifestyle and health features thanks to our experienced team of editorial professionals. By reading our online Lifestyle Magazine, you will be able to enjoy the interesting mix of entertainment features, health and lifestyle news as well as finding out what is happening in the celebrity world. We are always happy to hear from our readers, if you have lifestyle news or a story that you feel our readers would be interested in then please do contact us. xxxxxxxx but i would like to get rid of that section as i am going to put the latest articles there. any advice on how to sort this mess out would be great
On-Page Optimization | | ClaireH-1848860 -
Broken Links/Images Non Optimized Content Help
Hello, After 4 years of incorrect blog creation and 4000 blog posts I have seen the light. I have implemented a new theme, SEO friendly, based on a yoast website report and have been creating timeless blogs with correct structure. However, I have 5400 broken links and images based on the Broken Link Checker. Additionally, of our 2500 blog posts which are on app reviews, only 500 are optimized so I have been painstakingly been going through each to optimize, while balancing new content output. The trouble is Google is seeing massive changes and we are tumbling in search. Any suggestions on how to approach this as it is my understanding that the broken links/images are doing considerable damage to our website overall. the website is crazymikesapps.com thank you Mike
On-Page Optimization | | crazymikesapps0 -
I am optimizing title tags and was wondering if it makes a difference if I use "commas" in between keywords that are synonyms or should I use "and" instead?
For example: "pants, trousers at pants.com" or "pants and trousers at pants.com".
On-Page Optimization | | EcomLkwd0 -
Optimization for allready indexed web without seo before
Hi, I have some questions. I have 2 Joomla web sites who needs seo optimization, but there are allready indexed in Google: 1/ Will rel=canonical fix the problem for duplicated content for allready indexed pages? I have read different solutions but I haven't tested them all. I puted rel=canonical on the first web site that I started to optimize, but Google WMT shows me very small or not at all decreasing of duplicated content. Would it need more time? 2/How can I show search engines to craw and change the cache for a page that is allready indexed faster than 1-2 months? 3/ What is your opinion and experience? With done changes for one website for a low competition keyword /the web site was not optimized for search engines before/ how much time will it take usually for Google to see the changes made and change the ranking for some keyword?
On-Page Optimization | | vladokan0 -
Optimizing Wordpress Categories
I’m trying to optimize the category links in the wordpress blog http://blog.reputationforward.com. I’m in the process of installing the Yeost SEO plugin and am going to revise the Category Title Tags, Meta Descriptions and slugs. I’m also in the process of using Tags so that I can get the posts that appear in a category to be specific to that category (currently the publisher is listing posts in multiple categories: See “Business Management Category”). But other than that, is there anything else I can do to optimize each category?
On-Page Optimization | | EricVallee341 -
How would you optimize thousands of images?
The majority of our images are not optimized for search. Specifically, the alt text and image title are blank. The image filenames are also not using descriptive keywords. We publish content quite frequently and this issue will be addressed within the production work flow for all images moving forward. As for the images currently existing on our site, what are some ways to scale the optimization for thousands of images that need to be optimized for alt text, title and filename? We're thinking about mechanical turk, but the problem is that we are a business magazine and have a lot of head shots of entrepreneurs that the mainstream might not recognize. Any insights would be appreciated.
On-Page Optimization | | inc.com0