Improving Portfolio Index Performance with Pagination

The Problem

The devlog-ist/landing project is a portfolio site designed to showcase a developer's work. Initially, when users applied filters (e.g., by language, tag, or search term), the system loaded all matching posts at once. This approach became problematic for portfolios with a large number of posts, leading to increased database load and slower page loading times, negatively impacting the user experience.

The Approach

To address this, we implemented pagination for filtered portfolio results. Instead of loading all matching posts, the system now returns results in smaller, manageable chunks (10 posts per page).

This involved modifying the query logic to include LIMIT and OFFSET clauses, effectively dividing the result set into pages. A simple example of how this can be achieved in a backend environment is shown below:

<?php

$page = isset($_GET['page']) ? (int)$_GET['page'] : 1; // Current page number
$posts_per_page = 10;
$offset = ($page - 1) * $posts_per_page;

// Example database query with pagination
$query = "SELECT * FROM portfolio_posts WHERE tag = 'example' LIMIT {$posts_per_page} OFFSET {$offset}";

// Execute the query and display the results
?>

This PHP snippet demonstrates the core concept. The $offset variable is calculated based on the current page number and the number of posts per page. This offset is then used in the SQL query to fetch only the posts relevant to the current page.

The Result

By implementing pagination, we achieved a significant reduction in database load and page weight, especially for large portfolios. This improvement translates to faster loading times and a better overall user experience when browsing filtered content.