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?
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
-
CSS background image links bad for seo?
On one of the websites I manage SEO for, the developers are changing how our graphical links are coded. They're basically coding in such away where there is no anchor text and no alt tag, so for example: So there's no anchor nor alt context for Google's crawler. How badly will this affect SEO, or is it extremely minimal and I shouldn't worry about? Thanks in advance.
Technical SEO | | JimLynch0 -
SEO friendly url strategy...
Hi guys i just wanted your expert opinion on keywords in urls. The example i'm giving you is in regards to a ecommerce website: Option 1: www.example.com/shop/coffee/coffee-beans/brand-coffee-beans-500gr Option 2: www.example.com/shop/coffee/beans/brand-coffee-beans-500gr We sell coffee so i'll keep the example relevant 🙂 Does it make a difference on how the keywords are stacked throughout? Would the search engine combine the two keywords eg. .../coffee/beans/... or would i be better of having .../coffee/coffee-beans/... and is there a penalty for having the same phrase more than once in the url? I hope my question makes sense... 😉 Looking forward to your opinions and ideas!
Technical SEO | | Immanuel0 -
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 -
301 redirects and seo..
I bought a domain and it has nice traffic. It only has about 5 main pages in php When i got the site i switched to html because php was overkill. I did the 301 and google deleted the php files and replaced with html version when i check site:domain.com It has been about 7 days. I DID NOT use 301 for each of the 5 pages to go php to html instead is used this code RewriteEngine On
Technical SEO | | samerk
RewriteCond %{HTTP_HOST} ^mydomain.com
RewriteRule (.) http://www.mydomain.com/$1 [R=301,L]
RedirectMatch 301 (.).php$ http://www.mydomain.com$1.html So basically if you load php it will load the html version. dog.php > dog.html Is this OKAY? or should it be done differently.... worried! Thanks !0 -
Transfer of website to maintain SEO
I am nearly finished building a new wordpress website to replace the old static HTML site which is currently doing very well in SERPs. My old site is currently hosted by a company who owns the site, my domain is registered with a different company and I have the nameservers pointed at Cloudflare. I have built my new site and have it hosted with a different company and I wish to keep the domain name registered with the company it is currently with.Is there an order that I should follow to move from the old site to the new site using my current domain name so that I minimize any impact on SEO. I built the new site with the same URL structure to maintain linking benefit. thanks
Technical SEO | | casper4340 -
SEO Checklist
Ok I know that this would be a huge over-simplification but I am wondering if there is (at least a bird's eye view) a checklist of SEO do's and dont's? I checked to see if something like this existed but could not find one. Any help would be much appreciated. Thanks~
Technical SEO | | bobbabuoy0 -
Html5 in SEO
What is the convinience of using html5 for seo.As i read is not too good using many h1 in each metacontent (due to crawler alerts) , but it is good to use html5. We have follow or so this web guidelines www.tumanitas.com whtat do you think about taht?
Technical SEO | | ofuente0 -
What are SEO factors in re-doing a website?
Most of my work now involves converting older websites to CMS-based sites (in Wordpress) and I'm wondering about best practices here. If I create a "dev" or "sandbox" directory for my development work how do I keep the pages from being indexed while I am working on the new site? Can I "noindex" a directory? What do I do with the old html files when the new site goes live? I'm assuming I will do a 301 redirect from domain.com/index.html to the new domain.com/, and also on all of the inner pages that have equivalent pages in the new site. But there will be a lot of old files left that have no equal in the new site. Do I just delete these, or noindex nofollw them?
Technical SEO | | bvalentine0