Achieve nearly 100 points on both ends for personal website speed using Next.js 15.1

Introduction

In today's digital age, personal websites are not only platforms for showcasing personal brands and professional skills but also bridges connecting potential clients and partners. With technological advancements, users have higher expectations for website loading speeds and user experiences. I am building my personal website using the Next.js 15.1 and Strapi 5.0 technology stack, aiming to create a platform that is both fast and easy to optimize for search engines.

Problem

Search Engine Optimization (SEO) is key to improving website visibility, and search engines like Google consider page loading speed and user experience when indexing websites. Therefore, optimizing website speed is crucial for improving SEO rankings. As a developer with some understanding of SEO, I have paid special attention to how to leverage Next.js's Static Generation (SSG) feature to enhance website speed during the development process.

Actions

During the website construction process, I took the following actions:

• Technology Selection: I chose Next.js 15.1as the framework because it offers SSG and Server-Side Rendering (SSR) capabilities, which help improve page loading speeds.

export async function generateStaticParams() {
  const token = process.env.STRAPI_API_TOKEN;
  const path = `/case-studies`;
  const options = {headers: {Authorization: `Bearer ${token}`}};
  const caseResponse = await fetchAPI(
    path,
    {
      populate: ['category'],
    },
    options
  );

  return caseResponse.data.map(
    (caseStudy: {
      locale: string;
      slug: string;
      category: {
        name: string;
      };
    }) => ({locale: caseStudy.locale, slug: caseStudy.slug, category: caseStudy.category.name})
  );
}

export async function fetchAPI(
  path: string,
  urlParamsObject = {},
  options = {}
) {
  let requestUrl = ""
  try {
    // Merge default and user options
    const mergedOptions = {
      next: {revalidate: 60},
      headers: {
        "Content-Type": "application/json",
      },
      ...options,
    };

    // Build request URL
    const queryString = qs.stringify(urlParamsObject);
    let requestUrl = `${getStrapiAPI(
      `/api${path}${queryString ? `?${queryString}` : ""}`
    )}`;

    // Trigger API call
    const response = await fetch(requestUrl, mergedOptions);
    const status = response.status;
    if (200 !== status) {
      throw new Error(`ERROR to get server data from: ${requestUrl},status code: ${status}`)
    }
    return await response.json();
  } catch (error) {
    console.error("ERROR to fetch: ", requestUrl, ", error info: ", error);
    throw new Error(`Please check if your server is running and you set all the required tokens.`);
  }
}

• Content Management: I used Strapi 5.0 as the CMS, which supports seamless integration with Next.js, facilitating content management and SEO optimization.
• Image Optimization: Through Next.js's image optimization API, images are automatically compressed and optimized, reducing loading times.
• Code Splitting: Utilizing Next.js's code splitting feature, resources are loaded on demand, reducing the initial screen loading time.

Results

By implementing the above strategies, my personal website achieved a score close to 100 on Google PageSpeed tests. [Image] This score not only enhances the user experience but also is expected to improve search engine rankings.

Discussion

The analysis shows that using SSG for static page generation is one of the key factors in improving website speed. Since my content site does not require real-time updates, SSG became the ideal choice. Additionally, proper resource optimization and code splitting are also significant factors in enhancing performance.

Next Steps

If the personal website achieves success in SEO, I plan to add CDN services to the website to further accelerate global user access speeds and improve the user experience worldwide.

Appendix

• Google Page Speed: https://pagespeed.web.dev/