🧠DUMP

Workshop / Tools

Google Chrome: Create a new Profile

A clean profile without any plugins will help you analyze the sites performance even better.

Cmd/Ctrl + Shift + P will quickly find settings and features

Shift is in general the magic-key in Chrome's Dev Tools. Network Panel -> Shift over requests shows you parents/childs

Network Panel

  • Full View

  • Disable Cache

  • Priority Column

Size: If size (top value, dark) smaller than gray? ==> Compressed If size (top value, dark) is bigger than gray? ==> Headers will be removed

Enabling Experiments

  1. chrome://flags

  2. Enable "Developer Tools experiments"

  3. Restart Chrome

  4. Open DevTools’ Settings pane (F1)

  5. Head into the new Experiments pane

  6. Hit Shift six times

Request Blocking

“I wonder how fast the page is without this ad provider?”

Filtering (Network Panel -> Search)

larger-than:
status-code:
priority:
has-response-header:
domain:

Simply put a - (minus) in front of it

Local Overwrites

  1. Create a folder on your machine called local-overrides

  2. Sources » Overrides » Select folder for overrides

  3. Navigate to folder from step 1

  4. Allow access

Ctrl/Cmd+Shift+P » Changes will bring up a diff of your changes

Webpagetest

  1. Create a account

    1. No rate-limiting

    2. IP address gets whitelisted

    3. Access to more features

  2. Setting Up Your Test

    1. Head to webpagetest.org

    2. Pick the exact URL you’d like to test

    3. Choose a location, connection speed, browser, etc.

    4. Capture video for first and repeat views

    5. Choose 5 runs

    6. Chrome » Capture Dev Tools Timeline

    7. Go!

http://webpagetest.org/result/190716_XZ_9f581b78318523209f1a1523aecec8b0/webpagetest.org
LogoWebPageTest/www/index.php at master · catchpoint/WebPageTestGitHub
Cheatsheet
https://www.webworldwide.io/www.webworldwide.io

Network Link Conditioner

  1. Download https://csswizardry.net/Additional_Tools_for_Xcode_8.2.dmg

  2. Open package and go into Hardware directory

  3. Locate Network Link Conditioner.prefPane

  4. Double-click and follow instructions

Workshop / TODO's

Order of <head>

Loading resource in the correct order is critical for building a fast website; do we have any bottlenecks or inefficiencies? The optimum <head> order -- provides there are not interdependenceis -- goes like so:

<meta charset />
<meta name="viewport" />
<title>
<script> // Inline JS </script>
<link rel="stylesheet" />
<style>/* Inline CSS */</style>
<script src=""></script>
<!-- Everything else (icons, Open Graph, etc.) -->

Use DevTool's Source panel to test locally.

Resource Hints

LogoHTML Standardcsswz.it

  • csswz.it/dns-prefetch

    • Resolve the IP address for a given domain ahead of time

    • When you know the domain but not the url

  • csswz.it/preconnect

    • Resolve the IP address and open a TCP/TLS connection for a given domain a head of time

    • When you know the domain but not the url

    • Preconnect with dns-prefetch fallback breaks in safari

    • Firefox 66: preconnect no longer working

  • csswz.it/prefetch

    • A file needed for subsequent navigation

    • Download the file and drop it into HTTP cache for later usage

    • Except: those with "no-store Cache-Control" haeder.

    • Fetched wiht lowest possible priority

  • csswz.it/preload

    • A mandatory fetch for a file needed for the current navigation

    • A way to surface late-discovered resources

    • The as attribute (font, image, script, style) => Changed order an priority

  • Deploy as HTTP Headers (rel=preconnect)

Read more here: https://speakerdeck.com/csswizardry/more-than-you-ever-wanted-to-know-about-resource-hints?slide=11

https://csswizardry.com/2019/03/cache-control-for-civilians/

Replace Target _blank

<a href="http://example.com" target="_blank" rel="noopener">
   Example site
</a>
LogoThe performance benefits of rel=noopenerjaffathecake

CSSCamp / TODO's

JSCamp / TODO's

PreviousREADMENextCamp Links

Last updated

Was this helpful?