{"id":7287,"date":"2025-07-21T08:53:06","date_gmt":"2025-07-21T08:53:06","guid":{"rendered":"https:\/\/impulsebyte.com\/blogs\/?p=7287"},"modified":"2025-07-21T09:33:08","modified_gmt":"2025-07-21T09:33:08","slug":"improve-page-speed-using-intersectionobserver-api-in-codeigniter-4","status":"publish","type":"post","link":"https:\/\/impulsebyte.com\/blogs\/pageload-speed\/improve-page-speed-using-intersectionobserver-api-in-codeigniter-4\/","title":{"rendered":"Improving Page Speed and Core Web Vitals with IntersectionObserver in CodeIgniter 4"},"content":{"rendered":"\n

Page Speed<\/a> depends reducing your page load time from 9.6s to under 2.0s and passing Core Web Vitals requires both backend optimizations and efficient frontend strategies. The IntersectionObserver API<\/a> is a smart way to defer loading of offscreen elements (like images, iframes, or heavy scripts), improving metrics like Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).<\/p>\n\n\n\n

\"Page
Source: https:\/\/www.pexels.com\/photo\/high-speed-night-train-in-motion-33059163\/<\/a><\/figcaption><\/figure>\n\n\n\n

Below is a streamlined guide to implement lazy loading using IntersectionObserver in your CodeIgniter 4 project.<\/p>\n\n\n\n

Why Use IntersectionObserver API to increase Page Speed?<\/h2>\n\n\n\n
    \n
  • Efficient Lazy Loading:<\/strong> Loads images or resources only when they are close to entering the viewport.<\/li>\n\n\n\n
  • Better User Experience:<\/strong> Faster initial render, since not all elements are fetched at once.<\/li>\n\n\n\n
  • Improved Core Web Vitals:<\/strong> Reduces LCP and mitigates layout shifts by controlling loading behavior.<\/li>\n<\/ul>\n\n\n\n

    Implementation Process in CodeIgniter 4<\/h2>\n\n\n\n

    1. Render “Lazy” Images in Your Views<\/h2>\n\n\n\n

    Update your image tags to use a placeholder src<\/code> and move the real image source to a data-src<\/code> attribute.<\/p>\n\n\n\n

    <\/circle><\/circle><\/circle><\/g><\/svg><\/span>