Leon . Kang
Back to articles
Performance 2/3/2026 7 min read

Optimizing a Personal Site for 'Reliability': A Developer's Log

Why Now?

I want my personal recording site—something built for my own satisfaction—to feel like a "long-term reliable tool entry point" rather than a temporary showcase. The core of this optimization is to make it more stable, clean, and aligned with my aesthetic standards for "reliable personal tools."

What's Changed

Performance: Lighter, Stabler, More Controllable

1) Route-level Lazy Loading

Resume / Bio / BlogList / BlogDetail are now lazy-loaded, reducing the initial bundle size and avoiding loading irrelevant pages upfront.

2) Deferred Loading for Blog Highlighting

react-syntax-highlighter is quite heavy, so it's now on-demand: highlighting and styles only load when an article contains code blocks, preventing common articles from slowing down the initial load.

3) Motion Reduction Strategy

Tailored for prefers-reduced-motion:

  • Particle Background: Completely disabled.
  • Typewriter Effect: Replaced with static text.

This respects system preferences and reduces rendering strain on lower-end devices.

4) Images: Lazy/Async by Default

Unified RTImage to use loading="lazy" and decoding="async" by default. Critical resources like avatars are manually set to eager.

UI Structure: Clearer Positioning & Hierarchy

1) Hero Section Refinement

  • Added a positioning tagline.
  • Included three "Principles/Preferences" info blocks.
  • The typewriter content shifted from "skill tags" to "reliability positioning."

2) Experience Section: Adding "Reliability" Clue

The timeline now includes 2–3 key points focused on "long-term maintenance and reliability," moving beyond just years and titles.

  • Building and maintaining production-grade applications with long-term stability as a core consideration.
  • Enhancing data reliability in user-facing flows through robust validation and edge-case handling.
  • Collaborating with Design and Backend to deliver maintainable features in large-scale scenarios.

3) Services: Rewritten for Consistency

Descriptions moved from "technical categories" to "problem-solving approaches," emphasizing data reliability and long-term maintenance.

Consistency Across Languages (Trilingual Sync)

All core copy has been synchronized across EN / zh-CN / ja. Key points:

  • Uniform emphasis on "reliable personal tools."
  • Redefined service descriptions (from "what I can do" to "how I solve problems").
  • The contact section's tone changed from "casual chat" to "collaboration for building reliable tools."

Current State

The result is a site that is lighter, stabler, and clearer, moving closer to the original goal of "personal satisfaction":

  • Fewer synchronous loads on the initial screen.
  • Motion effects are more friendly to performance and preferences.
  • Copy aligns with the new positioning, and information hierarchy is much sharper.