Panjo, 30% Faster
It is no secret that Google likes fast pages and sites. Here are 300 articles on the topic from the Google Webmaster Central Blog. It is further no secret that fast page load times are correlated with higher sales, as this Kissmetrics blog post outlines. At Panjo.com where any enthusiast community can build a marketplace, sellers go to great lengths to extensively photograph their listings and describe the items they are selling in tremendous detail. We go to great lengths to render those pages as beautifully, mobile-responsively, and quickly as possible. We recently reduced page load time 30% in under two days of work.
To get started, we turned to these two resources: https://developers.google.com/speed/pagespeed/insights/ https://developers.google.com/speed/docs/insights/rules
We observed some of the biggest improvements by enabling gzip compression. We found that while we had static compression enabled on our servers, we didn’t have dynamic compression enabled. Google was shouting this recommendation to the rafters. (https://developers.google.com/speed/docs/insights/EnableCompression). Once we enabled this compression on our Windows servers, loading of pages improved greatly since the pages were returning as gzip compressed files (CSS/JavaScript, etc) now.
Next, we eliminated render-blocking JavaScript and CSS in above-the-fold content. Google recommends loading only the required CSS/JavaScript for above-fold-content before loading the rest. One way we accomplished this was to load non-critical CSS asynchronously (tool we used https://github.com/filamentgroup/loadCSS). We also loaded javascript using the “async” tag. (https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript#parser-blocking-vs-asynchronous-javascript)
Finally, we significantly reduced the page file sizes of the pages that serves as community marketplace home pages within Panjo.com. These are high traffic pages for us and also intensive pages to load. We built the new community marketplace home pages using ReactJS. ReactJS made it simple to build a toggle that allows marketplace shoppers to select their preferred view of the marketplace: large photos, thumbnails, or a social feed that includes comments from community members. However, ReactJS created a large JavaScript file that a website visitor needed to download. One key to accelerating the page was to strip out as many unnecessary dependencies from unused plugins (http://stackoverflow.com/a/34241128/3150021). Another key to accelerating the page was to stop returning unused data from the backend. We build, measure, and iterate fast. We sometimes fail to clean up after ourselves. The backend was returning data used in a prior version of the page. http://miniprofiler.com/ helped surface some of the long since abandoned backend data that was getting returned and going unused.
