(client says)
Your web app works slowly.

 

Ola Kunysz
Wrocław JUG 04.06.2018

Now what?

Ola Kunysz

  • software engineering since 2007
  • JVM programming since 2013
  • e-commerce in Scala, C# and JS since 2016
  • (Geek Girls) Carrots, Code Carrots 2014/2015

@OlaQnysz

        PeggyBrown

Your awesome app

  • clean code

  • it's SOLID

  • modern SPA

  • hipster frameworks '18

  • it's beautiful

Honestly?

if every screen loads 4 s

... or it just "feels" slow

Performance is subjective

... but you can still measure most of it

Where to start?

Page speed

Insights

Page speed

Insights

Developer Tools in browser(s)

Time To First Byte vs Download

Developer Tools - performance

Monitoring

Load and performance testing

Monitoring

val productsScenario = scenario("Products")

  .exec(

    http("products")

      .post("/")

      .param("name", "Vita skor")

      .param("price", "100")

      .check(status.is(200)))

  .repeat(10) {

    .exec(

      http("products")

       .get("/")

       .check(status.is(200)))

}

Monitoring

 at least simple stress tests from time to time

$ ./getSomeStress.sh

3.736713

2.478001

2.350695

2.422105

2.327605 ...

for i in `seq 1 10`;

  do curl -XGET -s -o /dev/null -w "%{time_total}" "http://localhost:9000/products"; echo; done;

JConsole (for JVM)

What to tune up on the front?

Store as much as possible on CDN (Content Delivery Network)

 

Cache

  • data centres across countries
  • delivering locally

CDN

https://stackshare.io/stackups/amazon-cloudfront-vs-cloudflare-vs-fastly

Let someone serve you images and videos

Cache

  • responsive and scaled images
  • storage
  • real time manipulation

CSS and JS

minified

 | nonblocking

| concatenated

 | compressed

Problem?

Where is the load?

Webpack Bundle Analyzer

https://www.npmjs.com/package/webpack-bundle-analyzer

  • installed with npm or yarn
  • generates json file
  • runs interactive tree map on localhost 
  • visualises the contents of your bundles

Dynamic imports

import modules on-demand (or conditionally)

  • preload: resource might be needed during the current navigation
  • prefetch: resource is probably needed for some navigation in the future

Content placeholding

Optimistic updates

(where it makes sense)

What to tune up on the backend?

REST

/products?skip=0&take=20

use paging

/products?skip=0&take=1000

6000 ms

200 ms

Fast 3G

???

700 ms

BUT don't use paging on frontend, please

(only lazy loading)

REST

send only necessary information

~3 KB

~10KB for 20 products

REST

  • consider excluding expensive data to additional endpoints
  • consider gzip-encoded responses
  • consider caching
Last-Modified: Mon, 04 Jun 2018 15:29:14 GMT -> 
If-Modified-Since: Mon, 04 Jun 2018 15:29:14 GMT (in GET)
If-None-Match: "88d979a0b78942b5bda24ace4214516a" (in GET) -> 
304 Not Modified
Content-Length: 0

Performance Advisor for Mongo DB

Database

Indexes for expensive and/or common requests

Database

Duplicated data 

  • when you have mostly GET requests
  • when you have resources that are used everywhere
  • when performance is more important, that consistency

Here's the plan:

  1. Observe and measure

  2. Find bottlenecks

  3. Fix a little bit

  4. Repeat

 

Thanks!

@OlaQnysz

        PeggyBrown

  • https://www.bloomberg.com/company/announcements/bloomberg-women-in-technology-bwit-taking-gender-out-of-coding/
  • https://imgur.com/gallery/CakjE
  • https://tenor.com/view/draw-spinner-fidget-spinners-gif-8647480
  • https://devrant.com/search?term=frontend
  • https://steemit.com/steem/@zombee/dmania-v0-6-better-performance-and-improved-user-onboarding
  • https://devrant.com/rants/1233263/front-end-vs-back-end
  • https://forums.gtracer.net/threads/bad-car-tuning.2778/
  • https://en.wikipedia.org/wiki/Cloudinary
  • http://gatling.io
  • https://github.com/jamiebuilds/react-loadable
  • https://mage2.pro/t/topic/912
  • https://www.tipser.com
  • https://developers.google.com/drive/api/v3/performance
  • https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching
  • http://www.apiacademy.co/how-to-http-caching-for-restful-hypermedia-apis/
  • https://www.mongodb.com/blog/post/improving-mongodb-performance-with-automatically-generated-index-suggestions
  • https://medium.com/front-end-hacking/webpack-and-dynamic-imports-doing-it-right-72549ff49234
  • http://laurent.bristiel.com/getting-started-with-gatling-for-stress-test/
  • https://webpack.js.org/guides/code-splitting/#prefetching-preloading-modules

More info

Images

Made with Slides.com