Legacy PHP → Next.js — Lessons from Diagnosing Shinhan Securities Vietnam's Homepage

This article documents the diagnosis and proposal phase for rebuilding the official homepage of Shinhan Securities Vietnam. Since development has not yet started, the figures mentioned here are measured diagnostic values and contractual guarantees, not completed results.

The Problem

If you are operating a homepage built with legacy PHP and a custom CMS, it is difficult to objectively assess how severe the current state is. Slow page loading speeds often prevent core conversions like account opening or inquiries in mobile environments. Technical debt accumulates to the point where no one dares to touch the code. These legacy systems act as hidden costs that cause missed business opportunities.

Why It Is Difficult

The problems with legacy systems are not clearly revealed by numbers, so proceeding with a renewal based on feelings alone leaves insufficient evidence to prove improvement. Financial institutions have strict brand guidelines, security regulations, and legal disclosure obligations, creating many constraints from the design stage. This often leads to development delays or rework. Additionally, when the Korean headquarters and the Vietnamese subsidiary view different screens during meetings, the decision-making process becomes tangled, easily stalling the project. These structural issues cannot be resolved by simple code modifications alone.

What We Did

Before kickoff, we measured the existing site's mobile PageSpeed score at 19 and the payload at 7.2MB, quantifying the current status. We performed a gap analysis across 6 axes—IA, i18n, color, typography, layout, and UX—estimating the total gap at approximately 60%. We proposed a stack consisting of Next.js 16 (App Router, SSR+ISR), Sanity CMS, and Cloudflare Pro WAF, including 12 months of free maintenance. We proposed passing criteria as contractual figures: mobile PageSpeed ≥65, LCP <2.5s, CLS <0.10, INP <200ms, and 0 Critical/High issues in OWASP Top 10. We incorporated Schema.org types (6 types including FinancialService, FinancialProduct) into the design to structure for AI search citations. We first created a 12-page HTML demo package so that the Korean headquarters and the local Vietnamese team could review the same screens. Instead of explaining verbally in meetings, we opened the same screens and decided item by item, handling 8 decision items in a single meeting via a table. The schedule was set for 8 weeks: 1 week for kickoff, 2–3 weeks for design, 4–6 weeks for development, 7 weeks for migration/QA/UAT, and 8 weeks for launch/monitoring. The quote was finalized in July 2026, and main development has not yet started.

By the Numbers

Metric	Value	Notes
Measured Status	PageSpeed 19 · 7.2MB	Mobile baseline before renewal
Gap Analysis	Phase 1 Draft Fit 40% → 85%	Result of 6-axis analysis
Demo Package	12 pages	For joint review by HQ and local team
Contractual Guarantees	PageSpeed ≥65 · LCP <2.5s · OWASP Critical/High 0	Contract figures (proposal)
Project Schedule	8 weeks · 12 months free maintenance	Plan
Supported Languages	3 (vi · ko · en)	Multilingual site structure

What This Article Says

Legacy renewal is not simply a task of replacing code, but a process of decision-making that clearly defines what to cut. True improvement is only proven when the current state is accurately inventoried before the project starts and measured again after completion using the same standards. Your task today is to enter your current site address into PageSpeed Insights and record three numbers: mobile score, LCP, and payload. These three numbers will become the first line of the future contract and the criteria that determine the project's success or failure.

The Problem

Why It Is Difficult

What We Did

By the Numbers

What This Article Says

Further Reading