Loading Performanceとの向き合い方 / InsideFrontend 2019

Loading Performanceとの向き合い方 / InsideFrontend 2019

96030bc60c6fc8a91f25ccda9b413b24?s=128

Sho Miyamoto

May 18, 2019
Tweet

Transcript

  1. 2.

    - ٶຊ ক (Sho Miyamoto) - @shqld (Github, Twitter) -

    ೔ຊܦࡁ৽ฉࣾ ৽ଔ2೥໨ - ࠷ۙ͸։ൃϝΠϯ - r.nikkei.com ͷϑϩϯτɺBFFɺCDN - Իָ - τϥϯϖοτ(JazzFunkܥʣɺϐΞϊ - ౦ೆΞδΞʹॅΈ͍ͨ ͩΕʁ
 Who am I
  2. 4.

    Google IO 2019 Credit: @sisidovski (twitter) Speed at Scale: Web

    Performance Tips and Tricks from the Trenches (Google I/O ’19)
  3. 14.

    - Good FMP - ཉ͍͠ίϯςϯπ͸͙͢ʹݟ͑ΔΑ͏ʹͳΔ - Bad TTI - ϘλϯΛԡͯ͠΋൓Ԡ͕ͳ͍

    - ϓϩάϨεόʔ͕ফ͑ͳ͍ ೔ܦిࢠ൛ͷύϑΥʔϚϯε Ͳ͏ͳΔͷ͔ How it affects
  4. 31.

    const bundledScripts = [] const script = await fetch(AD_ENTRY_URL) const

    nextScriptURL = script.match(NEXT_URL_REGEX) bundledScripts.push( script.replace( 'createElement("script")', 'createElement("div")' ) ) const nextScript = fetch(nextScriptURL) // … minify(bundledScripts.join('')) Build ޿ࠂεΫϦϓτͷ࠷దԽ
  5. 35.

    Off The Main Thread - UIͷදࣔʹؔ͢Δ΋ͷҎ֎͸WebWorkerͰ - ޿ࠂͷϦΫΤετ΍ύʔεΛWorkerͷεϨουͰॲ ཧ͍ͨ͠ -

    ޿ࠂεΫϦϓτ͕ݺͿϦΫΤετΛ෼ੳͯ͠ɺ WorkerଆͰϦΫΤετΛ૊ΈཱͯΔॲཧΛॻ͘ ޿ࠂεΫϦϓτͷ࠷దԽ
  6. 36.

    import * as Comlink from ‘comlink’ // worker.js const request

    = () => { const url = new URL('AD_SERVER_ENDPOINT') url.searchParams = { /*...*/ } return fetch(
 url.toString(),
 { headers: { /*...*/ } }
 ).then((res) => res.json()) } Comlink.expose(request) // main.js const request = Comlink.wrap(
 new Worker(paths.controllerWorker) ) // ...
 if (useWorker) { request(sectionId).then(renderAd) } Off The Main Thread ޿ࠂεΫϦϓτͷ࠷దԽ
  7. 41.
  8. 42.

    Optimized
 Ad Handler Ad Ad Ad Deoptimize Default
 Ad Handler

    ࣦഊ࣌ͷϑΥʔϧόοΫ
 Fallback on failure ୤࠷దԽ
  9. 56.

    ϑϩϯτΤϯυઃܭͷ࡮৽ WebComponents/ CustomElements export const Card = (props) => (

    <div class=“card"> <p>{props.title}</p> <nikkei-time>
 {props.publishedAt}
 </nikkei-time> <nikkei-picture>
 {props.thumbnail}
 </nikkei-picture> </div> )