Loading images below the fold? Impact on SEO
-
I got this from my developers. Does anyone know if this will be a SEO issue?
We hope to lazy-load images below the fold where possible, to increase render speed - are you aware of any potential issues with this approach from an SEO point of view?
-
Happy to help!
-
Thanks Tom!
As always, an amazing response.
Best
-
Hi Chris sorry for the late reply absolutely you can do this by using a plug-in cloudfare or PHP code
- https://wordpress.org/plugins/wp-deferred-javascripts/
- https://wordpress.org/plugins/defer-css-addon-for-bwp-minify/
Another plugin that does this solution but providing an administration area to configure it manually is Autoptimize, that allows to define a specific CSS code in a independent way of your theme CSS stylesheet
- http://www.oxhow.com/optimize-defer-javascript-wordpress/
- https://seo-hacker.com/optimizing-site-speed-asynchronous-deferred-javascript/
- http://www.laplacef.com/how-to-defer-parsing-javascript-in-wordpress/
The solution of these problem is removing those render-blocking scripts. But if you remove them, some plugins may not work properly. So, the best solution for the smooth rendering is:
1. Remove them from your website source page.
2. Use a single script, hosted by Google as the alternative.
3. Push down the new script at end of the page ( before “” tag).
Here is how to do it.
Copy the code from the following link and paste at your theme’s function.php file.
function optimize_jquery() { if (!is_admin()) { wp_deregister_script('jquery'); wp_deregister_script('jquery-migrate.min'); wp_deregister_script('comment-reply.min'); $protocol='http:'; if($_SERVER['HTTPS']=='on') { $protocol='https:'; } wp_register_script('jquery', $protocol.'//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js', false, '3.6', true); wp_enqueue_script('jquery'); } } add_action('template_redirect', 'optimize_jquery');
Save the file and you are done! Now recheck the source of any page and you won’t see those two scripts at the head section. Alternatively, you can see the Google hosted JavaScriptscript source at the end of the page.
That’s all! Now the visible section of your page will be rendered smoothly.
Defer Loading JavaScript
Another suggestion from Google Page Speed tool is “Defer JavaScripts”. This problem happens when you use any inline JavaScripts like the scripts for Facebook like box or button, Google plus button, Twitter button etc. If you defer the JavaScript then the scripts are triggered after loading of the entire document.
How to defer JavaScript at WordPress
1. Create a JavaScript file and give the name as defer.js.
2. Place the JavaScripts codes that you want to defer into the defer.js file. For instance, if you want to defer Facebook like box script, paste the following at that file.
(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=326473900710878"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
3. Save the file and upload at your theme folder.
4. Now, copy the following code and paste at the head section of the source page. Here in WordPress, open header.php file of your theme and paste the code before the closing head tag.
Make sure to put the correct path of defer.js. For example, the source path should be like this:
/wp-content/themes/theme_name/defer.js ______________________________________________________________________________________________
I hope that helps,
Tom
-
happy I could help
-
Thomas,
Can this be implemented on a Wordpress site?
Apologize for hijacking!
-
What a great response! Just what I was looking for. Thank you!
-
lazy loading images is not as good as deferring an image. Because lazy loading images can cause issues can cause JavaScript issues that will not cause problems if you deferred the image instead of lazy loading.
Defer images you will have a easier time the method discussed here does not hurt search engine optimization in fact it will help it because increased load speeds or what people perceive as an increased load speed always helps the end-user.
Here is the best way
https://www.feedthebot.com/pagespeed/defer-images.html
This is where we defer the images without lazy loading
In the scenario of a one page template, there is no reason to do all the things that lazy loading does (observe, monitor and react to a scroll postion).
Why not just defer those images and have them load immediately after the page has loaded?
How to do it
To do this we need to markup our images and add a small and extremely simple javascript. I will show the method I actually use for this site and others. It uses a base 64 image, but do not let that scare you.
The html
The javascript
-
I have looked for information on this in the past and come up empty handed. With page speed Google really pits you against best SEO practices. I think if you follow most of the page speed insights you can severely limit your SEO. How many images are you talking about, how does Google render the page in their fetch as Google?
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
-
Best practices for lazy loading (content)
Hi all, We are working on a new website and we want to know the best practices for lazy loading of google for content.
Technical SEO | | JohnPalmer
My best sample is: bloomberg.com , look at their homepage. Thank y'all!0 -
Wordpress pagination and SEO
Hello Mozzers, We have incorporated Wordpress blog in our website. The blog has a fair share of what we believe is a valuable content both for the users and SEO. We have reached the point where our content is getting pushed out to pages 2, 3 and etc. 99% of the older content is still relevant and useful. However it does get less traffic from the users because it is not on the front page. I am dealing with it by showing "related posts" and get some traffic through that. I feel that the content that got pushed from the front page of the blog gets less love from search engines as well.The my permalink structure is /%postname%/ only, however when Wordpress adds page/1/ the SEO ranking appears to drop. Is it because Wordpress adds page/1/ to the address? What is a good way to optimize is? I have 15 posts showing on the front page should I increase it?
Technical SEO | | SirMax0 -
Image Search
Hello Community, I have been reading and researching about image search and trying to find patterns within the results but unfortunately I could not get to a conclusion on 2 matters. Hopefully this community would have the answers I am searching for. 1) Watermarked Images (To remove or not to remove watermark from photos) I see a lot of confusion on this subject and am pretty much confused myself. Although it might be true that watermarked photos do not cause a punishment, it sure does not seem to help. At least in my industry and on a bunch of different random queries I have made, watermarked images are hard to come by on Google's images results. Usually the first results do not have any watermarks. I have read online that Google takes into account user behavior and most users prefer images with no watermark. But again, it is something "I have read online" so I don't have any proof. I would love to have further clarification and, if possible, a definite guide on how to improve my image results. 2) Multiple nested folders (Folder depth) Due to speed concerns our tech guys are using 1 image per folder and created a convoluted folder structure where the photos are actually 9 levels deep. Most of our competition and many small Wordpress blogs outrank us on Google images and on ALL INSTANCES I have checked, their photos are 3, 4 or 5 levels deep. Never inside 9 nested folders.
Technical SEO | | Koki.Mourao
So... A) Should I consider removing the watermark - which is not that intrusive but is visible?
B) Should I try to simplify the folder structure for my photos? Thank you0 -
How to transition a traditional site to app format with least amount of impact on SEO
My company is an e-commerce platform and within the last year have started working on app based websites. These are not apps that have to be downloaded but rather the site runs in the browser and is essentially one page of content. We have created an SEO layer that allows us to provide Google information as if there are individual pages. I'm looking for SEO advice on transitioning from what we call our vstores to an app store because the code specified by Google to use has shown to have negative impact on SEO rankings. While we have worked out many bugs and it has gotten better, just want to be doing everything I can to help any of our merchants that will be transitioning. Here are some of the specific issues I'm running into Duplicate Content merchants can have up to 3 stores running simultaneously with the same content just displayed slightly different
Technical SEO | | marketing_zoovy.com
ex. sportsworldchicago.com, app.sportsworldchicagocom, m.sportsworldchicago.com a) What is the best way to control having the content be associated with the main domain
b) Should they be submitting all the sites to google for indexing, I only wanted sitemap submitted for the main domain
c) our end goal will be for the app. to just be the main site Loading issues, our apps essentially have a loading message. I think sometimes this is picked up as an ISE or timeout error for Google and other SERPS. I think it is also contributing to a higher site abandonment. We have changed an used different loading page messages, but have yet to find one I feel is a KEEPER. ex. site TheGrillLife.com - this one does not show the site in the background while loading. On other sites we have the site shown in the background while it loads. This is what is showing as indexed for the homepage, currently working with my tech team on it: The Grill Life <cite style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;">www.thegrilllife.com/</cite> issue: API request failure (likely an ISE). uri: http://www.thegrilllife.com/. _cmd: appReviewsList. domain: www.thegrilllife.com. release: 201314|20130619133400. For e-commerce sites do you think the product content on category and sub-category pages is enough for Google or other search engines to determine relevancy for indexing. In some of the transitions content is being removed due to an effort to transition to a cleaner and faster design and layout. Thanks for any advice or suggestions in advance. Christy0 -
SEO for mobile
Hey everyone! I had just finished building my first mobile website and i wanna focus on SEO for mobile search. Now, since there is a redirection once a visitor enter to the web domain to the mobile site automatically (e.g. sample.com to m.sample.com). Question is: Where should i refer my back links to to improve my ranking on mobile result page? Would love for some help..
Technical SEO | | Tit0 -
Impact issues when switching from .com to uk
Buon Giorno from wetherby UK 5 degrees C and rivers bursting their banks everywhere 😞 This site http://www.sandtoft.com/ has requested a switch in url forwardfing in that they want the following to happen: When u enter the .com url it forwards to the .co.uk domain (the opposite from what it is today ie when you eneter .co.uk it switches to the .com url) So my question is please... "Will changing the .com url to .co.uk via forwarding affect SERPS in any significant manner" My view is the impact will be a minor dip in the serps followed by a recovery. Any insights welcome 🙂
Technical SEO | | Nightwing0 -
Does redesigning the website effects the SEO?
What are the precautions to be taken in redesigning the website ? do it effect on link building? I am planing to re design my website, most of the Keywords are already optimized by Google, and i have given many back links to it . After redesigning my website will it get effected? Kindly answer my question
Technical SEO | | PrasanthMohanachandran0