Practice: Lazy Loading Content in htmx

Table of Contents

1. Challenge

   Welcome to the lab

   Welcome to the lab

   Practice: Lazy Loading Content in HTMX

   Introduction

   Welcome to the lab on improving the performance of slow-loading content in web applications!

   Sometimes, specific sections of a webpage can take a significant amount of time to load, delaying the entire page. This can negatively impact the user experience, as users may grow impatient while waiting for the content to load.

   In this lab, you will learn how to detect and optimize slow-loading sections in an EJS template by leveraging HTMX lazy loading.

   Analyzing the Problem

   To get started with the lab, you will need to start the Express application.

   In the terminal to the right, run the following command to start the server:

   npm run dev
   

   Refreshing the Simple Browser tab, you will see two links leading to different versions of the same page. You may need to refresh the browser window to load this page.

   Click on the Slow Content Page link to observe a page where all content, including the slow-loading sections, is loaded simultaneously. Please wait patiently as it loads, as this showcases the unoptimized version of the application.

   You will notice that the page takes a few seconds to load, leaving you waiting on the index page during this period. You can click the Index link and try again if needed.

   Your task is to analyze the cause of this slow-loading behavior and enhance its performance using HTMX.

   Diagnosing the Problem

   Opening the /app.js file, you will find a basic Express application configured to serve EJS templates.

   Tip: You can click on that file name button to open the file in the editor.

   Reviewing the declared /slow route, notice that it is directly calling the getSlowContent() function and uses this value to render the /views/full.ejs template. This requires the server to wait for the getSlowContent() function to finish before sending the response to the client.

   Scrolling down in the /app.js file, you'll notice that the getSlowContent() function introduces a deliberate 3-second delay using the setTimeout() function. Although this is a contrived example, it illustrates the problem of slow-loading content.

   In real-world applications, such delays could result from fetching data from external APIs, performing computationally intensive tasks, or handling large datasets. Demonstrating how slower parts of a webpage can significantly impact the overall loading time.

   To resolve this issue, you will implement a lazy loading mechanism for the slow-loading content using HTMX. This approach enables the server to quickly handle the initial request while asynchronously fetching the slow-loading content in the background.

   Click the right arrow to proceed to the next step.

2. Challenge

   HTMX Basics

   HTMX Basics

   If you are not already familiar with HTMX, it is a JavaScript library that allows you to create dynamic web applications with minimal effort. It enables you to load content asynchronously, update parts of a page, and handle user interactions without writing extensive JavaScript code.

   This is accomplished by using HTML attributes to define how elements should behave when certain events occur. HTMX handles the underlying JavaScript for you, making it easier to create interactive web applications.

   HTMX Attributes

   HTMX offers a collection of attributes that you can apply to your HTML elements to specify their behavior. Two key attributes that facilitate lazy loading are:

   hx-<method>: This group of attributes corresponds to the available HTTP methods. In this lab, you will use the hx-get attribute to issue a GET request to a specified URL when the element is triggered (e.g., on load). This will involve creating a new route to process the request.

   hx-trigger: This attribute defines the event that will trigger the request. For example, hx-trigger="load" will make the request when the element is loaded.

   By adding these attributes to an element, you can postpone the loading of the long running content until the page has fully loaded.

   This will improve the user experience by allowing the rest of the page to load quickly while the slow content is fetched in the background.

   Implementing the Lazy Loading

   To test and compare this solution, a copy of the /views/full.ejs template has been created as /views/lazyload.ejs. This file is almost identical to the full.ejs template, with slight modifications to the title.

   Additionally, the js/htmx.min.js script has been included in the head section of the file, which is the only JavaScript required for HTMX to function.

   Now to implement the lazy loading, you will need to refactor the following <div> to utilize the HTMX attributes.

   <div>
     <%= slowContent %>
   </div>
   

   Before looking at the solution see if you can implement the lazy loading on your own.

   Solution

   -----

   The new

   should look like this:

   <div 
     hx-get="/slowcontent"
     hx-trigger="load">
     Loading...
   </div>
   

   Note that the Loading... text is a placeholder that will be displayed while the content is being fetched.

   Tip: You can also find the completed versions of all files in the /solutions folder.

   Explanation

   With these updates, the <div> will issue a GET request to the /slowcontent route as soon as the page loads. The server should respond with the content that was originally assigned to the <%= slowContent %> variable. HTMX will automatically update the <div> with the server's response.

   Additional Routes

   To complete this lazy loading implementation, you will need to create a new route in your Express application to handle the /slowcontent request. This route should return the content that was previously in the <%= slowContent %> variable.

   Opening the /app.js file, the /lazyload route has been created to render the lazyload.ejs template.

   Just below that route create the /slowcontent route to respond to the GET request declared in the hx-get attribute. This route should return the content that was previously sent to the <%= slowContent %> variable in the /full route.

   See if you can implement this route before looking at the solution.

   Solution

   ----- The new route should look something like this: ```javascript app.get('/slowcontent', async (req, res) => { const slowContent = await getSlowContent(); res.send(slowContent); }); ```

   Testing the Lazy Loading

   After updating the lazyload.ejs template and adding the /slowcontent route, you can verify the lazy loading functionality.

   Return to the Simple Browser tab, navigate back to the Index page, and click on the HTMX Lazy Loaded Page link. This action will load the lazyload.ejs template, where you should briefly see the Loading... text until the /slowcontent request completes and the content of the <div> is updated with the server's response.

   This example illustrates how HTMX can significantly enhance the performance of slow-loading content in web applications with minimal declarative code. By leveraging lazy loading, you can improve the user experience by enabling the rest of the page to load promptly while the slower content is retrieved in the background.