OPTIMIZING BLIBLI EKO KURNIAWAN KHANNEDY

OPTIMIZING BLIBLI AGENDA ▸ Optimizing Blibli Page Render ▸ Optimizing Blibli Search

OPTIMIZING BLIBLI PAGE RENDER OPTIMIZING BLIBLI

OPTIMIZING BLIBLI BLIBLI

OPTIMIZING BLIBLI BLIBLI ▸ Reload Page every time customer click link. ▸ Using ajax for paging.

PJAX PUSHSTATE + AJAX

OPTIMIZING BLIBLI WHAT IS PJAX ▸ PJAX is combination of PushState and AJAX to deliver a fast browsing experience with real permalinks, page titles, and a working back button.

OPTIMIZING BLIBLI HOW PJAX WORKS? ▸ PJAX works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax'd html. ▸ It then updates the browser's current URL using pushState without reloading your page's layout or any resources (JS, CSS), giving the appearance of a fast, full page load. ▸ But really it's just ajax and pushState.

OPTIMIZING BLIBLI HOW PJAX WORKS? SERVER Ajax Request HTML Body Content

OPTIMIZING BLIBLI HOW IS PJAX FASTER THAN NORMAL PAGE RELOAD? ▸ Save on the overhead of fetching/parsing CSS and JS on each page load. ▸ Browser doesn't have to parse all the JS again. ▸ This feels a lot like SPA but works without the complexity of an SPA.

OPTIMIZING BLIBLI IMPLEMENTING PJAX (CLIENT SIDE + JQUERY) ▸ https://github.com/defunkt/jquery-pjax $(document).pjax('a', '#pjax-container')

OPTIMIZING BLIBLI IMPLEMENTING PJAX (SERVER SIDE) if request.headers['X-PJAX'] render :layout => false end

OPTIMIZING BLIBLI WHO IS USING PJAX?

OPTIMIZING BLIBLI WHO IS USING PJAX?

OPTIMIZING BLIBLI WHO IS USING PJAX?

OPTIMIZING BLIBLI SEARCH ELASTICSEARCH & MARVEL

OPTIMIZING BLIBLI BLIBLI SEARCH

OPTIMIZING FRONTEND OPTIMIZING BLIBLI SEARCH

OPTIMIZING BLIBLI FACET/AGGREGATION PROBLEM ▸ Facet/Aggregation is SLOW, use it wisely. ▸ Query time with facet/aggregation is 3-10 times slower than without facet/ aggregation. ▸ Currently in Blibli, we are using facet/aggregation in all search page.

OPTIMIZING BLIBLI REMOVE FACET/AGGREGATION IN PAGING ▸ Every time customer change page in search result. We fetch search result and all facet/aggregation via ajax. ▸ https://www.blibli.com/ajax-search ▸ Actually we don’t need facet/aggregation result if only change page ▸ https://www.blibli.com/ajax-search?aggregation=false

OPTIMIZING BLIBLI PARTIAL FACET/AGGREGATION ▸ In Blibli, every times customer filter facet/aggregation, We will reload all search result and aggregation. ▸ But, we still using old facet for selected filter. ▸ https://www.blibli.com/ajax-search?brand=Acer&aggregation_brand=false

OPTIMIZING BACKEND OPTIMIZING BLIBLI SEARCH

OPTIMIZING BLIBLI CURRENT BLIBLI SOLR (MASTER - SLAVE) ▸ Currently Blibli using 8 Solr Server for Search. ▸ Master - Slave Replication. ▸ No Shard. ▸ Workload distribution only using Load Balancer.

OPTIMIZING BLIBLI MASTER - SLAVE PROBLEM

OPTIMIZING BLIBLI SHARDING (ELASTICSEARCH OR SOLRCLOUD)

OPTIMIZING BLIBLI SHARDING PROBLEM (RELEVANCY) ▸ The trick of relevancy is that search engines (Solr or Elasticsearch), are simply sophisticated text matching systems. They can tell you when the search word matches a word in the document, but they aren’t nearly smart or adaptable as human sales associate. ▸ Outside of this core “engine”, a lot of search relevancy is about development required to text analysis, correctly boosting/weighting on the right factors, tags ontologies or natural language processing.

OPTIMIZING BLIBLI CORE ENGINE RELEVANCY PROBLEM

REAL TIME SEARCH OPTIMIZING BLIBLI SEARCH

OPTIMIZING BLIBLI CURRENT BLIBLI INDEX ANALYZER ▸ Currently we are using stop word to analyze the text. ▸ Customer can only search word by word. ▸ We need to used N-Gram index analyzer if we want to implement Real Time Search.

OPTIMIZING BLIBLI STOP WORD ANALYZER PROBLEM

OPTIMIZING BLIBLI DEKORUMA REAL TIME SEARCH (USING ALGOLIA)

OPTIMIZING BLIBLI IMPLEMENTING REAL TIME SEARCH ▸ Implementing Real Time Search is challenging, especially in facet/aggregation. ▸ We can use google search technic. ▸ When user typing, we can show real time search result. ▸ When user stop typing or hit enter, we show the facet/aggregation.

THANKS