Hype Hype Hype
- Tech SEO
HHH is a Japanese lifestyle website covering streetwear, fashion, street art, music, tech and internet culture.
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.
- Nuxt.js for server-rendering
- Lazy Loading
- Oembed for Social Media components
- MongoDB as primary database
- Elasticsearch index
- Ghost headless CMS with custom caching layer
- Browser, server-side, CDN caching
- SSL, hardened security headers (including CSP)
- 95/10 Google PageSpeed
- Minimum libraries used
- Responsive images
- Browser and CDN caching
- 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