Thanks

#Jfokus

#Jfokus | #DeveloperCommunity

@saltnburnem

I ❤️ #DeveloperCommunity

#Jfokus | #DeveloperCommunity

@saltnburnem

Add alt text to ANY pics that are used on social media!

#Jfokus | #DeveloperCommunity

@saltnburnem

Chris DeMars

@saltnburnem

Senior Developer Advocate

@chrisdemars.net

🦋

#Jfokus | #DeveloperCommunity

@saltnburnem

Shownotes

#Jfokus | #DeveloperCommunity

@saltnburnem

More about me!

  • International Speaker
  • Love Spooky Stuff
  • Love Tattoos
  • Competitive Paintball Player
  • Competitive Bass Angler
  • From Detroit - 313 BABY!

#Jfokus | #DeveloperCommunity

@saltnburnem

#Jfokus | #DeveloperCommunity

@saltnburnem

HOW SWEDE IT IS!

#Jfokus | #DeveloperCommunity

@saltnburnem

Detroit loves you!

Run to the Light Carol Anne

Auditing with Lighthouse

What is an audit?

#Jfokus | #DeveloperCommunity

@saltnburnem

A website audit is an examination of page performance prior to large-scale search engine optimization (SEO) or a website redesign.

- https://blog.hubspot.com/marketing/website-audit

#Jfokus | #DeveloperCommunity

@saltnburnem

What can we audit?

#Jfokus | #DeveloperCommunity

@saltnburnem

What can we audit?

  • Site performance - #PerfMatters
  • Compliance
  • Security
  • Accessibility
  • SEO (Search Engine Optimization)

#Jfokus | #DeveloperCommunity

@saltnburnem

Why do we audit?

#Jfokus | #DeveloperCommunity

@saltnburnem

Why do we audit?

  • Site performance - #PerfMatters
  • Compliance
  • Security
  • Accessibility
  • SEO (Search Engine Optimization)

#Jfokus | #DeveloperCommunity

@saltnburnem

Performance

#Jfokus | #DeveloperCommunity

@saltnburnem

Performance Resource to Pair with Lighthouse

https://www.webpagetest.org/

#Jfokus | #DeveloperCommunity

@saltnburnem

SEO

#Jfokus | #DeveloperCommunity

@saltnburnem

Keywords, Structure, Description, Google Analytics, etc.

A Simple (But Effective) 31-Point SEO Checklist

#Jfokus | #DeveloperCommunity

@saltnburnem

Best Practices

#Jfokus | #DeveloperCommunity

@saltnburnem

Proper doctype, no console errors, etc.

#Jfokus | #DeveloperCommunity

@saltnburnem

Proper doctype, no console errors, etc.

<!DOCTYPE html>
979045512?random=171…ent%3Dgtag.config:1 Uncaught (in promise) DOMException:

#Jfokus | #DeveloperCommunity

@saltnburnem

Security & HTTPS

<div class="...">
  <a href="..." target="_blank" rel="noopener noreferrer nofollow"></a>
</div>

#Jfokus | #DeveloperCommunity

@saltnburnem

Accessibility

#Jfokus | #DeveloperCommunity

@saltnburnem

Semantic markup and ARIA

<header>
  <!--- Some code goes here --->
</header>
<main>
  <section>
    <!--- Some code goes here --->
  </section>
  <section>
    <!--- Some code goes here --->
  </section>
  <section>
    <!--- Some code goes here --->
  </section>
</main>
<footer>
  <section>
    <ul>
      <li>
        <a href="#" aria-label="Facebook">
          <i class="fab fa-3x fa-facebook-f"></i>
        </a>
      </li>
      <li>
        <a href="#" aria-label="Instagram">
          <i class="fab fa-3x fa-instagram-f"></i>
        </a>
      </li>
      <li>
        <a href="#" aria-label="Twitter">
          <i class="fab fa-3x fa-twitter-f"></i>
        </a>
      </li>
    </ul>
  </section>
</footer>

#Jfokus | #DeveloperCommunity

@saltnburnem

first rule of aria?

#Jfokus | #DeveloperCommunity

@saltnburnem

Aria

#Jfokus | #DeveloperCommunity

@saltnburnem

Aria

🚫

#Jfokus | #DeveloperCommunity

@saltnburnem

How do we audit?

#Jfokus | #DeveloperCommunity

@saltnburnem

#Jfokus | #DeveloperCommunity

@saltnburnem

ALWAYS AUDIT

in incognito!

#Jfokus | #DeveloperCommunity

@saltnburnem

OFF WE GO TO CHROME!

#Jfokus | #DeveloperCommunity

@saltnburnem

OR

the terminal

#Jfokus | #DeveloperCommunity

@saltnburnem

npm install -g lighthouse

#Jfokus | #DeveloperCommunity

@saltnburnem

npm install -g lighthouse
lighthouse https://www.fright-rags.com/ -view

#Jfokus | #DeveloperCommunity

@saltnburnem

Problems

#Jfokus | #DeveloperCommunity

@saltnburnem

fright-rags.com

#Jfokus | #DeveloperCommunity

@saltnburnem

perf

#Jfokus | #DeveloperCommunity

@saltnburnem

First Contentful Paint (FCP)

#Jfokus | #DeveloperCommunity

@saltnburnem

First Contentful Paint (FCP)

First Contentful Paint (FCP) measures the time from when the user first navigated to the page to when any part of the page's content is rendered on the screen.

- web.dev

#Jfokus | #DeveloperCommunity

@saltnburnem

First Contentful Paint (FCP)

First Contentful Paint (FCP) measures the time from when the user first navigated to the page to when any part of the page's content is rendered on the screen.

"content" refers to text, images (including background images), <svg> elements, or non-white <canvas> elements.

- web.dev

#Jfokus | #DeveloperCommunity

@saltnburnem

Largest Contentful Paint (LCP)

#Jfokus | #DeveloperCommunity

@saltnburnem

Largest Contentful Paint (LCP)

LCP reports the render time of the largest image, text block, or video visible in the viewport, relative to when the user first navigated to the page.

- web.dev

#Jfokus | #DeveloperCommunity

@saltnburnem

Speed Index

#Jfokus | #DeveloperCommunity

@saltnburnem

Speed index

Speed Index measures how quickly content is visually displayed during page load.

- web.dev

#Jfokus | #DeveloperCommunity

@saltnburnem

FCP (first contentful paint)

LCP (Largest Contentful Paint)

Speed Index

0–3.4s

0–2.5s

0–1.8s

#Jfokus | #DeveloperCommunity

@saltnburnem

a11y

#Jfokus | #DeveloperCommunity

@saltnburnem

best

practices

#Jfokus | #DeveloperCommunity

@saltnburnem

seo

#Jfokus | #DeveloperCommunity

@saltnburnem

Solutions

#Jfokus | #DeveloperCommunity

@saltnburnem

Performance

Solutions

#Jfokus | #DeveloperCommunity

@saltnburnem

performance Solutions

  • Reduce unused CSS
  • Reduce unused JS
  • Eliminate render-blocking resources

#Jfokus | #DeveloperCommunity

@saltnburnem

a11y Solutions

#Jfokus | #DeveloperCommunity

@saltnburnem

a11y Solutions

#Jfokus | #DeveloperCommunity

@saltnburnem

a11y Solutions

@saltnburnem

#Jfokus | #DeveloperCommunity

@saltnburnem

Accessibility Solutions

  • Use ARIA roles responsibly
  • Fix the color contrast
  • Make sure to list semantic elements properly

#Jfokus | #DeveloperCommunity

@saltnburnem

best practices
Solutions

#Jfokus | #DeveloperCommunity

@saltnburnem

Best Practice Solutions

  • Use up-to-date API's
  • Make sure there are NO console errors or logs
  • Ensure an effective CSP is in place

#Jfokus | #DeveloperCommunity

@saltnburnem

SEO Solutions

We are good!

#Jfokus | #DeveloperCommunity

@saltnburnem

BUT...if we HAD issues!

  • Make sure there is a <meta name="viewport"> tag
  • Links should have discernible text
  • The heading level hierachy should make sense

#Jfokus | #DeveloperCommunity

@saltnburnem

What did we learn?

  • What a web audit is?
  • How to run an audit in Lighthouse
  • Identifying problems
  • Creating solutions

#Jfokus | #DeveloperCommunity

@saltnburnem

Thanks

Chris DeMars | @saltnburnem

#Jfokus | #DeveloperCommunity

@saltnburnem

Shownotes

#Jfokus | #DeveloperCommunity

@saltnburnem

Jfokus - Run to the Light Carol Anne

By Chris DeMars

Jfokus - Run to the Light Carol Anne

  • 2

More from Chris DeMars

  • HalfStack Phoenix (45) - Close Encounters of the Data Kind
    Chris DeMars
    6
  • Black Hat EU (25) - The node_modules Iceberg: Mysteries Below the Waterline
    Chris DeMars
    43