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
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
-
Google Search Console Block
Am new to SEO. My clients site was completed using Yoast premium and then used Google search console to initiate the crawl. Initially setup an http:// property and all seemed good. Then i removed that under search console an created an https:// did the render and it appears google has put a block and placed their own robots.txt file which basically has rendered the site useless. Feedback most appreciated.
Web Design | | BoostMyBiz0 -
Does having too many wordpress portfolio pages with little content hurt a site's SEO?
I have a site that is for a service company, not image based like a photographer or artist. We utilize the Portfolio feature to create a gallery of floor coating finishes (images of all the flooring finish options available) but this solution has created /portfolio/file-name pages for each image. These pages have no other content besides the image. I've run SEMrush audits on this site which shows a high percentage of pages with low text/code ratio and duplicate content (a lot of the finishes have very similar names). This site has been extremely slow to improve any visibility online (more than 9 months) and I'm wondering if this is a factor by possibly having a negative effect on our site. We initially chose the portfolio option because it was the best-looking solution for our users but we can certainly change it to another format if that is better. Thanks!
Web Design | | WillGMG0 -
Managing website content/keywords for wordpress site
We are in the midst of redesigning our website and have been working with freelance blog/content writers to increase the unique content on our site. We are finding it increasingly difficult to manage the topics/keywords as we continue to expand. Googledrive and google spreadsheets have been our primary tools thus far. Can anyone recommend a good tool that would allow us to manage content and blog posts for our site?
Web Design | | Tom_Carc0 -
Google text-only vs rendered (index and ranking)
Hello, can someone please help answer a question about missing elements from Google's text-only cached version.
Web Design | | cpawsgo
When using JavaScript to display an element which is initially styled with display:none, does Google index (and most importantly properly rank) the elements contents? Using Google's "cache:" prefix followed by our pages url we can see the rendered cached page. The contents of the element in question are viewable and you can read the information inside. However, if you click the "Text-only version" link on the top-right of Google’s cached page, the element is missing and cannot be seen. The reason for this is because the element is initially styled with display:none and then JavaScript is used to display the text once some logic is applied. Doing a long-tail Google search for a few sentences from inside the element does find the page in the results, but I am not certain that is it being cached and ranked optimally... would updating the logic so that all the contents are not made visible by JavaScript improve our ranking or can we assume that since Google does return the page in its results that everything is proper? Thank you!0 -
How to add SEO Content to this site
Hi Great community and hope you guys can help! I have just started on a SEO project for http://bit.ly/clientsite , the clients required initial KPI is Search Engine Rankings at a fairly low budget. The term I use for the site is a "blurb site", the content is thin and the initial strategy I want to employ to get the keyword rankings is to utilize content. The plan is to: add targeted, quality (user experience & useful) and SEO content on the page itself by adding a "read more" link/button to the "blurb" on the right of the page (see pink text in image) when someone clicks on the "read more", a box of content will slide out styled much the same as the blurb itself and appear next to and/or overlay over the blurb and most of the page (see pink rectangle in image) Question: Is this layer of targeted , quality (user experience & useful) and SEO content (which requires an extra click to get to it) going to get the same SEO power/value as if it were displayed traditionally on the initial display? If not, would it be better to create a second page (2<sup>nd</sup> layer) and have the read more link to that and then rel-canonical the blurb to that 2<sup>nd</sup> page, so that all the SEO passes to this expanded content and the second page/layer is what will show up in the rankings? Thanks in advance qvDgZNE
Web Design | | Torean0 -
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 -
My 404 page is showing a 4xx error. How can that be fixed?
My actual 404 page is giving a 4xx error.
Web Design | | sbetzen
The page address is http://www.ecowindchimes.com/v/404.asp It loads fine... it is the page all 404's are directed to. Why is it showing a 404 error. The page works. How can this be fixed? Stephen0 -
Off Screen Rendering & Other Tactics
Hi Folks, We're currently trying to change our website search results to render in HTML in the first instance then switch off to AJAX when our user clicks on filters. But we came across an issue that diminishes the user experience, so we used this method below: We have moved the search grid offscreen in the initial rendering because we execute a lot of Javascript that modifies the DOM within the grid. Also when a user has performed a search from within the page, the hash is updated to identify the new search terms. Because this is not sent to the server, a user who has done a search and refreshes would see incorrect search results initially and the correct search results would then replace them. For example, on initial search a user reaches a URL akin to search.veer.com/chicken. When they perform a search from on that page, the hash gets updated tosearch.veer.com/chicken#keyword=monkey. If the user refreshes the page, the server only receives the request for chicken and then serves up the page with those results rendered on it. The Javascript then checks the hash and determines that it needs to run a different search and fires off an AJAX call to get the new results. If we did not render the results offscreen the user would see the results for chicken (confusingly) and be able to briefly interact with them until the AJAX call returns and the results are replaced with the correct monkey results. By rendering offscreen, the initial results are not visible and the Javascript can move them immediately onscreen if there is no hash, or wait until the AJAX call returns and then rebuild the grid and move it onscreen. Now I know that rendering text indent to -9999 is a black hat SEO tactic. But, would it be the same in this case? We're only doing this avoid bad UI. Please advise. Also, we came across these two articles that may serve alternative options. These article state that each tactic is SEO-friendly, but I'd like to run it my the community and see if you guys agree. http://joshblog.net/2007/08/03/make-your-rich-internet-application-seo-friendly/ http://www.inqbation.com/tools-to-increase-accessibility-in-the-web/ Thank you for your help!
Web Design | | CorbisVeer0