Jump to content
Sign in to follow this  
lynkfs

lazy loading SEO

Recommended Posts

Checking the SEO audits on a webpage constructed with SMS, I noticed I got negative points for not lazy loading images.

Lazy loading is to defer loading of images which are initially not visible when the page loads (below the fold), and to only start loading them when users scroll down sufficiently that they (probably will) become visible.

There is the Intersection Observer Api which can help with that. See https://developers.google.com/web/updates/2016/04/intersectionobserver and https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Have a form with an element (say button) and position the button so that it is not visible (top=1200px).

Set up an IntersectionObserver and check the intersectionRatio in the asynchronous callback. Scrolling down so that the button becomes visible changes the form's background.

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
  NativeScrolling := True;
  W3Button1.Top := 1200;

  procedure mycallback(changes: variant);
  begin
    If changes[0].intersectionRatio > 0            //between 0 and 1 = partly visible
      then ThemeBackGround := bsDecorativeInvertBackground;
  end;

  var io : variant;
  asm io = new IntersectionObserver( @mycallback ); end;
  io.observe(W3Button1.handle);

end;

Note

- does not work in ide but works fine from file or server 

- for lazy loading images thinking of a TW3Image descendant or class helper which implements a VisibilityChange callback which supplies src parameter ...

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×