Hype Hype Hype

  • Front-end,
  • Back-end,
  • Tech SEO

HHH is a Japanese lifestyle website covering streetwear, fashion, street art, music, tech and internet culture.

Client
HHH
Year
2019

East Asia is a huge fashion market, and Hype Hype Hype is targeting one of it's biggest countries - Japan. Founded by ex-Rakuten employees, it was initially created as a street fashion news aggregator.

For this project, I used Ghost headless CMS with a custom caching layer. Because of the necessary business request by a client consisting of creating lists of affiliate products and adding relevant affiliate links to articles, the custom editor dashboard where it was managed was created.

MongoDB was used as a primary database, but a lot of queries handled by the Elasticsearch index. Besides that, additional Redis caching level was created.

On the server-side, I ran Imgproxy instance, which makes on-the-fly image converting and resizes. On front-end, multiple responsive images techniques were implemented: lazy-loading with preloader, picture tag for picking the right image resolution and WEBP option for browsers that have its support. I cared about SEO and served images for crawlers separately with noscript.

Articles have a lot of embed content: Instagram, Youtube, Twitter. Using their embed code or SDK hurts website loading performance, so I decided to use Oembed API, to asynchronously load posts data with lazy loading and then render them as they appear on user screen.

These optimizations combined allowed website to hit ~95% Google PageSpeed Insights.

01 Front-end
  • Vue.js
  • Nuxt.js for server-rendering
  • Lazy Loading
  • Oembed for Social Media components
  • PWA-ready
02 Back-end
  • MongoDB as primary database
  • Elasticsearch index
  • Ghost headless CMS with custom caching layer
  • Browser, server-side, CDN caching
  • SSL, hardened security headers (including CSP)
03 Speed
  • 95/10 Google PageSpeed
  • Minimum libraries used
  • Responsive images
  • Browser and CDN caching
04 Tech SEO
  • Custom AMP pages for articles
  • SEO and Social Media meta tags
  • Advanced Schema.org JSON-LD
  • Advanced XML sitemaps and feeds: articles, images, RSS 2.0
  • Green Google PageSpeed Insights
  • HTML sitemap for faster discovery
  • Google analytics integration