Adding a Custom Loading Screen for Faster Perceived Load Time in Jekyll

When building websites with Jekyll, enhancing user experience is crucial. One effective way to improve perceived load times is by adding a custom loading screen. This technique keeps visitors engaged while the site loads in the background.

Why Use a Custom Loading Screen?

A custom loading screen provides visual feedback to users, indicating that content is loading. It can reduce bounce rates and make your website feel faster, especially if your site has heavy images or scripts.

Steps to Add a Custom Loading Screen in Jekyll

Follow these steps to implement a loading screen in your Jekyll site:

• Design a loading overlay with HTML and CSS.
• Add the overlay to your site's layout.
• Use JavaScript to hide the overlay once the page has fully loaded.

1. Create the Loading Overlay

In your _includes folder, create a new file called loading.html. Add the following code:

<div id="loading-screen">
  <div class="spinner"></div>
</div>

2. Style the Loading Screen

In your main CSS file, add styles for the loading overlay and spinner:

/* styles.css */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

3. Include the Loading Overlay in Your Layout

In your _layouts/default.html or equivalent layout file, include the loading partial:

<!-- include loading -->
{% include loading.html %}

4. Add JavaScript to Hide the Loading Screen

At the end of your layout, add a script to hide the loading screen once the page loads:

<script>
  window.addEventListener('load', function() {
    document.getElementById('loading-screen').style.display = 'none';
  });
</script>

Conclusion

Adding a custom loading screen in Jekyll is a simple yet effective way to improve perceived performance. By providing visual feedback, you can make your website feel faster and more professional. Experiment with different designs to match your site's style and keep visitors engaged.