MYFX Markets

As a front-end developer for this project, my responsibility was strictly translating the provided UI/UX designs into a high-fidelity, live WordPress website. While the design was handed off to me, my role focused entirely on pixel-perfect slicing, responsive architecture, and rigorous server-side performance optimization.

Built entirely from scratch, this web project was designed to attract a global audience in the highly competitive financial broker space. Operating on a separate domain from the main corporate site, it was likely utilized as part of a strategic A/B testing campaign to optimize conversion rates for different market segments. Because the project needed to move quickly, Elementor became the practical implementation layer. I treated it as an adaptive production challenge: learn the builder's constraints fast, ship the high-fidelity layout accurately, and still control the performance risks that usually come with builder-heavy WordPress pages.

Bento Grid & UI Slicing

Translating the complex UI, specifically the intricate Bento Grid layouts, into a functional live site required advanced Elementor maneuvering utilizing modern Flexbox Containers. Rather than forcing one fragile responsive layout to solve every viewport, I separated desktop and mobile blocks in specific edge cases where the design would otherwise break, stretch, or lose visual balance. This was a pragmatic trade-off: slightly more implementation complexity in exchange for a more reliable, pixel-faithful experience across devices.

Global Reach (Multilingual)

To support the global A/B testing ambition, I configured Polylang Pro to seamlessly serve four distinct languages: English, Bahasa Indonesia, Tiếng Việt (Vietnamese), and Thai. This required careful mapping of custom post types and Elementor templates to ensure flawless content delivery across South East Asian markets without layout shifts.

Financial broker websites must load instantly worldwide to establish trust. However, WordPress combined with Elementor is notoriously heavy. My architecture bypassed traditional, heavy optimization plugins and instead solved the speed issue directly at the server and DNS level.

I connected the domains and managed all DNS routing through Cloudflare, leveraging its edge caching and Web Application Firewall (WAF) to block bad bots before they hit the origin. On the server side, I heavily leaned on LiteSpeed caching. While SEO was not the primary goal for this specific testing domain, this infrastructure-first approach ensured that the heavy Elementor DOM was delivered globally with a sub-second Time to First Byte (TTFB).

PageSpeed (Web)

99

PageSpeed (Mobile)

98

GTmetrix Grade

B

Languages

4

The infrastructure optimization delivered spectacular results for a heavy builder-based site:

• PageSpeed Optimization: Skyrocketed the mobile performance score from 80 to 98, and the desktop (web) score from 72 to 99.
• GTmetrix LCP Optimization: Reduced Largest Contentful Paint (LCP) from an abysmal 7.4s down to 1.7s, boosting the overall performance grade from a D (55%) to B (88%).

Four languages were seamlessly localized, and the high-fidelity UI was successfully ported to a live, A/B testable environment.

Verified Benchmarks (Before & After)

GTmetrix Performance: LCP reduced from 7.4s to 1.7s.

Verified Links: Before (OM4af0fW) | After (pxqRTxjD)

Google PageSpeed Insights (Web): Performance Score increased from 72 to 99.

Google PageSpeed Insights (Mobile): Performance Score increased from 80 to 98.

Verified Links: Before (83a993loqx) | After (0eoglh20ab)

This project validated the trade-off of using Elementor in a production environment: while it inherently creates DOM bloat, rapid delivery is sometimes the higher priority for client testing campaigns. By understanding that strong server-level caching (LiteSpeed) and edge routing (Cloudflare) can successfully mitigate those front-end drawbacks, I was able to deliver both visual fidelity and top-tier performance speeds without compromising the timeline.