--- title: "Tan Doanh: a custom theme, a PC build tool and installments, mobile PageSpeed from 65 to 96" url: https://phatdev.net/en/case-studies/tandoanh-theme-buildpc lang: en updated: 2026-11-08 alternate: vi: https://phatdev.net/vi/case-studies/tandoanh-theme-buildpc markdown: https://phatdev.net/en/case-studies/tandoanh-theme-buildpc.md --- # Tan Doanh: a custom theme, a PC build tool and installments, mobile PageSpeed from 65 to 96 > The computer-parts shop Tan Doanh needed a page that is fast on phones and a place for customers to put a build together. I rebuilt the theme and wrote a build tool with compatibility checks and installments right on the page. - Client: Tan Doanh (computer parts and prebuilt PC shop) - Industry: Computer parts and PC retail - Year: 2026 - Role: Planning, architecture and operations (code written with Claude Code) - Duration: From 30 Jun 2026, still being refined - Stack: WordPress, WooCommerce, PHP, JavaScript, Redis, Nginx ## Key results - 65 → 96: Home page mobile PageSpeed, first version vs after tuning (3 Jul 2026) - 97 / 100: PageSpeed mobile / desktop of the PC build page, measured 8 Nov 2026 - 11: part groups in one build table - 4: installment terms compared right on the build ## Background Tan Doanh is a shop that sells computer parts and prebuilt desktops. Its customers rarely buy a single part. They want to put a whole machine together, so they need to know which parts fit each other, whether the power supply is strong enough, and what they would pay each month on installments. The shop's site, tandoanh.vn, ran on an older, fairly heavy theme and scored low on mobile speed. I rebuilt the interface as a custom theme for WordPress and WooCommerce, then wrote a tool that lets customers assemble a build right on the page. The work started on 30 Jun 2026. The new theme now runs on tandoanh.vn. The latest measurements in this story are from 8 Nov 2026. ![The Tan Doanh home page on a desktop](https://phatdev.net/uploads/case/tandoanh-theme-buildpc/home-desktop-1440.webp) ## The problem Three jobs had to be done at once, and they pull in different directions. The first is speed. The first version of the new theme, measured on 3 Jul 2026, scored only 65 to 77 on mobile depending on the page, with the home page at the low end, 65. The wait for the main image of the first screen ran from 4.4 to 12.4 seconds. The second is a build tool that is actually good. Pick from 11 kinds of parts, check compatibility, add up the price, work out installments, then buy or print a quote. Every wrong step loses a customer, or worse, sells someone a part that does not fit. The third is that shop staff must be able to edit text and images in the WordPress editor themselves, instead of calling a developer to change one line. ## How it was done ### 1. Rebuild as a block theme The new theme is a block theme (every header, footer and section is a block you can edit in WordPress's Site Editor). More than 50 old pages were moved to blocks. The old theme's shortcodes still work so pages not yet moved do not break. Both languages, Vietnamese and English, are rendered on the server. ### 2. Measure, change one thing, measure again I measured with PageSpeed Insights and worked in rounds: find the heaviest thing sitting before the page appears, fix it, measure again. The first round found: - The reCAPTCHA library (spam protection, 378 KB) was loaded on every page. It now loads only on the contact page. - Banner images came in one size, so phones downloaded a 1920-pixel file of 179 KB. I produced three sizes and let the device choose. - The main image of the first screen had not been announced to the browser for early loading. In a later round I tried inlining the CSS needed for the first screen straight into the page. It made things worse: the home page score dropped to 40 and the browser's blocking time rose to 3,730 milliseconds, because the page grew and the browser processed the CSS twice. I dropped that idea. The deciding move was a plain one: cutting font files from 20 to 8 (3 Jul 2026). The chain of files to fetch before text appears got much shorter, and the home page jumped from 79 to 92 in my own test setup. ![Diagram from live stock through PC Builder, checks and installments to cart, quote, email and share link](https://phatdev.net/uploads/case/tandoanh-theme-buildpc/flow-en-1920.webp) ### 3. PC Builder: one table for 11 part groups The build tool is a plugin of its own. Each part group (CPU, motherboard, RAM, graphics card, storage, power supply, case, cooler, monitor and so on) is one row in a table. Click a row to open a picker with filters like a category page. The picker lists only items that can be sold, and price and stock come from the live shop. I was most careful about compatibility. When you pick a CPU and a motherboard, the tool compares the socket and the board's chipset. When you pick RAM, it compares the RAM type the board supports. For the power supply it estimates the power needed (with 25% headroom) and warns if the chosen unit falls short. ![The PC build page with the parts table and the total panel on the right](https://phatdev.net/uploads/case/tandoanh-theme-buildpc/build-desktop-1440.webp) I also removed something I had got wrong. On the prebuilt desktop pages, the performance score bars were at first a number multiplied by a factor, not a measurement. On 4 Nov 2026, while reviewing, I replaced them with numbers from a benchmark table that has sources, printed the source under each table, and left the bar empty where no number exists. ### 4. Installments right on the build Under the total there is a Calculate installments button. The customer picks a credit card or a finance company, picks a bank, and sees the monthly payment, the conversion fee, the card fee, the total to pay and the difference from paying in full. A quick comparison shows four terms: 3, 6, 9 and 12 months. Fees per bank are entered in the admin area, not hard-coded. It only applies to orders of 3 million dong or more. The figures are always marked as estimates, because the real amount depends on the finance provider and the term the customer picks. ![The installment box with four terms and a comparison table](https://phatdev.net/uploads/case/tandoanh-theme-buildpc/installment-1440.webp) ## Results The numbers here are lab numbers from Google's PageSpeed Insights, simulating a phone on a slow network. They differ from real-user data and move by a few points between runs. **PageSpeed score on mobile, home page** | Metric | Before | After | | --- | --- | --- | | Home page, mobile | 65 | 96 | **Font files to download** | Metric | Before | After | | --- | --- | --- | | Whole site | 20 files | 8 files | **Home page HTML size on mobile** | Metric | Before | After | | --- | --- | --- | | Home page HTML, mobile | 479 KB | 353 KB | On 8 Nov 2026 I measured again: the PC build page scored 97 on mobile and 100 on desktop, the home page 93 on mobile and 100 on desktop. Layout shift (CLS) stayed at or near 0. One thing I have not managed. The mobile home page is 93 today, below the 96 of 3 Jul and below the 95 I set as a goal. I have not found the cause, and I am not drawing conclusions from three runs that gave the same number. ![Home page](https://phatdev.net/uploads/case/tandoanh-theme-buildpc/m-home-780.webp) ![PC build page](https://phatdev.net/uploads/case/tandoanh-theme-buildpc/m-build-780.webp) ![Installment box](https://phatdev.net/uploads/case/tandoanh-theme-buildpc/m-installment-780.webp) ## Lessons Measure several times before you believe. The PageSpeed score of one page can differ by 5 points between two runs, so I look at the middle value, not at a single number. Inlining CSS sounds like a standard speed trick, but on a heavy page it made things worse. Every trick has to be measured on your own page. A number without a source goes, even when it makes the page look better. The benchmark bars multiplied by a factor looked convincing, and that is exactly why they had to go. For customers who buy many parts, the tool should do the hardest part for them: knowing which part fits which. A pretty interface comes after that. ## Need something similar? If your shop sells products that must fit together, or your site is slow on phones, send me a few lines about the page. I will measure first, then tell you plainly what is worth fixing and what is not. - See the project page: https://phatdev.net/en/projects/tandoanh-theme.md ## More case studies - [Tan Doanh: a test copy that always matches the live shop, push on save plus a nightly check, 0 mismatches](https://phatdev.net/en/case-studies/tandoanh-staging-mirror.md) - [Tan Doanh ERP: inventory, sales, warranty and accounting in one app, now in a trial run](https://phatdev.net/en/case-studies/erp-tan-doanh.md) - [IGA: 5,256 gemstone products on a new design, mobile speed from 61 to 99, page addresses kept](https://phatdev.net/en/case-studies/iga-website.md)