“Scroll targets are calculated upon page load by the browser. Due to the nature of how LazyLoading works, by definition images won’t load until they’re about to come on the screen as users scroll down the page.

However a consistent issue across the web relates to mixing LazyLoading with internal anchor links. LazyLoad and Anchor Link Scrolling Conflict Similarly, I’m assuming you already have Anchor scrolling navigation links in action on your site, or you wouldn’t be reading this. This can be used for one-page websites and landing pages, or just as a great UX feature to help your website visitors navigate your site. About Anchor Smooth Scroll navigation linksĪnchor scroll navigation links are another great standard feature that allow you to link to a specific section, div or element of a page by clicking a link or button and targeting an element’s #ID, and the browser will go to that point on the page. There are already a ton of great resources available about the benefits of LazyLoading ( WP-Rocket) ( Google) and I’m going to assume everyone reading this post is already aware of the benefits and has LazyLoading implemented on their site. About LazyLoadĪs anyone reading this post likely already aware, LazyLoading is a must for any website with lots of images, as it defers image loading until the images are about to enter the viewport of your browser, which greatly increases your site loading speed, which can have drasticly positive SEO implications (or negative if you don’t).

Quick note – this post focuses on development for WordPress using the Divi Theme and WP-Rocket’s built in LazyLoad feature, however I’m sure much of the code or best practices would apply for website developers using LazyLoading and Anchor Link Smooth Scrolling across all themes.

Anchor links in divi