Fixing Render Blocking Javascript and CSS in the Above-the-fold content
-
We don't have a responsive design site yet, and our mobile site is built through Dudamobile. I know it's not the best, but I'm trying to do whatever we can until we get around to redesigning it. Is there anything I can do about the following Page Speed Insight errors or are they just a function of using Dudamobile?
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 3 blocking script resources and 5 blocking CSS resources. This causes a delay in rendering your page.None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.Remove render-blocking JavaScript:
- http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
- http://mobile.dudamobile.com/…ckage.min.js?version=2015-04-02T13:36:04
- http://mobile.dudamobile.com/…pts/blogs.js?version=2015-04-02T13:36:04
Optimize CSS Delivery of the following:
- http://fonts.googleapis.com/…:400|Great+Vibes|Signika:400,300,600,700
- http://mobile.dudamobile.com/…ont-pack.css?version=2015-04-02T13:36:04
- http://mobile.dudamobile.com/…kage.min.css?version=2015-04-02T13:36:04
- http://irp-cdn.multiscreensite.com/kempruge/files/kempruge_0.min.css?v=6
- http://irp-cdn.multiscreensite.com/…mpruge/files/kempruge_home_0.min.css?v=6
Thanks for any tips,
Ruben
-
Thanks for this; I will implement the practices on my Cybergeak Blog Really Thankful to the engineers
-
Thanks, Thomas!
-
there is not a very easy way to modify HTML on WordPress because it is all based on PHP. Unless you can change the PHP code via by FTP or many other methods including plug-ins it takes a developer.
I know a person who could fix this for you very easily there contact information is in the URL under contact. There are also some plug-ins that will eliminate this
https://wordpress.org/plugins/async-js-and-css/screenshots/
the best methods in my opinion are done by a developer or sometimes a plug-in
http://www.feedthebot.com/mobile/
http://www.feedthebot.com/pagespeed/critical-render-path.html
I will be right back and answer your other questions
Tom
-
Use this to make a critical render path
http://www.feedthebot.com/pagespeed/critical-render-path.html
with
http://www.feedthebot.com/tools/css/ (for CSS)
this for JS
http://javascript-minifier.com/
If you add this it will fix this as well
https://developers.google.com/speed/pagespeed/module/filter-js-minify
-
Actually, I have a quick follow up. In my wp-admin in the editor section, I only see CSS and PHP files. Then, on the ftp, I see a public_html folder, but that folder has a ton of different files in it...none of which end in html. Any suggestions on where this html file might live?
Thanks,
Ruben
-
I will take a look at it. Yes, I do need to do it on our Wordpress site as well, but fortunately, Page Speed Insights doesn't think our desktop version is as abysmal as our mobile one. But, it does still show up as something that should be fixed.
Thanks for the reference material!
- Ruben
-
you will also need to find your Cardinal path and simply combine JavaScript and CSS as well as prioritize content that is above the fold. By doing so this will help you to create one JS file ( possibly more if it is impossible to combine for whatever reason)
See more here
http://www.feedthebot.com/pagespeed/prioritize-visible-content.html
https://developers.google.com/speed/docs/insights/BlockingJS
If WordPress
http://www.wpcub.com/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content/
I really hope this helps,
Tom
-
Hi Ruben,
Here is a tutorial on how to fix that issue. If I could explain it better than this I would however I feel this does a fantastic job if you're doing this on WordPress let me know and I will tell you how to fix it on there is well.
Here's the resource
http://www.feedthebot.com/pagespeed/render-blocking.html
http://www.feedthebot.com/pagespeed/defer-loading-javascript.html
The below code is what Google recommends. This code should be placed in your HTML just before the tag (near the bottom of your HTML file). I highlighted the name of the external JS file.
sincerely,
Thomas
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
-
What do you use for test rendering your dev site?
I'm redesigning our company ecommerce site and need to test render an infinite scroller to ensure that it is as SEO friendly as possible. My problem is that I cannot view it in Webmaster Tools since I am blocking the site from crawlers using robots.txt. I know I could simply unblock Google temporarily but I really would rather not make my dev site available to search engine crawlers.
Web Design | | bearpaw0 -
Javascript with Responsive Web Design
The company I work for are looking to go responsive which is high up the list on our development plans. Further on down the development plan they want to add more javascript into the website. Is this recommended as we plan to go responsive ?
Web Design | | jmurphy70 -
Do drop caps impact the search value of your content?
A client of mine wants to include drop caps at the start of the first paragraph on the page because they think it looks nice. I found some css techniques for implementing this using a span on the first character to enlarge the size of just that character. First word of the first paragraph. Are there any seo concerns I should have for adding drop caps?
Web Design | | fivelinesmedia0 -
Real Estate and Duplicate Content
Currently we use an MLS which is an iFrame of property listings. We plan to pay an extra fee and have the crawlable version. But one problem is that many real estate firms have access to the same data, which makes our content duplicate of theirs. Is there any way around this ? Thanks
Web Design | | SGMan0 -
Duplicate Page Content
Currently experiencing duplicate pages for all hotel pages. What would be recommendation to fix the pop up pages that uses javascript? | http://www.solmelia.com/hoteles/espana/tenerife/redlevel-at-gran-melia-palacio-de-isora/en/visor.html?pest=fotos http://www.solmelia.com/hoteles/espana/tenerife/redlevel-at-gran-melia-palacio-de-isora/en/visor.html?pest=localizacion http://www.solmelia.com/hoteles/espana/tenerife/redlevel-at-gran-melia-palacio-de-isora/en/visor.html?pest=panorama http://www.solmelia.com/hoteles/espana/tenerife/redlevel-at-gran-melia-palacio-de-isora/en/visor.html?pest=tourVisual |
Web Design | | Melia0 -
Using "#" anchors to display different content
If I have a page that has an area on the page that acts like a widget and has three different tabs. These tabs provide 3 different types of information relevant to the page subject matter. By default when someone goes to the page one of the tabs is showing but you have to click on the others to see the info on them. Is it OK to use domain.com/topic#TAB1, domain.com/topic#TAB2, domain.com/topic#TAB3 to create shortcut links so that people can land on the page and have that predetermined tab showing. I'm wondering what search engines might think. Essentially all the content of all three tabs is there for people to see but they'd have to click to see the other tabs. I don't consider the content to be hidden. But I'd like to hear people's thoughts.
Web Design | | Business.com0 -
Best way to handle related content links in a sidebar?
My site contains tens of thousands of articles, studies, multimedia files, biographies, etc. To assist users with finding content that might be related to the page they're on, I use a side bar with 'also of interest' links to other, similar content on my site. This is, of course, pretty standard practice. Search engines -- Google in particular -- index these pages and then include the text in the sidebar links in search results. So, for example, on a given page I may have 20 links to related content, and the text in those links might be, 'A story about subject ABC.' When I search for 'A story about subject ABC,' Google returns not only the page titled (and containing the content) 'A story about subject ABC.' but also every page that links to it and happens to have that link text in the sidebar. What is the proper way to handle this kind of thing?
Web Design | | smorrison0 -
Javascript Redirects
So I have a client who uses a program called test and target by Adobe to test different pages of content for the best layout, design, etc. They use javascript redirects and css hide and show to hide content with div tags. I'm wondering if anyone has experience with test and target or knows about how these hidden div tags and javascript redirects will affect my indexing and SEO. I'm hoping for some guidance fairly quickly as well 🙂
Web Design | | CoolSEOnStuff0