Prikol

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

Prikol.cc is probably the biggest Russian viral entertainment posts aggregator - over 50k articles, and counting.

Client
Facebook publisher
Year
2018

An owner of multiple Facebook groups with a total audience of over 30 million users wanted to make a network of simple entertainment viral websites, optimized for Facebook audience and social sharing.

People like memes and entertainment. When people consume this type of content they don't want to be overloaded by interface and design. This is the main reason Prikol is so simple, light and crazy fast.

Some numbers: Prikol has over 50.000 articles scraped from multiple sources, over half a million images that weigh over a 100GB. The scraping part took over a week to complete.

The next challenge was a relative posts feed. After a few testings, I decided to move completely to Elasticsearch, since queries to MongoDB began to took over 500ms which is inappropriate. With Elasticsearch I was able to reduce queries to 50ms. I also made Redis caching daemons for the hottest data, plus I added Redis caching to relatively static API endpoints.

This type of content is visual-heavy. Most articles consist only of images. That's why image optimization is very crucial. 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 also cared about SEO and served images for crawlers separately with noscript.

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

All these optimizations combined allowed a content-heavy website to hit ~97% 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
  • Custom scraper and image downloader
  • MongoDB as primary database
  • Elasticsearch index for most queries
  • Redis cache for API
  • Custom CMS solution
  • Browser, server-side, CDN caching
  • SSL, hardened security headers (including CSP)
03 Speed
  • 97/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