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
-
Are on-site content carousel bad for SEO?
Hi, I didn't find an answer to my question in the Forum. I attached an example of content carousel, this is what I'm talking about. I understand that Google has no problem anymore with tabbed contents and accordeons (collapsible contents). But now I'm wondering about textual carousels. I'm not talking about an image slider, I'm talking about texts. Is text carousel harder to read for Google than plain text or tabs? Of course, i'm not talking about a carousel using Flash. Let's say the code is proper... Thanks for your help. spfra5
Technical SEO | | Alviau0 -
How to stop UTM affecting SEO
Dear Moz community, We are a directory website and have lots and lots of UTM. This is crucial as we want to measure visits through Google analytics. Moz as a tool is fantastic because through a site crawl it can spot all our duplicate pages. Needless to say, due to the amount of UTM's on different pages, we have lots of duplicate pages flagged up. I ideal solution is still having the analytics capabilities of the UTM, but not affecting our SEO where search engines will realise it is not a duplicate page - we're aware it is the same page we just want to track the source! Your help is greatly appreciated! Thanks,
Technical SEO | | Eric_S
Eric0 -
Menu impact on SEO
we have a single page web application for an ecommerce website. I think it is built in angular. One UX features we are exploring is the use of a "Products" Item on the menu with the categories showing on a menu rather than directly present on the header. The aim being to keep the header nice and clean. The result of this is that the categories which would typically sit in the header will now not be immediately visible until the menu is opened. Let's say I want to rank well for "building materials". Traditionally the view would be that this word would need to be in the header and marked up with the appropriate h tag. Will moving "building materials" into a product menu be detrimental for SEO? My initial thought is that as long as it is coded correctly there shouldn't be any impact on SEO. Can anyone give me their expert SEO view?
Technical SEO | | built_bot0 -
SEO impact classifieds website
Hi, I'm part of an organization running a classifieds platform in Spain. (Mercadonline.es) We are hit by Google penalties since a few weeks, possibly caused by numerous errors we are experiencing. Most frequent errors are 404's and duplicate content (titles tags etc) since the nature of our website is dynamic. Many ads change daily, are added or removed, causing Googlebots (and others) to flag us and not being able to see our more unique content. Until what part of our platform should we be indexed? Since we have +34,000 pages indexed (mostly due to internal filter pages) I would need a systematic solution for us to display relevant and unique content, with enough usage of keywords that can bring us back up - we are actually ranked <50 on google for most of our main keywords. It is costing us precious time and money since we can only aquire our visitors (adwords etc) and not being to attract any organically. I can go in more detail with someone who can give me a bit more direction. Your answer is much appreciated! Ivor
Technical SEO | | ivordg0 -
How does Progressive Loading, aka what Facebook does, impact proper search indexation?
My client is planning on integrating progressive loading into their main product level pages (those pages most important to conversions and revenue). I am not skilled on "progressive laoding" but was told this is what Facebook does. Currently, the site's pages are tabbed and use Ajax. Is there any negative impact by changing this up by including progressive loading? If anyone can help me understand what this is and how it might impact a site from an SEO perspective, please let me know. thanks a ton!! Janet
Technical SEO | | ACNINTERACTIVE1 -
Duplicat content affecting SEO Rankings
We have one main site called buypropertyanywhere, it is a database it holds all the data for all our property websites. One of our most popular sites is housesalesbulgaria, which takes the data from buypropertyanywhere in regards to bulgarian property and display it. The same with housesalesturkey it takes the data in regards to turkish property and display it. We think because buypropertyanywhere and housesalesbulgaria has the same data it has high duplicate content . We think this is affecting the SEO rankings for housesalesbulgaria. Google is looking at housesalesbulgaria as if a copy of buypropertyanywhere. So therefore should we SEO buypropertyanywhere soley and link it to housesalesbulgaria through the articles and content we put on the site. Thanks in advance for any advice.
Technical SEO | | Feily0 -
Frustrating Local Seo Question
I have just lost the top stop on Google Places (Pack 7) for one of my clients. The company that took it came out of nowhere to take the top stop. Now I don't mind getting out ranked when someone has worked hard to out rank me but what is frustrating is this site scores terrible across the board on just about every score that is supposed to determine on and off page ranking factors. The only place it outscores is in the link department but the site is so new there is no data available in OSE. The site has 0's and 1's for PA, MR and MT plus the keyword (kitchen remodeling) that it is taking the top spot for scores and F in the SEOMoz on page report card while the page that I optimized for this very same keyword scores an A. Plus this site has zero citations according to Bright Local Data. What Gives? Here is a little bit of data: Keyword: Kitchen Remodeling My Clients website is http://www.tandmkitchens.com Competitors website: http://www.njkitchendesigns.com I'm kicking his butt in every category except Domain Age and inbound link total, his inbound link total is 409 but it's only from 2 domains.
Technical SEO | | fun52dig
Any thoughts on how this is possible would be greatly appreciated. Thanks all and Merry Christmas!
Gary1 -
Image filenames
A developer asked me if it's ok to add a string of characters (output by Sharepoint) to the image filename. Not a good idea for SEO I said....I've already suggested using keywords for filename and including keyword descriptions in the alt and title attributes. It's a SharePoint shopping cart. Does anyone have any suggestions, experience or workarounds for this?
Technical SEO | | CoL-PR0