![[Valid RSS]](images/valid-rss-rogers.png "Valid RSS")
This is a valid RSS feed.
This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.
... rel="self" type="application/rss+xml" />
^
line 47, column 0: (7 occurrences) [help]
<iframe width="560" height="315" src="https://www.youtube.com/embed/1Ttx174a ...
<p><script src="/run_prettify.js" async="" defer="defer"></script></p>
line 109, column 3: (2 occurrences) [help]
]]></content:encoded>
^
<p><a href="http://www.trutv.com/" target="_blank"><img class="wp-image-1390 ...
<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" > <channel> <title>Binary Orders of Magnitude</title> <atom:link href="https://www.sergeychernyshev.com/blog/feed/?feedburner" rel="self" type="application/rss+xml" /> <link>https://www.sergeychernyshev.com/blog</link> <description>Sergey's blog about projects and web in general.</description> <lastBuildDate>Fri, 13 Dec 2019 19:28:14 +0000</lastBuildDate> <language>en-US</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>https://wordpress.org/?v=4.5-beta2-36856</generator> <item> <title>Visualizing Speed Without Real Data</title> <link>https://www.sergeychernyshev.com/blog/visualizing-speed-without-real-data/</link> <pubDate>Fri, 13 Dec 2019 19:28:14 +0000</pubDate> <dc:creator><![CDATA[Sergey Chernyshev]]></dc:creator> <category><![CDATA[Misc]]></category> <category><![CDATA[Web Performance]]></category> <guid isPermaLink="false">https://www.sergeychernyshev.com/blog/?p=1578</guid> <description><![CDATA[CROSSPOST: This article was originally posted as part of PerfPlanet Calendar on December 12th, 2019 Many of us are facing the challenge of promoting the idea of speed of user experience within our organizations and crave any support data to help “sell” it to business stakeholders, product managers and engineers. Real User Measurement (RUM) is a great … <a href="https://www.sergeychernyshev.com/blog/visualizing-speed-without-real-data/" class="more-link">Continue reading <span class="screen-reader-text">Visualizing Speed Without Real Data</span></a>]]></description> <content:encoded><![CDATA[<blockquote><p>CROSSPOST: This article was originally posted as part of <a href="https://calendar.perfplanet.com/2019/visualizing-speed-without-real-data/">PerfPlanet Calendar</a> on December 12th, 2019</p></blockquote><p>Many of us are facing the challenge of promoting the idea of speed of user experience within our organizations and crave any support data to help “sell” it to business stakeholders, product managers and engineers.</p><p>Real User Measurement (RUM) is a great tool to capture speed from actual users in the wild, measure their engagement and with one swift gesture point at an A/B test comparing speeds of two versions of the app or even use awesome “what-if” diagram to predict the impact the planned improvement.</p><p>Unfortunately, sometimes we just didn’t fund the purchase of a RUM tool, did not integrate it or simply don’t have A/B test set up and did not roll out new code to any of our user yet. This leaves us without data and therefore without a powerful convincer and visualization tool.</p><p>I was struggling with some of these problems on multiple occasions and at one point I realized that many conversations do not require actual user data.</p><ul><li>some of these conversations were just about training team members who needed better grasp in statistics of web speed, distributions, percentiles and effect variability plays</li><li>some of them needed showing the reasoning behind prioritization of speed and visualization of known industry trends like conversion rate decay or increase in bounce rate as experiences slow down</li><li>and some other conversations were about supporting the very purchase of a RUM solution so business decisions could be made with real data</li></ul><p>One day in early spring, frustration of luck of data overpowered lazy opensourcerer’s brain and I spend couple weekends coding up a visualization tool that lets you <del>pretend you have the data</del> simulate data and visualize it to drive your point across.</p><p>The tool is called “<a href="https://ux-speed-calculator.netlify.com/">UX Speed Calculator”</a> and you can use it at <a href="https://ux-speed-calculator.netlify.com/">https://ux-speed-calculator.netlify.com/</a> and <a href="https://github.com/sergeychernyshev/ux-speed-calculator">contribute to it on Github</a> – it is open source and you can help add bells and whistles to satisfy your inner data geek.</p><p>UX Speed Calculator does a few useful things:</p><ul><li>it calculates a log-normal distribution based on base speed and variability so you can simulate your page’s distribution and show how it is different from a normal, “bell curve” distribution people media truly assume<br /><iframe width="560" height="315" src="https://www.youtube.com/embed/1Ttx174asZw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></li><li>shows median, 90 and 95 percentiles so you can try and match your existing stats or simply educate engineers on what those numbers are</li><li>calculates bounce rate distribution and let’s you adjust the slope of degradation to your hearts desire to help explain to marketing teams the impact of speed on their marketing campaigns<br /><iframe width="560" height="315" src="https://www.youtube.com/embed/AegaiTplmdI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></li><li>calculates exponential decaying conversion rate distribution and helps you explain conversion poverty line and why running experiment by slowing down pages is not necessarily predictive of how much savings you’ll get by speeding them up the same amount<br /><iframe width="560" height="315" src="https://www.youtube.com/embed/AryqxZLXXFs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></li><li>it also tries to shine light on the phenomenon on of low conversion / high bounce rates on the very left of the chart (near the zero) where despite the logic of “faster means more business” we often see unexplainable data. Many RUM experts believe it is due to the low numbers which do not produce statistically significant results, but my work with UX metrics and general lack of understanding of statistics always made it hard for me to accept that as the whole story so I postulate that is is caused by a high percentage of errors in that part of the chart and experiences that are measured as “fast” were actually incomplete, functionally broken experiences or outright error pages. So in the tool you can adjust decaying failure rate distribution. Charts also show theoretical bounce and conversion rate distributions as dotted lines and distributions that reflect error rates as solid lines</li><li>based on a combination of failure rates, bounce rates and conversion rates, charts also show color-coded bars for each of the populations to make it sleazier time relate to each pixel as a user who had different experience and help consumers of this visualization empathize with the data.</li><li>if so many lines and labels confuse you and your stakeholders, feel free to click on the legends on the right to hide those that do not matter for your story</li><li>and if you need to share a chart, just copy a URL and send it over, it updates as you tweak the knobs and dials so you can always jump to the right chart and don’t need to re-create perfection from scratch</li><li>ohh yes, it also shows you the $$$ all these conversions amount to so those of your peers who don’t like math or can’t bear the cognitive load of charts can still translate the value of speed to something tangible. Substitute $ for €, £, ¥ or even ₽ if that works better for you.</li></ul><p>Hope this tool will help you with your creative story telling and you’ll be able to push the limits even further.</p><p>Happy <a href="https://twitter.com/search?q=%23webperf">#webperf</a>-orming!</p><p>And remember, there are lies, damn lies and statistics! So don’t overuse this or other scientific data tools in your battles for the better within the fuzzy world of user experience!</p>]]></content:encoded> </item> <item> <title>Speed Patterns</title> <link>https://www.sergeychernyshev.com/blog/speed-patterns/</link> <pubDate>Mon, 21 May 2018 21:06:41 +0000</pubDate> <dc:creator><![CDATA[Sergey Chernyshev]]></dc:creator> <category><![CDATA[Web Performance]]></category> <guid isPermaLink="false">https://www.sergeychernyshev.com/blog/?p=1572</guid> <description><![CDATA[CROSSPOST: This article was originally posted as part of PerfPlanet Calendar 2017 on December 6th, 2017 Speed is a major contributor to user experience on modern web sites. It is important to pay attention not only to technologies that said experiences are build with, but to the way they are designed as well. Proper speed … <a href="https://www.sergeychernyshev.com/blog/speed-patterns/" class="more-link">Continue reading <span class="screen-reader-text">Speed Patterns</span></a>]]></description> <content:encoded><![CDATA[<blockquote><p>CROSSPOST: This article was originally posted as part of <a href="https://calendar.perfplanet.com/2017/speed-patterns/">PerfPlanet Calendar 2017</a> on December 6th, 2017</p></blockquote><p>Speed is a major contributor to user experience on modern web sites.</p><p>It is important to pay attention not only to technologies that said experiences are build with, but to the way they are designed as well.</p><p>Proper speed design is a collaboration between product managers, UI designers and developers as all the aspects of the page composition must be balanced to achieve fast experience that is useful for end-users and deliver on the goals set by creators of the site.</p><p>Start bringing speed into the process early on, when design is just being born. I hope to help with this task by documenting a series of patterns that are commonly seen in fast web sites!</p><hr /><p><a href="https://www.speedpatterns.com/"><img style="float: left; width: 5em; margin: 1em;" src="https://www.speedpatterns.com/assets/no_spinners.svg" alt="No Spinners" /></a> Introducing a new project to collect speed patterns: <a href="https://www.speedpatterns.com/">https://www.speedpatterns.com/</a></p><p>Below are a first two patterns: “<a href="#faststart">Fast Start</a>” and “<a href="#immutablelayout">Immutable Layout</a>“, I hope you enjoy the format and will <a href="https://github.com/Speed-Patterns/speed-patterns/blob/master/CONTRIBUTING.md">help by contributing</a> to the <a href="https://github.com/Speed-Patterns/speed-patterns">project on GitHub</a>.</p><hr /><p><a name="faststart"></a></p><h2>Fast Start</h2><p>Before user can start the experience, there is an inevitable delay as user’s browser goes away from previous view to the current view.</p><p>This delay manifests itself in waiting for first piece of the UI to be painted on the screen. Usually user waits for page to show while looking at the previous page, e.g. search engine results page or another page where they performed an action that led him to the page in question.</p><p>On this filmstrip, previous page is shown as white:</p><p><img src="https://www.speedpatterns.com/assets/slow_paint_filmstrip.png" alt="Slow first paint filmstrip" /></p><p>The usual cause for such delays are either a bottleneck of a first request for HTML page:</p><p><img src="https://www.speedpatterns.com/assets/slow_first_request.png" alt="Slow first request" /></p><p>Alternatively, delay can be caused by various render-blocking assets loaded on the page, like CSS stylesheets, fonts or pure rendering delays due to time-consuming layout and painting or JavaScript compilation and execution that compete for same CPU resources:</p><p><img src="https://www.speedpatterns.com/assets/slow_first_paint.png" alt="Delayed first paint" /></p><h3>Solution</h3><p>Making it a requirement to start painting quickly is critical, especially as it competes with other technical and design goals of loading large amounts of code and displaying a large number of elements on the page.</p><p>Set timing SLAs during product and design discussions: <strong>50-200ms</strong></p><hr /><p><a name="immutablelayout"></a></p><h2>Immutable Layout</h2><p>A common problem on web sites that use ads or other 3rd party display elements (widgets), but also manifests in regular websites is change in layout as page loads.</p><p>This is particularly noticeable by users when they start scrolling down the page and element at the top of the page (e.g. ad banner or carousel image that finally loaded) suddenly changes it’s height pushing content down.</p><p><img src="https://www.speedpatterns.com/assets/pushy_ads.gif" alt="Pushy Ads" width="400" height="295" /></p><h3>Solution</h3><p>Instead of shifting the layout, always set the expected size of the available space.</p><p><img src="https://www.speedpatterns.com/assets/expected_ads.gif" alt="Expected ad" width="400" height="295" /></p><p>Use CSS to set height/width of the container when loading element into it and for images, simply specify width and height directly on a tag so layout engine doesn’t have to wait for image bytes to come back from the network to determine its pixel dimensions.</p><pre class="prettyprint"><img src="awesome_logo.png" alt="Awesome Logo!" width="400" height="300"></pre><hr /><p>I’d love to see <a href="https://github.com/Speed-Patterns/speed-patterns">this project</a> grow as a <a href="https://github.com/Speed-Patterns/speed-patterns/blob/master/CONTRIBUTING.md">community effort</a>, you can help by <a href="https://github.com/Speed-Patterns/speed-patterns/issues/new?body=...%20describe%20the%20pattern%2C%20include%20illustrations%20...%0D%0A%0D%0A%23%23%20WebPageTest%20report%20for%20pages%20following%20and%20not%20following%20the%20pattern%3A%0D%0A%2A%20Success%3A%20http%3A%2F%2Fwww.webpagetest.org%2Fresult%2F...%0D%0A%2A%20Failure%3A%20http%3A%2F%2Fwww.webpagetest.org%2Fresult%2F...%0D%0A%0D%0A%23%23%20Existing%20blog%20posts%2C%20articles%2C%20videos%0D%0A%2A%20%0D%0A%0D%0A%23%23%20Links%20to%20successful%20implementations%0D%0A%2A&title=New+Pattern%3A+...name+of+the+pattern...&labels=New+Pattern">submitting new patterns</a>, <a href="https://github.com/Speed-Patterns/speed-patterns/issues">reviewing drafts</a> and <a href="https://www.speedpatterns.com/">existing patterns</a> as well contributing illustrations, links and examples.</p><p><script src="/run_prettify.js" async="" defer="defer"></script></p>]]></content:encoded> </item> <item> <title>OpenSCAD Visual editor, Brett Victor style</title> <link>https://www.sergeychernyshev.com/blog/open-scad-visual-editor/</link> <pubDate>Tue, 10 Oct 2017 23:05:40 +0000</pubDate> <dc:creator><![CDATA[Sergey Chernyshev]]></dc:creator> <category><![CDATA[Concepts]]></category> <guid isPermaLink="false">https://www.sergeychernyshev.com/blog/?p=1551</guid> <description><![CDATA[I feel uncomfortable with traditional click-n-drag visual editors, whatever it is a pixel-based editing in Photoshop or 3D editing in Tinkercad. I’m spending time editing something, but comparing to development, result is very “fragile” and depends on exact sequence of pre-planned events and relies on precise drag-and-drop capabilities and heavy use of undo even with years of mouse handling … <a href="https://www.sergeychernyshev.com/blog/open-scad-visual-editor/" class="more-link">Continue reading <span class="screen-reader-text">OpenSCAD Visual editor, Brett Victor style</span></a>]]></description> <content:encoded><![CDATA[<p>I feel uncomfortable with traditional click-n-drag visual editors, whatever it is a pixel-based editing in Photoshop or 3D editing in <a href="https://www.tinkercad.com">Tinkercad</a>.</p><p><iframe width="660" height="371" src="https://www.youtube.com/embed/5WeMZ7Dl78E?feature=oembed" frameborder="0" allowfullscreen></iframe></p><p>I’m spending time editing something, but comparing to development, result is very “fragile” and depends on exact sequence of pre-planned events and relies on precise drag-and-drop capabilities and heavy use of undo even with years of mouse handling skills.</p><p>The gap is currently addressed by <a href="http://www.openscad.org/">OpenSCAD</a>, a language that allows you to generate 3D models so they can be parametrized and can power tools like <a href="https://www.thingiverse.com/customizer">Thingiverse Customizer</a> so you can make <a href="https://www.thingiverse.com/apps/customizer/run?thing_id=1672381">adjustable prosthetics</a> for kids who grow up (and dimensions need to adjust).</p><p><iframe width="660" height="495" src="https://www.youtube.com/embed/eq5ObNeiAUw?feature=oembed" frameborder="0" allowfullscreen></iframe></p><p>I feel that ultimate solution in this very creatively imaginative and visual space heavily mixed with scientific and precise engineering is in combining the two in <a href="http://worrydream.com/">Bret Victor</a>-esque way (here’s a video in which he talks about his approach and shows some game development tool prototypes which influenced or directly contributed to <a href="https://www.apple.com/swift/playgrounds/">Swift Playgrounds</a>, if I understand it correctly):</p><p><iframe width="660" height="371" src="https://www.youtube.com/embed/PUv66718DII?feature=oembed" frameborder="0" allowfullscreen></iframe></p><p>Imagine editing using visual editor on the right of the screen, adding and removing objects, moving them around, intersecting and so on like you would in Tinkercad, but on the left, seeing the code as it changes with every change you make.</p><p>For example, you drag the object and coordinates in the code change, or you press a button to combine one object with another and it starts a function and puts first object as first parameter, waiting for you to pick second object.</p><p>Needless to say, if you edit the code, visual editor would also update to reflect the changes. And if you point at a number in the code and drag up down, it updates the code and corresponding visual at the same time</p><p>This can be combined with timeline feature similar to the one Fusion 360 has:</p><p><iframe width="660" height="371" src="https://www.youtube.com/embed/NmC8p8ndqNo?feature=oembed" frameborder="0" allowfullscreen></iframe></p><p>but in our case as it works with code, it would not only roll-back/replay visual objects, but will also visually represent OpenSCAD commands highlighting corresponding part of the code when you click or hover over a step. It can also act as version control for the code too (imagine branching, merging and pull-request <a href="http://nvie.com/posts/a-successful-git-branching-model/">workflow</a> of git integrated with it).</p><p>Just though I’d share before it goes into non-being.</p>]]></content:encoded> </item> <item> <title>Progressive Storyboards</title> <link>https://www.sergeychernyshev.com/blog/progressive-storyboards/</link> <pubDate>Fri, 17 Mar 2017 05:39:44 +0000</pubDate> <dc:creator><![CDATA[Sergey Chernyshev]]></dc:creator> <category><![CDATA[Misc]]></category> <guid isPermaLink="false">https://www.sergeychernyshev.com/blog/?p=1499</guid> <description><![CDATA[CROSSPOST: This article was originally posted as part of PerfPlanet Calendar 2016 on December 7th, 2016 Speed needs to be designed Speed of User Experience (UX) is important for your web sites and mobile applications, but it often takes a back seat to functional improvements and is always thought of as purely technical exercise – proactive at … <a href="https://www.sergeychernyshev.com/blog/progressive-storyboards/" class="more-link">Continue reading <span class="screen-reader-text">Progressive Storyboards</span></a>]]></description> <content:encoded><![CDATA[<blockquote><p>CROSSPOST: This article was originally posted as part of <a href="https://calendar.perfplanet.com/2016/progressive-storyboards/">PerfPlanet Calendar 2016</a> on December 7th, 2016</p></blockquote><h1>Speed needs to be designed</h1><p>Speed of User Experience (UX) is important for your web sites and mobile applications, but it often takes a back seat to functional improvements and is always thought of as purely technical exercise – proactive at best, but more commonly coming after a newly released product fails to perform.</p><p>While technology plays a big role in delivery and rendering of user experiences in modern applications that depend heavily on networks and on-demand content and functionality, it only provides solutions and often has serious constraints.</p><p>In order to create products that deliver great experience, it is critical to start designing speed and planning on how it can be delivered at the very early stages of the process.</p><h2>Movies or paintings?</h2><p>Unfortunately, today’s deliverables that are passed from product people to designers and from designers over to development teams are inherently static.</p><p>Both early product wireframes and more elaborate Photoshop (or <a href="https://www.sketchapp.com/">Sketch</a>) comps/mockups only depict the final view of the user experience and do not articulate the inherently progressive nature of web medium.</p><p>In his talk, <a href="http://conferences.oreilly.com/velocity/devops-web-performance-ny-2015/public/schedule/detail/43861">Speed vs. Fluency</a> at Velocity New York 2015, <a href="https://blog.radware.com/bios/kent-alstad/">Kent Alstadt</a> asks if today’s web designers are more like <em>film makers</em> who direct “short films” of digital experience or if they are artists who paint beautiful oil paintings that show final picture. He argues that human’s brains enjoy experiences with higher “<em>processing fluency</em>” and web pages that are designed/directed to achieve it would be more effective in meeting their goals.</p><h2>Performance Choreography</h2><p><a href="https://timkadlec.com/">Tim Kadlec</a> in his WebPerfDays NY 2014 talk about <a href="https://speakerdeck.com/tkadlec/performance-choreography-at-webperfdays-ny-2014">Performance Choreography</a> also draws parallels with movie making and cartoon animation where transitions and “in-between moments” are given a lot of thought as they heavily impact perception.</p><p>He points out the importance of concentrating on techniques like <a href="http://www.lukew.com/ff/entry.asp?1797">skeletal designs</a> that focus on <em>progress</em> instead of using spinners and other artificial progress indicators that emphasize waiting.</p><h1>Revealing Features</h1><p>In order to achieve a smooth transition between different views/pages of our interface it is critical to concentrate design thought on this transition.</p><p>It’s important to ensure that the sequence in which features are revealed to the user is natural and follows user’s incremental needs as they wait comfortably for all the information and interactive functionality to be shown.</p><h2>Rendering Stages</h2><p>The whole universe of views and pages is very diverse and unifying all the experiences is impossible. What we can do instead is concentrate on user’s needs as they experience information in human-computer interaction on the web.</p><p>If we step back from specifics of individual pages and experiences and look at the wider problem, we can group rendering into several important stages.</p><p>Identifying these stages for their digital experience would help product and design teams come up with appropriate visual solutions and create smooth transitions.</p><h2>1. Verify Destination</h2><p>First step of any web navigation from one page to another or interaction within website interface is to assure the user that the action they performed was the one they intended to do so they can comfortably wait while it loads without wondering if they need to click the Back button.</p><p>This applies equally well to navigation from a search engine results page or external listing page where a link to a competitor’s site can be right next to your own as well as navigation within your own site with many alternative navigation paths.</p><p>If the user is waiting too long for any piece of interface to show, they can cancel their action out of sheer frustration and leave. This means that we need to identify the minimum amount of User Interface that we need to load as quickly as possible to reduce the uncertainty and to keep them interested.</p><p>Here are the most common UI components that are relatively easy to quickly show to the user:</p><ul><li>Core branding elements like logo and brand colors as part of top navigation</li><li>Breadcrumbs and page headline/title for specific detail pages</li></ul><p><img src="http://www.sergeychernyshev.com/blog-content/uploads/2017/03/amazon_logo_and_breadcrumbs.png" alt="Amazon logo and breadcrumbs" width="766" height="125" class="alignnone size-full" /></p><p><img src="http://www.sergeychernyshev.com/blog-content/uploads/2017/03/trutv_header_with_logo_and_section.png" alt="truTV header with logo and section" width="725" height="142" class="alignleft size-full" /></p><h2>2. Provide Primary Content</h2><p>After the immediate feedback was provided, it is most critical to show the user the primary content we intend them to experience.</p><p>One challenge that we have here however is to separate core, primary pieces of content on the page from all content that we’d like to provide.</p><p>It’s important to narrow down the set of components so they can be loaded as quickly as possible and users can immerse themselves into content while waiting for the full experience to load.</p><p>Primary content is usually easy to identify in today’s design process because it is naturally given the most attention in product conversations and has the most prominent place on the pages.</p><p>Here are a few examples:</p><ul><li>Leaderboards/hero images on marketing pages and the home page of the site</li><li>Article text & photo for the news articles</li><li>Product title & image on e-commerce product detail pages</li></ul><h2>3. Allow Interaction</h2><p>Usually, the most important part of user experience on the web is user’s action; almost all design concentrates around soliciting an action from the user.</p><p>It is critical to show points of interactivity to the user as soon as the primary content is shown and the user was able to make a decision to act upon it.</p><p>Calls to action (CTA) are quite different from business to business: “Add to cart” buttons for e-commerce or “Play” button on a video player are good examples.</p><p><img src="http://www.sergeychernyshev.com/blog-content/uploads/2017/03/amazon_ctas.png" alt="Amazon CTAs" width="676" height="413" class="alignleft size-full" /></p><p>Keep in mind that even though an action is probably the most important goal of each page, it cannot be performed until the user consumes the content to convince themselves to perform such action.</p><p>Same as in primary content, it is critical to ensure that primary actions are prioritized and included in this stage as we all have great temptation to put everything we, as builders of the UI, envisioned and you will have many opinions in the room with various product stakeholders.</p><p>Good news again is that business teams probably have a great grasp on what the primary actions are and they spend plenty of time in those conversations so it’s relatively easy to identify and isolate those components during the design phase.</p><h2>4. Show Secondary Content</h2><p>There is always something other than primary content and actions on the page, find this content and secondary CTAs and load them early in case the user is not interested in primary ones.</p><p>It is somewhat harder to do that as one can argue that everything that is not primary goes into this secondary category, but it is important not to lump everything into this group and leave things that are not as important to load in the next stage.</p><p>Good examples of secondary content and calls to action include:</p><ul><li>Sidebars, secondary headlines or content blocks</li><li>Additional navigation</li><li>User-generated content, sharing buttons, ads</li></ul><h2>5. The Rest & Invisible Tasks</h2><p>Once you’re done identifying the first 4 stages, you are left with many other parts of the content and listing them would help you ensure that you don’t have any unaccounted items and avoid the desire to add any of them to the earlier stages.</p><p>There are always elements that are there for some political or legal reasons, like majority of footer content, for example, as well as interactions that you don’t have any business owner for and are slowly dying out, but you still don’t want to remove (you probably should).</p><p>This stage/group is also for elements that are not within user’s viewport and cannot be viewed or interacted with simply because they are literally invisible.</p><p>This applies to elements “below the fold” on search results pages that are already a consideration for “lazy-loading” or “post-loading” after initial page is rendered, especially if interface calls for “infinite scroll” or some other interaction that requires unbounded amount of data to be loaded over the network.</p><p>One particularly tricky category of element to identify as part of this stage are subsequent slides for the “carousel” widget that are not visible initially, but are shown either automatically after period of time or upon user interaction. It is very important not to prioritize these as they are often quite heavy and require significant amount of code and page manipulation and will delay more important components.</p><p>In addition to elements that are visible later, it is important to include all elements that are never visible, like analytics beacons or other tracking software. Luckily it’s already rarely discussed during design sessions so listing them here can be left for this last step, just don’t forget about those non-visual requirements that still warrant code download.</p><h2>6. Acknowledge Action</h2><p>This stage is the last, or the first, in the whole human-computer interaction model depending on how you cut the user path into distinct chunks we call pages or views.</p><p>In default page-to-page interaction users just wait until the page starts to load and only get first clue that they did successfully perform an action after viewport is cleared and replaced with next page.</p><p>Sometimes it is very hard to speed up these processes as heavy network operations happen at this point and complex server actions might also take significant time (e.g. calculating search results for an arbitrary query over large dataset).</p><p>What we can do to give the user an acknowledgement of their action is to provide visual feedback. Historically first examples included disabling form elements upon form submission (reducing double-submission).</p><p><img src="http://www.sergeychernyshev.com/blog-content/uploads/2017/03/disable_submit_buttons.png" alt="Disable submit buttons" width="563" height="229" class="alignleft size-full" /></p><p>More creative ways were discovered over the years, including the following:</p><ul><li>Providing “loading…” label on the form or next to submit button</li><li>Transition overlays spelling out that user’s acction is accepted and app is hard at work to perform it</li><li>Erasing content area of the current page emulating next page’s initial render before request even went through to the server</li><li>Animating-away the current view while next one is rendered</li><li>Rendering skeletal layout of the next view within single-page app</li></ul><p>This is only possible for interactions that are initiated when user is already on your site, but can provide a good flow once user is already engaged.</p><p>IMPORTANT NOTE: Please avoid using spinners and design good progress indicators that feel natural and don’t require users to concentrate attention on interpreting them.</p><h1>Progressive Storyboards</h1><p>When you include this work within your product design process, it is only natural to start thinking about how to adjust the established deliverables to better represent the results.</p><p>You can start by simply isolating the components of the “final” mockups that are currently used as deliverable and producing a sequence of views by simply whiting out the elements of the original mockup that are not supposed to be represented at particular stage of rendering.</p><p>Here’s an example for a CNN Home Page (screenshot of final view):<br /><img src="http://www.sergeychernyshev.com/blog-content/uploads/2017/03/cnn_home_page.png" alt="Final view screenshot" width="734" height="572" class="alignleft size-full" /></p><p>And corresponding sequence of rendering stages depicting identified steps as a <strong>Progressive Storyboard</strong>:</p><p><img src="http://www.sergeychernyshev.com/blog-content/uploads/2017/03/progressive_storyboard.png" alt="Progressive Storyboard" width="1023" height="361" class="alignleft size-full" /></p><p>You can also go into more detail for more complicated transitions acknowledging user’s actions, as they are in your full control and can significantly help mask slow server-side and network performance.</p><p><img src="http://www.sergeychernyshev.com/blog-content/uploads/2017/03/acknowledge_action_storyboard.png" alt="Acknowledge Action Storyboard" width="1022" height="466" class="alignleft size-full" /></p><p>Having these deliverables as a result of product design work can help the tasks of graphical design, animation and development teams; clearly stating expectations and making it clear what needs to be achieved.</p><h1>Establishing Technical Constraints</h1><p>Performance work can never be done by one team in isolation, it is always a collaboration between product and design teams who know the experience they try to create and technical implementation and operations teams who know technical realities of web medium.</p><p>It is easy to answer the question of how fast the experience has to be with a quick “very fast” and to expect that everything will be loaded and rendered in-front of the user immediately without realizing the costs of accomplishing that or hard technical limitations that do not allow for arbitrary wish granting.</p><p>To help both business teams with high-level cost assessment and technical teams with creating solutions for each stage of rendering, it can be practical to establish a series of technical constraints that map to stages we identified.</p><p>Here’s an example of such mapping:</p><table><tbody><tr><th style="text-align: left;">Rendering Stage</th><th style="text-align: left;">Technical Constraint</th></tr><tr><td style="text-align: left;">1. Verify destination</td><td style="text-align: left;">Inline CSS & Logo, fit content and code in first 14K</td></tr><tr><td style="text-align: left;">2. Provide primary content</td><td style="text-align: left;">no external JS or CSS, just HTML, 1 or 2 images</td></tr><tr><td style="text-align: left;">3. Allow interaction</td><td style="text-align: left;">Skeletal CSS, async JavaScript</td></tr><tr><td style="text-align: left;">4. Show secondary content</td><td style="text-align: left;">All CSS, above the fold images, fonts, AJAX-in content</td></tr><tr><td style="text-align: left;">5. The rest + invisible tasks</td><td style="text-align: left;">–</td></tr><tr><td style="text-align: left;">* Acknowledge action</td><td style="text-align: left;">Pre-transition feedback, animation, fake transition</td></tr></tbody></table><p>You can notice that optimizations that are higher on the list are at the same time more complex and provide more aggressive constraints, for example fitting a lot of code and content into 14K of payload is not possible and only limited functionality is possible without JavaScript during primary content stage.</p><p>A good rule of thumb to have is that each stage is 10x more expensive as previous one in terms of time for development, testing and maintenance. So putting some element into secondary content can cost $1K while moving it up the chain to primary content can convert to $100K and to first stage would cost you $1M. This can give more structure to prioritization conversations and allow to pick only most important components to be promoted.</p><h1>Design, Implement, Measure</h1><p>I really hope that this approach to designing for speed early on can help your team establish better performance practices and account for the complicated nature of the web performance across all the stages of experience creation.</p><p>Make sure to keep paying attention to speed and measure each stage as closely as possible to ensure that users have smooth experience.</p><p>Let’s reduce the amount of frustration in the world and make our sites fast!</p>]]></content:encoded> </item> <item> <title>Web Performance Full Time</title> <link>https://www.sergeychernyshev.com/blog/web-performance-full-time/</link> <comments>https://www.sergeychernyshev.com/blog/web-performance-full-time/#respond</comments> <pubDate>Tue, 31 Mar 2015 02:45:50 +0000</pubDate> <dc:creator><![CDATA[Sergey Chernyshev]]></dc:creator> <category><![CDATA[Misc]]></category> <category><![CDATA[Web Performance]]></category> <guid isPermaLink="false">http://www.sergeychernyshev.com/blog/?p=1388</guid> <description><![CDATA[I’ve been at truTV, formerly Court TV for 11½ years which by industry standards is pretty long run with any company. Well, I’ve worked with some great people and done quite a few interesting projects in-house and outside, especially in Web Performance space so I consider it a good and productive run. Anyway, doesn’t matter how long something lasts, there will be … <a href="https://www.sergeychernyshev.com/blog/web-performance-full-time/" class="more-link">Continue reading <span class="screen-reader-text">Web Performance Full Time</span></a>]]></description> <content:encoded><![CDATA[<p>I’ve been at truTV, formerly Court TV for 11½ years which by industry standards is pretty long run with any company. Well, I’ve worked with some great people and done quite a few interesting projects in-house and outside, especially in Web Performance space so I consider it a good and productive run.</p><p><a href="http://www.keynote.com/" target="_blank"><img class=" size-full wp-image-1391 alignright" src="https://www.sergeychernyshev.com/blog-content/uploads/2015/03/Keynote_Systems_Logo_2014.png" alt="Keynote Systems" width="250" height="58" /></a>Anyway, doesn’t matter how long something lasts, there will be a moment when it’s time for a change and now is that moment for me. I am leaving truTV/Turner to join <a href="http://www.keynote.com/" target="_blank">Keynote Systems</a> as consultant for their <a href="https://www.keynote.com/solutions/analytics/performance-optimization" target="_blank">Insights</a> team that helps company’s clients with Web Performance needs.</p><p><a href="http://www.trutv.com/" target="_blank"><img class="wp-image-1390 alignright" src="https://www.sergeychernyshev.com/blog-content/uploads/2015/03/truTV-Logo.png" alt="truTV" width="195" height="75" srcset="http://www.sergeychernyshev.com/blog-content/uploads/2015/03/truTV-Logo-300x116.png 300w, http://www.sergeychernyshev.com/blog-content/uploads/2015/03/truTV-Logo-1024x395.png 1024w, http://www.sergeychernyshev.com/blog-content/uploads/2015/03/truTV-Logo.png 3351w" sizes="(max-width: 195px) 100vw, 195px" /></a>Needless to say, I’m proud of the team at truTV Web Services that has a grasp of their tech, can both innovate and know when to stick to proven solutions and more importantly, is a bunch of great and passionate people! I’m positive they will only be pushing the boundaries of what can be done by a small team within a large organization and be able to sustain rapid pace required by media industry!</p><p>As you can imagine joining Web Performance-centric team is an important step for me personally and a chance to do what we do at <a href="http://www.meetup.com/Web-Performance-NY/" target="_blank">NY WebPerf meetup</a> – speeding up the web, but now on a full time basis. Obviously, I will continue to run New York meetup, help other organizers around the globe and promote Web Performance with talks, blog posts and every other possible way, and now with help of Keynote, I will dedicate more time to this public work.</p><p>There is no better time to rid the web of slowness!</p>]]></content:encoded> <wfw:commentRss>https://www.sergeychernyshev.com/blog/web-performance-full-time/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item> <title>Results of Google Hackathon</title> <link>https://www.sergeychernyshev.com/blog/results-of-google-hackathon/</link> <comments>https://www.sergeychernyshev.com/blog/results-of-google-hackathon/#respond</comments> <pubDate>Sun, 11 Dec 2011 19:43:24 +0000</pubDate> <dc:creator><![CDATA[Sergey Chernyshev]]></dc:creator> <category><![CDATA[Web Performance]]></category> <guid isPermaLink="false">http://www.sergeychernyshev.com/blog/?p=1356</guid> <description><![CDATA[I’ve attended Google Apps Hackathon recently and coded up some web performance and Google Docuements awesomeness with the team of cool people! See more in ShowSlow blog: http://www.showslow.com/blog/measuring-web-performance-using-google-spreadsheets/ web design history]]></description> <content:encoded><![CDATA[<p>I’ve attended Google Apps Hackathon recently and coded up some web performance and Google Docuements awesomeness with the team of cool people!</p><p>See more in ShowSlow blog:<br /><a href="http://www.showslow.com/blog/measuring-web-performance-using-google-spreadsheets/">http://www.showslow.com/blog/measuring-web-performance-using-google-spreadsheets/</a> <a title='web search history' href='http://historis.info' >web design history</a></p>]]></content:encoded> <wfw:commentRss>https://www.sergeychernyshev.com/blog/results-of-google-hackathon/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item> <title>JavaScript realizer</title> <link>https://www.sergeychernyshev.com/blog/javascript-realizer/</link> <comments>https://www.sergeychernyshev.com/blog/javascript-realizer/#respond</comments> <pubDate>Sun, 17 Jul 2011 06:09:03 +0000</pubDate> <dc:creator><![CDATA[Sergey Chernyshev]]></dc:creator> <category><![CDATA[JavaScript]]></category> <guid isPermaLink="false">http://www.sergeychernyshev.com/blog/?p=1330</guid> <description><![CDATA[After listening to Anton Kovalyov’s talk at GothamJS, I thought that a couple of examples of “your code” vs “what JS engine thinks your code is” he was showing were actually very good. I think linting (and hinting) is not the only way to improve the code and maybe a tool that can convert user’s … <a href="https://www.sergeychernyshev.com/blog/javascript-realizer/" class="more-link">Continue reading <span class="screen-reader-text">JavaScript realizer</span></a>]]></description> <content:encoded><![CDATA[<p>After listening to Anton Kovalyov’s <a href="http://anton.kovalyov.net/slides/gothamjs/">talk at GothamJS</a>, I thought that a couple of examples of <a href="https://gist.github.com/1087228">“your code” vs “what JS engine thinks your code is”</a> he was showing were actually very good.</p><p>I think <a href="http://www.jslint.com/">linting</a> (and <a href="http://jshint.com/">hinting</a>) is not the only way to improve the code and maybe a <strong>tool that can convert user’s code to code that JS engine will be actually executing</strong> might be eye opening for many developers.</p><p>Tool like that would allow developers to see the reality behind the JS standard quirks, would demystify some of the syntax techniques and would help with understanding the semicolon insertions, <a href="http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting">various scope problems</a>, == vs === difference and so on.</p><p>That being said, such tool probably needs some form of minification happening when code is deployed to production, because syntax might be quite verbose and some expansions can be compressed back (see jshint’s eqnull).</p><p>I’d love to see an “easy way” of making it happen just using existing engines and all, but not sure if it is possible – parsers don’t necessarily do that so it requires serialization back into JS after compilation and maybe even optimizations.</p><p>If you know a good way to do that, please post a comment here.</p><p>Maybe it can even make <a href="http://anton.kovalyov.net/2011/02/20/why-i-forked-jslint-to-jshint/">Anton and Douglas Crockford</a> talk to each other ;)</p>]]></content:encoded> <wfw:commentRss>https://www.sergeychernyshev.com/blog/javascript-realizer/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item> <title>Get distracted by ideas!</title> <link>https://www.sergeychernyshev.com/blog/get-distracted-by-ideas/</link> <comments>https://www.sergeychernyshev.com/blog/get-distracted-by-ideas/#respond</comments> <pubDate>Thu, 30 Jun 2011 18:54:17 +0000</pubDate> <dc:creator><![CDATA[Sergey Chernyshev]]></dc:creator> <category><![CDATA[Misc]]></category> <category><![CDATA[innovation]]></category> <category><![CDATA[Reading]]></category> <guid isPermaLink="false">http://www.sergeychernyshev.com/blog/get-distracted-by-ideas/</guid> <description><![CDATA[I don’t know why, but my brain is constantly wandering away when I read an interesting book. Sometimes it makes me re-read paragraphs or even whole chapters over again because I completely miss the point while reading automatically with my eyes, but being somewhere else in my thoughts. My first reaction was to shake it … <a href="https://www.sergeychernyshev.com/blog/get-distracted-by-ideas/" class="more-link">Continue reading <span class="screen-reader-text">Get distracted by ideas!</span></a>]]></description> <content:encoded><![CDATA[<p>I don’t know why, but my brain is constantly wandering away when I read an interesting book. Sometimes it makes me re-read paragraphs or even whole chapters over again because I completely miss the point while reading automatically with my eyes, but being somewhere else in my thoughts.</p><p>My first reaction was to shake it off and get back to the book paying closer attention to what I was just reading for past few minutes. It happened again and again throughout the years of reading and I was always annoyed at loosing time having to re-read the same text over and over again. But the feeling was so curious and so repeatable that I thought that I should start observing this behavior to try make sense of it.</p><p>As it turns out, the distractions were not the problems of the brain having hard time concentrating, but on the contrary, the process of generating new ideas. Triggered by the topic of the book or blog post, my brain was connecting prior thoughts with something new or bringing up memories that were long forgotten and never coming back in that particular context.</p><p>Basically, it’s like electric short in the brain that happens between two previously “unrelated” areas and this short builds some new bridge that allows for thoughts to travel faster between the two concepts in the future (disclosure, I’m not a neural surgeon nor I have any idea how brain actually works).</p><p>In “The Myths of Innovation”, Scott Berkun’s attributes a lot of inventions to the associative thinking that people employ connecting different things together, observations of nature, memories and so on. The shorts in my brain are much like those associations in the making.</p><p>So, getting back to the annoying distraction and the need to re-read what was just read with a blank expression on your face…</p><p>After observing it for a while I realized that getting back to reading was the worst mistake I could make – basically I was forcing myself to block the thoughts that were working hard on building that neural bridge effectively killing the associations that were being created. My desire to finish the book and to optimize reading time was prevailing over desire to get some meaning out of it completely defeating the whole purpose of reading itself.</p><p>… so I started to think of what to do instead …</p><p>There are a couple goals here – first of all is to try preserving the thought that I was previously trying to subdue. After all, I really hope those ideas are useful and not just day dreams.</p><p>Pen and paper never worked for me for some reason and I waited all this time for technology to catch up which it did bringing us mobile devices. Emails to self work very well for me and Blackberry started (literally) saving the ideas also helping with putting them into personal search engine (thanks Gmail) and effectively adding them to task list (inbox). Some people just use notes app on their smartphones and others tweet with #notetoself hash tags – whatever works best.</p><p>The second goal is to not stifle the brain activity and let it go for as long as it can naturally do so to helping those bridge-building ants in my brain create something stable and reliable and capable of transferring the thoughts between the newly connected concepts in the future.</p><p>Now, with better mobile devices with web browsers and apps, there is no need to just record your thoughts, I’m adding tasks to my issue trackers for software projects, writing blog posts, tweeting, updating my presentations and so on the go, right when I had the “blank reading” moment.</p><p>Switching from the book to working on the idea is as easy as pulling out the phone or taking iPad from my backpack (or switching the app if it’s an ebook). Luckily bookmarks were invented long time ago and there is not much to learn to be able to re-start the reading.</p><p>I urge everyone to not read a book while train ride lasts or until you go to sleep or until you reach the cover. Read it until it sparks the thought, until your brain wanders away coming up with an idea. Use reading material as a trigger for creating associations, try to catch the creative moment – don’t loose it, build on it!</p><p>This post came out pretty long, the thought is thinning and it’s time to get back to that book…</p>]]></content:encoded> <wfw:commentRss>https://www.sergeychernyshev.com/blog/get-distracted-by-ideas/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item> <title>RB: ShowSlow 0.18: Support for Google Page Speed Online API and more</title> <link>https://www.sergeychernyshev.com/blog/rb-showslow-0-18-support-for-google-page-speed-online-api-and-more/</link> <comments>https://www.sergeychernyshev.com/blog/rb-showslow-0-18-support-for-google-page-speed-online-api-and-more/#respond</comments> <pubDate>Sat, 14 May 2011 06:22:13 +0000</pubDate> <dc:creator><![CDATA[Sergey Chernyshev]]></dc:creator> <category><![CDATA[RB]]></category> <category><![CDATA[ShowSlow]]></category> <category><![CDATA[Web Performance]]></category> <guid isPermaLink="false">http://www.sergeychernyshev.com/blog/?p=1320</guid> <description><![CDATA[Google Page Speed Online API and more in ShowSlow 0.18: http://www.showslow.com/blog/page-speed-online-api/ RB from ShowSlow blog]]></description> <content:encoded><![CDATA[<p>Google Page Speed Online API and more in ShowSlow 0.18:<br /><a href="http://www.showslow.com/blog/page-speed-online-api/">http://www.showslow.com/blog/page-speed-online-api/</a></p><p><em>RB from ShowSlow blog</em></p>]]></content:encoded> <wfw:commentRss>https://www.sergeychernyshev.com/blog/rb-showslow-0-18-support-for-google-page-speed-online-api-and-more/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item> <title>RB: ShowSlow at Velocity 2011</title> <link>https://www.sergeychernyshev.com/blog/rb-showslow-at-velocity-2011/</link> <comments>https://www.sergeychernyshev.com/blog/rb-showslow-at-velocity-2011/#respond</comments> <pubDate>Sat, 23 Apr 2011 04:23:48 +0000</pubDate> <dc:creator><![CDATA[Sergey Chernyshev]]></dc:creator> <category><![CDATA[RB]]></category> <category><![CDATA[ShowSlow]]></category> <category><![CDATA[Talks]]></category> <category><![CDATA[Web Performance]]></category> <guid isPermaLink="false">http://www.sergeychernyshev.com/blog/?p=1309</guid> <description><![CDATA[I’m going to talk at opening Workshop at Velocity. http://www.showslow.com/blog/showslow-at-velocity-2011/ RB from ShowSlow blog.]]></description> <content:encoded><![CDATA[<p>I’m going to talk at opening Workshop at Velocity.<br /><a href="http://www.showslow.com/blog/showslow-at-velocity-2011/">http://www.showslow.com/blog/showslow-at-velocity-2011/</a></p><p><em><span title="re-blog">RB</span> from ShowSlow blog.</em></p>]]></content:encoded> <wfw:commentRss>https://www.sergeychernyshev.com/blog/rb-showslow-at-velocity-2011/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> </channel></rss> If you would like to create a banner that links to this page (i.e. this validation result), do the following:
Download the "valid RSS" banner.
Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)
Add this HTML to your page (change the image src attribute if necessary):
If you would like to create a text link instead, here is the URL you can use:
http://www.feedvalidator.org/check.cgi?url=http%3A//feeds.sergeychernyshev.com/SergeyChernyshevsBlog
