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
-
On-Page Optimization on a service based Site?
Respected members, my question is that if I Wanna run a website that provide service like olansi do, But i need to know the On -page effect like How Can I make a plan to secure my position against my Service based competitor site?
On-Page Optimization | | younus_7831 -
Optimizing images and more for page speed
Hey everyone! I run a comparison/affiliate site for men's clothing. On the side of that, I have a Squarespace site for inspiration, articles and outfit pictures. I've tried to optimize site speed for the Squarespace site without much success. I've run all pictures trough JPEGmini to decrease file size but it doesn't seem to be enough. Below I attached the result I got when I run one of the pages trough Lighthouse and GTmetrix. Do you have recommendations of what I can do to improve the results? Is it a good idea to use next-gen formats for pictures as Google suggests as an example? Kind regards,
On-Page Optimization | | JonastriesSEO
Jonas XU131T0.png sPD3w13.png1 -
Optimal URL structure for location-specific pages
I'm in the middle of revamping a website for a restaurant that has multiple locations and am trying to decide what the best URL/internal link structure would be. Right now, each restaurant has a single location page, but we are going to add additional pages for catering. Sitewide-linked pages exist for /catering and /locationname. The way I see it, we have two basic options: Option #1: Catering page - /locationname/catering/ Option #2: Catering page - /catering/locationname/ In both cases, there would be links from the /locationname an /catering pages to the location-specific catering pages. Is either option preferable to the other?
On-Page Optimization | | mblair0 -
Local SEO Title-Tag Optimization
Hi Everyone! A bit of a greenhorn SEO here, and I'm trying to learn a bit more about some of the best practices in local SEO. I'm wondering if anyone can help me with the following scenario: Business: Dental Care & Surgery Location: Springfield IN Name: Springfield Dental Care Experts (example) Website: 18 content pages, pages dedicated to each service Since there are 18 pages to work with, there are plenty of places for us to mix-up the title tags. However, I am still unclear as to what the best way would be to do this. I understand that the Geo-modifiers should go at the front, and that the brand name is considered optional. Would tags such as this make sense? Springfield IN Dentist | Springfield Dental Care Experts Nearby town Mountainview IN Dental Care | Springfield Dental Care Experts Last question: The website has pages for each of the services offered by the dentist, ex: Dental Cleanings, Consultations, Fillings, Surgery, etc. Should each of the pages be included in the title tag? Springfield IN Dentist | Springfield Dental Care Experts - Dental Surgery My concern is that buy adding this, the title tag would be too long. Thank you for taking the time to read and respond!
On-Page Optimization | | kbaltzell0 -
Over Optimization Penalty
Hi Guys, I was listening to the over optimization penalty Matt Cutts was talking about at SXSW over at Search Engine Land. http://searchengineland.com/too-much-seo-google%E2%80%99s-working-on-an-%E2%80%9Cover-optimization%E2%80%9D-penalty-for-that-115627# Looking at my on-page reports through SEOMOZ I have A report cards for each page, will we be OK or do we need to take a look? Thanks, Scott
On-Page Optimization | | ScottBaxterWW1 -
On-page: Over optimized images?
Hello guys. I have a small question about an on-page optimization for images. What I have: good title tag / good url structure good content (NOT keyword shuffled, its real content, for real people) images / gallery uploaded to folder named same as article name. For example: Great tips for bloggers [article name], great-tips-for-bloggers [folder name]. So my question is: Will Google harm me for this "too good" paths to images, article related image filenames, with mask like [gtips-img01], and if all images have titles / alt tags? Thank you guys.
On-Page Optimization | | infoo130 -
On-Site Optimization and Repeat Customers
Hello, One of my clients has repeat customers. All of his surface level categories are optimized. None of his 2nd or 3rd level categories are optimized at all. Is there any harm in optimizing these 2nd or 3rd level categories. Is there any way it could cause a problem with repeat customers? I didn't think so but I want to make sure. Thanks!
On-Page Optimization | | BobGW0 -
This is a real dumb question about on page optimization
I've been reading the docs for using this site and am puzzled by the on page optimization reports, and the tactics for creating the reports. In no place can i find that you first must use the keywords you have identified to track in the campaign on pages on your web site. Am i missing something? From just reading how to do your campaign, it would appear that you never have to touch your pages with the keywords you want to track, all 500 of them for one page, if that's what you want to do. Not knowing how the application works, it is possible to imagine anything, including not needing to do the obvious steps of writing a well optimized page first. I want to presume that first you optimize your pages with the keywords you want to track, then go ahead and run your campaign. Although this is the obvious thing, I don't see that part of the seo puzzle being mentioned in any of the docs. Where do i hunt for that part of the equation?
On-Page Optimization | | highersourcesites0