From 480a8c30b2e8128e86175972aa00a7532bcf2877 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Fri, 28 Sep 2018 20:20:34 +0300 Subject: [PATCH] Doc: improving performance --- docs/README.md | 1 + docs/improving-performance.md | 70 +++++++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 docs/improving-performance.md diff --git a/docs/README.md b/docs/README.md index d67c8651..d58cbd76 100644 --- a/docs/README.md +++ b/docs/README.md @@ -51,6 +51,7 @@ Documentation for specific topics can be found in the following files: * [Original create-react-app documentation](https://github.com/sharetribe/create-react-app/blob/master/packages/react-scripts/template/README.md) * [Customization checklist](customization-checklist.md) * [Icons](icons.md) +* [Improving performance](improving-performance.md) The application was bootstrapped with a forked version of [create-react-app](https://github.com/facebookincubator/create-react-app). While most of the diff --git a/docs/improving-performance.md b/docs/improving-performance.md new file mode 100644 index 00000000..ec9e99df --- /dev/null +++ b/docs/improving-performance.md @@ -0,0 +1,70 @@ +# Improving page rendering performance + +When we think about page speed there are actually two different scenarios that we need to address: + +* The speed of initial page load and possible reloads after that +* The speed of changing the page within Single page application (SPA) + +The first one is usually a slower process. A browser needs to load all the HTML, CSS, JavaScript, +and images - and then it needs to understand and execute those files, calculate layout, paint +components and finally composite the whole view. The initial page load is the slowest since the +consequent page reloads can take benefit from browser caches. + +SPAs can improve from that since they don't necessarily need to download anymore JavaScript, HTML, +or CSS - already downloaded JavaScript might be enough for rendering consequent pages when a user +wants to navigate to another page. Most of the time SPAs just fetch data for that page. + +These two UX scenarios might also conflict with each other. If all the JavaScript is in one big +bundle, page changes within a SPA are fast. However, downloading and evaluating a big JavaScript +file is slowing initial page rendering down. Even though users rarely experience the full initial +page load speed when they use an SPA like Flex Template for Web, it is good to keep track of that +speed. Especially since that is what search engine bots are experiencing and therefore it might +affect your page rank. + +Read more about +[website performance](https://developers.google.com/web/fundamentals/performance/why-performance-matters/). + +We haven't yet implemented code splitting to reduce initial page rendering time, but there're other +improvements that could be done to improve both cases of page rendering. + +## Check page performance + +The first step is, of course, to start measuring performance. +[Lighthouse](https://developers.google.com/web/tools/lighthouse/) is a good tool to check rendering +performance. At least check those pages that are visible to unauthenticated users (e.g. landing +page, search page, listing page, about page and other static pages). + +Lighthouse will give you some tips about how to improve performance and other aspects that website +developers should think about. + +## Optimize image sizes + +If your page is showing images, you should check that the image size is not bigger than what is +needed. So, adjusting image dimensions is the first step, but you should also think about image +quality, advanced rendering options and possibly serving those images from CDN instead of from +within your web app. + +Quick checklist: + +* Check that the actual dimensions of an image match with DOM element's dimensions. +* Lighthouse suggests that image compression level should be 85% or lower. + [Read more](https://developers.google.com/web/tools/lighthouse/audits/optimize-images) +* If you are using JPEG images, think about saving them as progressive JPEGs. + [Read more](https://cloudinary.com/blog/progressive_jpegs_and_green_martians) + + [Photoshop guide](https://helpx.adobe.com/photoshop-elements/using/optimizing-images-jpeg-format.html) +* Think about serving images and other static assets from some CDN. + [Read more.](https://www.smashingmagazine.com/2017/04/content-delivery-network-optimize-images/) + +## Lazy load off-screen images and other components + +Another way of dealing with images is to lazy load those images that are not visible inside an +initially rendered part of the screen. Lazy loading these off-screen images can be done with helper +function: `lazyLoadWithDimensions` (from `util/contextHelpers/`). Check `SectionLocations` component +for details. + +## Use sparse fields + +Another way to reduce the amount of data that is fetched from API is sparse fields. This is a +relatively new feature and Flex template app has not yet leveraged it fully, but it is created to +reduce unnecessary data and speed up rendering. You can read more from +[Flex API docs](https://flex-docs.sharetribe.com/#sparse-attributes).