So I am trying to speed up my loading time for SEO. All my articles have lazy loading right now, but one article does not seem to pick it up like the others.
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwebexact.nl%2Fdoorway-pages
The article: click here
Now I am wondering what's wrong with the page. Thanks in advance.
Related
Lighthouse audit suggest me to lazy load chat beacon that is implemented via Google Tag Manager. Because this tag is quite big I have been already delay it by adding custom event that fires 1.5 seconds after Window Loaded event and on that custom event I am firing this chat beacon. Should I do anyway lazy loading on this tag? Report says that I could save around 3 second in loading page. If yes how could I make lazy loading tag in GTM and if it is even possible? Bellow I pasted how tag look like. Thank you for any suggestion.
<script type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script>
<script type="text/javascript">window.Beacon('init', 'XXXXXXXXX-XXXX-XXXXXXXXX-XXXXXXX')</script>
And one more question. This tag is attach to the page which means that if we scroll down it will always be in the same place. Lazy loading in this situation I understand as loading beacon after clicking this chat icon?
Yes, in this case lazy loading would be loading on click.
However, people rarely do it. Why? Cuz async loading n.async=!0 won't normally delay anything from the user perspective in any significant way.
And lighthouse is not the last instance of truth. It's just a not-very-good way to generically suggest page speed improvements.
If you want to measure it properly, stop using lighthouse, start using page speed profiling in your browser. Measure the user experience with the chat how it is now, then disable it completely in tag manager and reload the page. See if you're able to find those claimed 3 seconds. Repeat both experiments a few times to compensate for random speed fluctuations. I doubt you will be able to measure any real difference.
NOTE: New to this forum (UX/User Experience), so please let me know if this would be better in a different category. I searched Stack Exchange for "pinterest" and this forum seemed to have the most results. Thanks!
Hi guys. I'm writing a jQuery gist to grab links of all the images pinned to a given board in Pinterest. However, I've been running into the problem of having to repeatedly keep scrolling because all the results are not displayed on the same page. With the trendy "infinite scroll" or "lazy load" feature, one has to keep scrolling to the bottom without actually knowing if they are anywhere close because it seems to depend on your zoom percentage in your browser window and your window size as well, as to how many items display on your screen. I've been searching this for hours to no avail.
Searches I've already done keep returning non-productive results
The results I get when searching for
"Pinterest how to disable lazy loading" and "Pinterest how to disable infinite scroll"
keep returning the opposite of what I am looking for -- incorrect results for my purposes are anything like:
"How to add infinite scroll to my website",
"20 Useful Pinterest Tools",
or anything to do with adding infinite scroll.
The Problem: Infinite Scroll/Lazy Loading makes it hard for me to use browser plugins like jquerify (Chrome) and FireQuery (Firefox)
The issue for me is that I want to be able to view all my pins on a given board at once. Then I can use jQuery to manipulate all images on the page. Currently, infinite scroll makes it hard to keep track of where I'm at. I've tried stuff already by it's late at night and hard to remember everything. The important find was that in page source, Pinterest is using a "lazy" function. Here is what I found:
P.lazy = {
onImageLoad: function(a) {
var b = LOADED_CLASS;
P.overlap.isOverlappingViewport(a) && (b += FADE_CLASS);
a.className += b
}
};
This is just starting to be a deeper rabbit hole. I've checked for plugins to "remove", "disable", or "bypass" lazy loading, but haven't found any ... only those for adding it in.
Thanks in advance for your kind assistance and Cheers.
Pinterest loads cards via Ajax. When you scroll to the bottom of a page, browser javascript fires an Ajax call to load the next page full of cards.
This means it's not really possible to "disable" the infinite scrolling feature.
A few possible approaches:
Depending on how you're instantiating the browser, you might try setting or spoofing the window dimensions to a very large height. Pinterest may detect that height and attempt to load a window's worth of images, which may be enough to cover the feed you're trying to scrape.
If #1 is not practical for you, you can use javascript/jquery to keep scrolling the browser down until it has finished loading all the images. There are several ways to do this, since you are injecting javascript into the browser session.
(a) You can do this the "dumb" way with a loop that sets a timeout (setTimeout), then scrolls to the bottom (scrollTo()), then keeps going until the window stops scrolling and that comprises a kludgey auto-detect for the bottom of the page load.
(b) a more sophisticated approach would be to implement a listener for pinterest's ajax load function, (see the code, but it's a GET request to URL https://www.pinterest.com/resource/UserHomefeedResource/get/). An ajaxComplete() jQuery handler may help you detect the completion of a page load request so you can scrape the new images loaded.
Hope that helps
I am trying to recreate some effects similar to the div loading effects on this site i.e. there is no visible content when you load the page but upon clicking on a navigation link, it dynamically loads the divs.
http://worldofmerix.com
It is for a film studio website and I would like it to be interactive like this site. Does anyone know how I could achieve these effects with Javascript and/or jQuery?
Thanks for all the help in advance!
Have you used jQuery before or looked at the docs? This is really quite simple using jQuery's built-in animation effects such as fadeIn. The site you've linked to doesn't dynamically load the content - it's all part of the same page and simply displayed and hidden as appropriate.
Here's a rough fiddle showing how it works. Of course, you'd need to work out the styles and quirks in animations.
On my website, I have a booking widget at the top of each page to allow visitors to enter our booking engine. The code behind it uses quite a bit of HTML, pushing down the content on each page in the source. In an attempt to better my SEO, I decided to have the code placed in a DIV tag at the bottom of the page, and, when the DOM is ready, I use JQuery to physically move the DIV from the bottom of the DOM to the top where it needs to be to render correctly.
My question is if this is really helping SEO? Does Google look at the DOM/Source after all Javascript has run, or before? Does moving these few hundred lines of HTML to the bottom of the HTML source gain me any advantage?
Spiders do not process javascript. So any content that appears/moves or is created by javascript will appear as if it hasn't been moved or created at all.
I'd be really surprised if web crawlers execute the scripts on the page. They probably scan the raw response.
That doesnot have any effect on the SEO.
But placing the javascript at the bottom will defnitely help you to load the webpages faster.
There is no harm for SEO as well, you can defnitely proceed with your approach
There is a distinction between javascript executed on load versus during the user session. The on-load javascript is more times than not indexed by google. The dynamic content or alterations on the client side are not well indexed.
So, it can't be ignored.
I'm using the Google maps API to place a map onto a web page, just like millions of other sites have done.
However, once I click on the map (and let go), the map then acts if the mouse button is still being held and drags the map all over the page. The only way to get free of this drag action is to hit F5 and reload the page.
I've spent several hours scouring Google to find a remedy to this but can't find any mention of this issue from anyone else.
The problem can be seen at the bottom of the following page:
http://www.ef-deutschland.de/master/lt2010/default.aspx
Does anyone have any idea why this is occurring?
I vagely remember encoutering something similar a while back, I think it was caused by having an overlay somewhere on the map that wasn't supposed to be there.
Also try simplifying the code, put the map on its own page (without all the other jQuery stuff going on), and remove all parts of your code one by one until you can isolate the problem...