Instart Logic

Presentations

Web Performance: Perception & Metrics Estelle Weyl and Parvez Ahammad SFHTML5, SF, CA, June 23, 2017

No one likes slow loading webpages, but what aspects of page loading contribute to user perception of “speed” and how can we measure it?

Since people primarily consume the web visually, the visual perception of the webpage loading process should be of primary importance. Traditional web performance metrics defined in W3C standards are objective metrics, focusing on timing each process along the content delivery pipeline, such as Time to First Byte (TTFB) and Page Load Time. What metrics are most correlated with how human end-users perceive the webpage loading process: the above-the-fold rendering in particular? We’ll discuss how we can try to objectively measure something as subjective as the notion of “feels fast”.

Topics include:

Performance Overview
Progressive WebApps & Lighthouse
Visual Metrics: SI & PSI
SpeedPerception Study

Making money in an ecosystem of ad blockers, Peter Blum Fluent, June 22, 2017

Publishers that monetize via advertising are faced with a crisis: the rapid adoption of ad blocking is impacting earnings. Peter Blum explains where advertisers went wrong, how users responded (with ad blockers), the impact of ad blockers on publishers, and publisher responses—including subscriptions, soft and hard messaging, and even unblocking ads—with case studies for each approach.

CSS! WTF?, Estelle Weyl Fluent, June 22, 2017

If you think outside the box, you can solve almost anything with CSS. Join Estelle Weyl to learn the power of CSS, as she covers several CSS WTFs. Depending on your perspective, that can mean “wonderfully terrific feature” or, very often, “what the @#$%!.” Once you realize the power of CSS, you’ll want to jump back into it (instead of relying on frameworks that were necessary when few knew how to support IE6-8).

Simplifying Markup to Improve User Experience Elevate Conference, Las Vegas, NV. April 13, 2017. 40m By Estelle Weyl

Mobile Web Performance Istanbul Tech Talks, Istanbul, Turkey. April 3, 2017. 50m By Estelle Weyl

Some of your users are on mobile browsers that may be more advanced than the desktop browsers of other users, but chances are those phones with their advanced browsers may have similar memory and bandwidth constraints to the computer you recycled 5 years ago.

While as developers we’re finally enjoying the ubiquity of modern browsers accessing the web, it’s the devices themselves that are now creating constraints we always need to consider. The issue with mobile isn’t Old IE, but rather battery life, latency, memory and UI responsiveness. In this session we'll discuss best practices to make sure your site performs well, no matter how your user is accessing your content.

Speed Perception: understanding and measuring perceived performance ForwardJS, San Francisco, CA. March 1, 2017, 40m by Estelle Weyl and Parvez Ahammad

Clearly, no one likes slow loading webpages, but what aspects of page loading contribute to human end-user perception of “speed”? “SpeedPerception” is an open-source experimental framework and a study that we developed to understand what “slow” and “fast” mean to the human end-user.

Traditional web performance metrics defined in W3C standards focus on timing each process along the content delivery pipeline, such as Time to First Byte (TTFB) and Page Load Time. We wanted to tackle the web performance measurement challenge by looking at it from a different angle: one which puts user experience into focus. Since people primarily consume the web visually, we focused on the visual perception of the webpage loading process. SpeedPerception is a systematic study of how human end-users perceive the webpage loading process: the above-the-fold rendering in particular: objectively measuring the subjective notion of “feels fast”.

Studies have shown that instead of only focusing on page load time, if we shift the focus to address perceived performance directly, we can make our web applications feel even faster even if we have to download the same number of bytes. What metrics do we need to measure to objectively test if a site load feels fast? We’re looking into the impact of blanks screens, long DOMContentLoaded events, pop ups, passive versus active wait times, jitter, and other factors have on perceived performance, and how to measure the improvements in these features. We looked at browser metrics like time to first byte, render start, visual completion, etc., to construct a fusion model that can give the most insight into subjective judgments of “Speed Perception”.

You don’t need a framework for that ColdFrontConf, Copenhagen, Denmark. September 1, 2016, 45m by Estelle Weyl

While the latest and greatest JS or CSS features can make development fast and fun, they can also lead to poor performing, inaccessible bloat that's impossible for the next developer, even one who is familiar with the frameworks used, to decipher. Development doesn't have to be so complicated.

While it's important to keep up to date on new tools and trends, it's even more important to remember where we came from and code inclusively. To move forward you have to look back. Do you really need a framework or can the standards handle your modern challenge while ensuring accessibility. With a little semantic creativity, vanilla code is the best tool in your tool box.

Accessibility as Performance Velocity, Santa Clara, CA. June 22, 2016, 40m Simply Accessible CSS Budapest, Hungary. May 11, 2016, 30m Simple, Accessible Web Performance WebDevCon, Seattle, WA. April 21, 2016, 40m by Estelle Weyl

By developing with web standards, you can create accessible, performant web sites. Semantic markup helps ensure accessibility while reducing the need for frameworks. Write semantic HTML and leverage CSS Selectors and the cascade, to reduce your CSS and JS by up to 95% and obliterate your queue of accessibility bugs.

RWD is not a Panacea Mobile: Make it Fast, San Francisco. June 14, 2016, 30m

RWD is not a Panacea Fronteers, Amsterdam. April 1, 2016, 20m

RWD is not a Panacea RWD Summit, Online. March 28, 2015, 60m by Estelle Weyl

Responsive Web Design (RWD) is the solution for putting our apps on mobile devices. Or is it? Bloated web applications that simply shrink in width are not usable. Squishy design is not the only, or even the main, solution for improved mobile web user experience. Other than responsive design, how can we improve performance so our mobile web applications, responsive or not, are usable and accessible no matter how a user chooses to access it.

Straightforward accessibility OSCON, Austin, TX. May 15, 2016, 180m (3 hour tutorial) by Estelle Weyl

You already know that accessibility is important. In fact, it’s the law. It’s also a good idea. Let’s make the Web accessible—and faster—for everyone.

We'll skill the “why” and focuses on the “how.” Marking up accessible, performant websites can be as simple as using the right semantic elements in your HTML. Semantic HTML can prevent bugs, improve performance, reduce code bloat, and make your site accessible to screen readers and keyboard users.

Explore accessibility features native to semantic elements and demonstrates how to add additional accessibility with a sprinkling of ARIA roles and attributes. Estelle also covers making accessible form controls, input masking, attractive selects, and creating a fully accessible carousel that functions perfectly with just a few lines of JavaScript—and no frameworks.