Tag Archives: lighthouse

Thumbnail

It’s Time to Retest Your Page Speed [Google’s latest update]

Back in October, we were the first to claim that 2019 will be the year of page speed. We’ve got our eyes on the market and lemme tell you: Google is sending serious signals that it’s crunch time to deal with your slow pages.

Faster pages are a strategic marketing priority.

And sure enough, Google has made yet another change to uphold that prediction. In early November, they quietly rolled out the most significant update to a core performance tool we’ve seen to date, announcing the latest version of PageSpeed Insights.

So what does this update mean for marketers and their bottom line?

If you’ve used PageSpeed Insights to test page performance, it’s time to retest! Because your old speed scores don’t matter anymore. The good news is that you’ll have new data at your fingertips to help you speed up in ways that actually matter to your prospects and potential conversions.

Let’s take a closer look at this update and explore why it should play a role in your page speed strategy in 2019.

“You can’t improve what you don’t measure.”

PageSpeed Insights is easily Google’s most popular tool for measuring web performance.

When you look at the screenshot below, you can see why. It provides an easy-to-interpret color-coded scoring system that you don’t need an engineering degree to understand—red is bad, green is good. Your page is either fast, average, or slow. The closer to a perfect 100 you can get, the better. The scores also come with recommendations of what you can do to improve. It’s almost too easy to understand.

PageSpeed Insights
PageSpeed Insights v.4 (October 2019)

Earlier versions of PageSpeed Insights had some issues with how they reported performance. Simple results could be misleading, and experts soon discovered that implementing Google’s suggested optimizations didn’t necessarily line up with a better user experience. You might’ve gotten great scores, sure, but your pages weren’t always any faster or your visitors more engaged. Don’t even get me started on your conversion rates.

As Benjamin Estes over at Moz explains, “there are smarter ways to assess and improve site speed. A perfect score doesn’t guarantee a fast site.” Many experts like Estes began turning to more reliable tools—like GTMetrix, Pingdom, or Google’s own Lighthouse—to run more accurate performance audits. And who would blame them?

The latest version of PageSpeed Insights (v.5) fixes these issues by putting the focus where it should be: on user experience. This is a huge leap forward for marketers because it means that the tool is directly relevant to conversion optimization. It can help you get faster in ways that translate into higher engagement and conversion rates.

For the full scoop, check out Google’s release notes here, but there are really two changes you should note:

1. PageSpeed Insights Now Uses Lighthouse

Lighthouse is excellent because it gives you a more accurate picture of how your landing pages perform with lab and field data. The lab data means you get results ASAP, whether you’ve seen traffic yet or not. This gives you a way to test and improve your pages before you point your ads at them.

An important note is that Lighthouse simulates a page load on a mid-tier device (Moto G4) on a mobile network—roughly equivalent to the fastest 25% of 3G and slowest 25% of 4G. So it’s a pretty solid estimate of what you’re likely to see in the wild. Here’s what it looks like:

New lab data from Lighthouse provides a much better picture of what a user experiences.

The Lighthouse engine behind PageSpeed Insights also brings more user-centric performance metrics with it, two of which are very important to your landing pages:

  • First Meaningful Paint (FMP) is the time it takes for the first valuable piece of content to load—usually a hero shot or video above the fold. It’s the “is this useful?” moment when you catch—or lose—a visitor’s attention. Even if the rest of your page loads later, it’s paramount that the first page elements appear as quickly as possible.
  • Time to Interactive (TTI) is the first moment a visitor can interact with your page. It’s the best measure of speed to determine if a visitor will happily engage with your content, or whether they’ll get annoyed and bounce because your landing page keeps choking on clunky JavaScript or poorly prioritized code.

2. PageSpeed Insights Gives You Better Opportunities and Diagnostics

You can bid adieu to the short checklist of optimizations that experts like Ben Estes called out. Google has replaced the (moderately useful) feature with new opportunities and audits that will actually help you improve your visitor experience. These include new suggestions and estimated savings for each.

Your priorities should be much clearer:

PageSpeed Insights Opportunities
Opportunities and Diagnostics in PageSpeed Insights

How your Unbounce Pages Stack Up

Faster pages earn you more traffic and better engagement. As a result, page speed has a major impact on your conversion rates and can even help you win more ad impressions for less. That’s why we’ve made page speed our priority into 2019.

To show how Unbounce stacks up in the real world, we chose to test an actual page created by one of our customers, Webistry, a digital marketing agency. Their “Tiny Homes of Maine” page is a real-world example.

Click here to expand.

It has tons of custom functionality, so it’s fairly representative of what many customers do with the Unbounce builder. (The ability to customize is often why customers choose Unbounce in the first place!) This page includes custom Javascript for smooth scrolling, a sticky header, fading header, some custom CSS, and a bunch of images of various file types.

We tested two versions of “Tiny Homes of Maine” using Google PageSpeed Insights v.5, running a minimum of three tests using the median results. The results below focus on the mobile scores:

Speed Boost

First, we tested the original Tiny Homes of Maine landing page using Unbounce’s Speed Boost, which optimizes landing page delivery to do things like leverage browser caching, prioritize visible content to load first, bundle Javascript, and so on. Speed Boost handles the technical recommendations from PageSpeed Insights that developers usually tackle behind the scenes. You can see the overall results of the test here:

Tiny Homes of Maine with Speed Boost

Speed Boost + Auto Image Optimizer

Next, we retested the Tiny Homes of Maine adding our upcoming Auto Image Optimizer into the mix. This new tool automatically optimizes your images as your page is published. You can fine-tune your settings, but we used the defaults here. Check out the mobile results:

Tiny Homes of Maine with Speed Boost + Auto Image Optimizer

The score jumped from a respectable 88 to an incredible 96 and, more meaningfully, we saw time to interactive improve from 4.4 sec to 2.7 sec. That’s 12.3 seconds faster than the average mobile web page, and 0.3 seconds faster than Google’s ideal 3 second load time.

Here we’ve shared the time to interactive speeds from both tests, for desktop and mobile, measured against the average web page:

Time to Interactive is the best measure for whether a visitor will engage or bounce. Our average mobile speed is based on Google’s mobile benchmarks, while the desktop average comes from a study by SEO Chat.

Overall, when we tested, we saw Speed Boost and Auto Image Optimizer create a dramatic difference in performance without sacrificing visual appeal or complexity. We took a compelling page that converts well and upped the ante by serving it at blazing speeds. Whether on a mobile or desktop, the page loads in a way that significantly improves the visitor’s experience.

Speed Boost is already available to all our customers, and the Auto Image Optimizer is coming very soon. This means your own landing pages can start achieving speeds like the ones above right now. Read more about our page speed initiatives.

But hold up. What about AMP? You might already know about AMP (accelerated mobile) pages, which load almost instantly—like, less than half a second instantly. Not only do they lead to crazy engagement, but they eliminate waiting on even slow network connections. This makes your content accessible to everyone, including the 70% of global users still on 3G connections—or 70% of pedestrians on their phones while they wait at a crosswalk.

While AMP can be complicated to build, Unbounce’s drag-and-drop builder lets you create AMP in the same way you create all your landing pages. If you’d like to try it out for yourself, you can sign up for AMP beta which opens in January 2019.

For the speed test above, we decided to leave AMP out of it since AMP restricts some custom functionality and the page we used would’ve required a few design changes. It wouldn’t be apples to apples. But we’re pretty pumped to show you more of it in the next while.

Page Speed & Your Bottom Line

Seconds are one thing, but dollars are another. Google recognizes the direct impact that fast load times have on your bottom line, which is why they released the Impact Calculator in February 2018. This tool sheds more light on why providing accurate measurements is so important.

Let’s revisit our Tiny Homes landing page above as an example. Imagine this landing page gets 1,000 visitors a month, at a conversion rate of 3.5% (which is just slightly higher than the average Real Estate industry landing page in our Conversion Benchmark Report). If the conversion rate from lead to sale is 5%, and each conversion is worth an average of $54,000 (which is the mid-priced home on their landing page), then their average lead value is $2700.

Tiny Homes of Maine in the Impact Calculator

When we input those numbers into the Impact Calculator and improve their mobile page speed from 4.4 seconds to 2.8 seconds, as shown in the test above, the impact to revenue for this one page could be $52,580.

Heck yes, speed matters.

And if we forecast the near-instant speeds promised by Accelerated Mobile Pages (AMP), that page could see a potential annual revenue impact of more than $179,202 USD if it were to load in 1 second.

And that’s one landing page!

If you’ve been struggling with how to improve your page loading times, this latest version of PageSpeed Insights now gives you a much more meaningful picture of how you’re doing—and how to get faster.

You may not have considered speed a strategic priority, but when seconds can equate to tens of thousands of dollars, you need to. Try the Impact Calculator yourself or contact our sales team if you’d like to see what kind of revenue impact Unbounce landing pages can get you.

Read this article: 

It’s Time to Retest Your Page Speed [Google’s latest update]

Thumbnail

2019 Is the Year of Page Speed. Are You Ready?

2019 is the Year of Page Speed

Page speed matters.

We’ve been hearing it for years, though any one of us would be forgiven for letting it slide.

There are other priorities, after all. Marketers have been busy ensuring content is GDPR compliant. We’ve installed SSL certificates, made sure that our pages are mobile-responsive, and conducted conversion optimization experiments.

Some of us have had kids to raise. (And others, dogs.)

But Google has been sending some serious signals lately that suggest sluggish loading is a problem you can no longer sleep on.

In fact, if we look at Google’s actions, it’s undeniable that 2019 will be the year of page speed, the year of the lightning bolt. It’s the year when the difference between fast and slow content becomes the difference between showing up in the search results (whether paid or organic) or disappearing completely.

If you’ve been putting off improvements to your landing page performance until now, chances are that slow content is already killing your conversions. But in 2019, slow content will kill your conversions… to death.

Not convinced? Let’s explore the evidence together.

Google has been saying speed matters since forever

One of the reasons marketers aren’t taking Google’s latest messaging about page speed as seriously as they should is that the company has been asking us to speed up for at least a decade.

Way back in June of 2009, Google launched its “Let’s make the web faster” initiative, which sought to realize co-founder Larry Page’s vision of “browsing the web as fast as turning the pages of a magazine.”

Let's make the web faster
“Let’s make the web faster” video posted on June 22, 2009 (via YouTube)

As part of this initiative, Google made a number of commitments, but they stressed that better speed wasn’t something they could achieve alone. On the same day, a post called “Speed Matters” on the Google AI blog contained a similar message:

Because the cost of slower performance increases over time and persists, we encourage site designers to think twice about adding a feature that hurts performance if the benefit of the feature is unproven.

These weren’t just empty words. The publication of the “Let’s make the web faster” and “Speed Matters” posts signaled a burst of activity from Google. This included:

  • making speed a ranking factor for desktop searches (2010)
  • releasing PageSpeed tools for Firefox (2009) and Chrome (2011)
  • adding the capacity to preload the first search result to Chrome (2011)

But that was nearly ten years ago, and Google followed it with… almost nothing.

Digital marketers and web devs thought they were safe to focus on other things.

Then, in February of 2017, Google returned to the subject of speed in a big way, publishing an industry benchmark report that’s been widely shared ever since.

You may have seen some of the results:

Mobile Page Speed Benchmark
Google’s benchmark revealed that as load times get longer, the probability of bounce increases significantly (via Think with Google).

The first version of the benchmark found that the average mobile landing page was taking 22 seconds to load. This average came down to 15.3 seconds in 2018, but it’s still a significant concern.

(If you’d like a visceral reminder of why a 15-second average wait is still a major problem, hold your breath for that long.)

While the core message that “speed matters” was the same in 2009, in the report Google was now warning that “consumers are more demanding than ever before. And marketers who are able to deliver fast, frictionless experiences will reap the benefits.”

The benchmark report sounded an alarm. And the 2018 update dialed up the volume: “Today it’s critical that marketers design fast web experiences across all industry sectors.”

Google and Page Speed: A Timeline

Much like “Let’s make the web faster,” the 2017 benchmark preceded a flurry of activity from Google, this time laser-focused on mobile page speeds. Here are a few of the more significant moments that should concern you:

May 2017:
Google introduces AMP landing pages to AdWords

This update to AdWords (now Google Ads) makes it possible for advertisers to point their mobile search ads to Accelerated Mobile Pages (AMP), an ultra-light standard for web pages that is designed to load in less than a second on a mobile device. It’s the strongest indicator yet that Google wants you to get behind AMP in a big way.


June 2017 to February 2018:
Google makes its tools more insistent

In this period, performance tools like PageSpeed Insights and “Test My Site” began making more forceful claims about speed improvements. In February, Google even announced two new tools. The Mobile Speed Scorecard lets you measure your domain’s load time against up to ten of your competitors. And the Impact Calculator produces an estimate of the revenue impact you’d see by speeding up your site. (They’re done with being subtle.)


July 2018:
Google’s “Speed Update” drops

While speed has been a ranking factor in desktop search results since 2010, the “Speed Update” applies stronger standards to mobile searches. Alongside mobile-first indexing, this places renewed pressure on site creators to ensure their mobile landing page experiences are speedy and engaging.


July 2018:
Mobile Speed Score is added to Google Ads

Though Mobile Speed Score doesn’t (yet) have a direct impact on your cost-per-click (CPC), loading times already factor into your Quality Score because they determine landing page experience. By isolating mobile load times, Google Ads now makes it “easier to diagnose and improve your mobile site speed.” Hint, hint.

Google is making mobile page speed mandatory…

It’s not a drip, it’s a monsoon. Looking at the full timeline of announcements, launches, and product updates reveals that Google has been more active than in 2009—and that this initiative is ongoing. Take a look:

Google Page Speed Timeline
Want a better view of this timeline? Click above to open a larger version.

Since 2009, one of the ongoing arguments that Google has been making—through releasing tools and metrics like PageSpeed Insights, Lighthouse, “Test My Site,” the Speed Scorecard, Impact Calculator, and Mobile Speed Score—is that speed matters.

Since 2017, though, that argument has gotten much louder. And while no single action or announcement on this timeline should send you into a tizzy just yet, it’s worth remembering that Google’s gentle reminders tend to become more or less mandatory.

The search engine’s previous drips about mobile responsiveness or, say, web security both manifested in concrete changes to their browser and search engine that forced marketers to prioritize.

In 2016, for instance, you could have safely put SSL certification on your “nice-to-have” list because all Google promised was a small boost to encrypted sites in the search rankings. Nice, to have, but not critical. In 2018, Google Chrome began actively flagging non-HTTPS sites as “Not Secure.”

That’s how Google encourages change: first a carrot, then the stick.

…but what are marketers doing about it?

Unbounce wanted to know what, if anything, digital marketers are doing to meet Google’s new performance standards. So in the “Inside Unbounce” tent at this year’s Call to Action conference, we conducted an informal survey of attendees.

Participants could choose any landing page they wanted. (A majority of these participants weren’t Unbounce customers, but we were happy to measure pages created with our own builder as well.)

Together, we’d run the selected page through Google’s “Test My Site” tool and record the results.

An Inside Unbounce Attendee
An attendee uses “Test My Site” at CTAConf 2018. Unbounce wanted to know, how fast are you?

Our numbers beat the benchmark by a significant margin. That’s not shocking considering CTAConf is a digital marketing conference. The average load time was 10.27 seconds, five seconds faster than Google’s 2018 benchmark.

But it wasn’t all good news, and just how bad it got surprised us:

Only 1.6% of the 188 attendee landing pages we tested at CTAConf loaded in three seconds. Not a single one we tested loaded faster than that.

Ooof. That hurts, especially since Google says 53% of visitors bounce after three seconds.

This means even savvy marketers are not getting the opportunity to convert because a majority of prospects bounce before the content ever loads. Imagine stressing over the color of a button or the length of your headline copy only to discover most people who click on your ad will never even see the resulting landing page.

It’s no wonder, then, that Google is putting increased pressure on marketers to meet their standards in 2019. They can’t afford to be serving up a heaping spoonful of frustration with each search results. And neither can you.

Major players are already sprinting ahead

Even if Google weren’t forcing our hands, it’s hard to imagine a business that wouldn’t benefit from allocating resources to ensuring their website loads like lightning. Major web brands like Etsy and eBay have long been transparent about the importance of speed to their business, and many more companies are waking up to it.

TELUS, one of Canada’s largest telecommunication companies, committed to improving user experience across their web properties in a series of recent blog posts. According to the blog, this initiative to improve performance and speed is “aligned with what Google was really saying: Improving the customer experience is paramount.”

We reached out to Josh Arndt, Senior Technology Architect and Performance Program Lead at TELUS Digital, who explained why this move made a lot of sense:

Customers expect to be able to do what they want in a way that fits their life. While users come to our website for the content, speed – or lack of – may be the first point of friction in their digital journey. Our goal is to remove friction and make their experience effortless and rewarding. As such, performance and other web quality characteristics will always be on our roadmap.

TELUS recognizes that speed—or a lack of it—serves as the unofficial gatekeeper to their content. In this context, page speed is a natural priority, even if it’s one many of us have been collectively ignoring.

Our manifesto, or what page speed means to Unbounce

As the market leader in landing pages, Unbounce recognizes that being capable of extremely fast speeds represents a significant advantage for our clients. Turbo-charged landing pages result in more traffic and higher engagement, boosting conversions and helping PPC campaigns win increased ad impressions for less.

We’ve been happy to make it our priority into 2019. At the same time, though, we also want to remove some of the obstacles to building faster landing pages.

Technical challenges

Over the past few months, our developers have been optimizing Unbounce pages for the recommendations made by Google’s PageSpeed Insights. This bundle of technical improvements (we call it Speed Boost) automatically takes care of many of the technical details that can be a hurdle to improving performance, especially if development hours are tight or (let’s be realistic here) non-existent.

Speed versus beauty

Another sticking point when it comes to speeding up is that few marketers feel comfortable sacrificing visuals for faster load times. Image file sizes have increased to match the larger display resolutions and higher pixel density of modern mobile devices, one reason the average page size has doubled in the past three years.

With the addition of support for ultra-light SVG images and the recent integration of the free Unsplash image galleries right within the Unbounce builder, we’re helping marketers keep things looking slick without weighing down the landing page.

And we’re working toward creating even more optimization opportunities in the near future, including the Auto Image Optimizer, which automatically compresses the images on your landing pages. (You can decide how much or little compression you want.)

The result will be Cheetah speeds—no, scratch that, cheetah-with-a-rocket-strapped-to-its-back speeds—but without the need to sacrifice either visual allure or creative control.

We’ve taken the pressure off. Check out our plans and pricing for desktop and mobile landing pages that are always optimized with speed in mind. It guarantees a better user experience and less ad spend wasted on ads that don’t convert.

Unbounce + AMP Landing Pages

When it comes to improving page speeds on mobile devices, accelerated mobile pages (AMP) set the gold standard by offering load times that are typically much quicker on a 3G connection—and under a second on 4G.

AMP implementation also has a democratizing effect, which Facebook advertising expert Mari Smith points out:

If you wait too long to ensure speedy landing pages, your competitors will zoom right past you…It’s a total race right now. Specifically, with the pending issues around net neutrality, page speed could become far more important than it already is.

Considering that 70% of the world uses a 3G or slower connection—and that the repeal of net neutrality means more internet users in the US might find themselves in the slow lane—designing for older devices and slower connection speeds means connecting to more potential customers. AMP is a big plus in this regard, and that’s one reason publishers were among the first to adopt it.

But AMP can also be hard. As Unbounce’s Larissa Hildebrandt put it in a recent post, “the reason the AMP framework creates a fast page is because it is so restrictive.”

Implementing AMP typically involves learning the nuances of AMP’s specialized markup, including a restrictive version of HTML and a truncated JavaScript library. Pages are delivered the Google AMP Cache, a proxy-based CDN which helps them load even faster. And, all-in-all, to be validated requires closely following the strict design principles laid out by the AMP Project.

If all this sounds like a killer headache in the making, you’re right.

While Unbounce has been greatly interested in supporting AMP, we wanted to make sure it’s fast and easy for our customers to implement. So when Unbounce launches support for AMP landing pages in early 2019, you’ll be able to use our drag-and-drop builder to create AMP landing pages in no time.

We also didn’t want you to sacrifice creative control, so Unbounce allows the inclusion of AMP-compatible custom CSS, JavaScript, and HTML. As long as it passes validation, you can include it. Go nuts. We love how our community innovates on our platform.

Build an AMP page in Unbounce in our beta
Interested in seeing for yourself how AMP landing pages can accelerate your conversion rate? Join the waitlist for access to the private beta here. Explore how the builder makes creating AMP-ready pages quick and easy.

Speed up or disappear

No marketer can afford to ignore page speed in 2019. Mobile speeds can have a dramatic effect on paid advertising spend and your conversion rates, and Google’s actions so far show that the search engine is cracking down on the slow-to-load across all devices.

What does the future hold? I don’t pretend to have a crystal ball, but here are a few educated guesses:

  1. If mobile loading times don’t get much faster, then we can expect more pressure from Google. This could take the form of further changes to indexing or Google Ads, another round of benchmarks, or the addition of new features and tools.
  2. There’s a growing sense of urgency among marketers, and the major players are already moving to improve their loading times. Even if you’re in the small business space, these things tend to have a trickle-down effect. If you don’t work to improve your performance, chances are your competitors will.
  3. As development on AMP continues, the standard will gain new flexibility while maintaining optimal speeds. It’s already overcome early limitations, and it’s likely we’ll see adoption rates accelerate across all industries.

Since 2009, we’ve seen some remarkable developments in mobile technology, including widespread adoption of touchscreens, the rollout of 4G cellular capabilities, and voice-based search. But the web itself hasn’t always evolved to match—instead, it’s gotten slower and heavier. (Haven’t we all?)

In 2019, though, that will begin to change, for all of the reasons discussed above. The web will speed up and slim down, and those who don’t match the new paradigm will be left behind.

Thankfully, if 2019 is The Year of Page Speed, then you’ve still got opportunities to start speeding up in advance. Let us know your plans in the comments below.

Continue at source – 

2019 Is the Year of Page Speed. Are You Ready?

Thumbnail

Monthly Web Development Update 6/2018: Complexity, DNS Over HTTPS, And Push Notifications




Monthly Web Development Update 6/2018: Complexity, DNS Over HTTPS, And Push Notifications

Anselm Hannemann



We see complexity in every corner of a web project these days. We’ve read quite a bunch of articles about how complex a specific technology has become, and we discuss this over and over again. Coming from a time where we uploaded websites via FTP and had no git or anything comparable, now living in a time where we have a build system, transpilers, frameworks, tests, and a CI even for the smallest projects, this is easy to understand. But on the other hand, web development has grown up so much in the past 15 years that we can’t really compare today to the past anymore. And while it might seem that some things were easier in the past, we neglect the advantages and countless possibilities we have today. When we didn’t write tests back then, well, we simply had no test — meaning no reliable way to test for success. When we had no deployment process, it was easy to upload a new version but just as easy to break something — and it happened a lot more than today when a Continuous Integration system is in place.

Jeffrey Zeldman wrote an interesting article on the matter: “The Cult of Complex” outlines how we lose ourselves in unnecessary details and often try to overthink problems. I like the challenge of building systems that are not too complex but show a decent amount of responsibility (when it comes to ethics, privacy, security, a great user experience, and performance) and are working reliably (tests, deployments, availability, and performance again). I guess the problem of finding the right balance won’t go away anytime soon. Complexity is everywhere — we just need to decide if it’s useful complexity or if it was added simply because it was easier or because we were over-engineering the original problem.

News

  • The upcoming Safari version 12 was unveiled at Apple’s WWDC. Here’s what’s new: icons in tabs, strong passwords, as well as a password generator control via HTML attributes including two-factor authentication control, a 3D and AR model viewer, the Fullscreen API on iPads, font-display, and, very important, Intelligent Tracking Prevention 2.0 which is more restrictive than ever and might have a significant impact on the functionality of existing websites.
  • The headless Chrome automation library Puppeteer is now out in version 1.5. It brings along Browser contexts to isolate cookies and other data usually shared between pages, and Workers can now be used to interact with Web Workers, too.
  • Google released Lighthouse 3.0, the third major version of their performance analyzation tool which features a new report interface, some scoring changes, a CSV export, and First Contentful Paint measurement.
  • Chrome 67 is here, bringing Progressive Web Apps to the Desktop, as well as support for the Generic Sensor API, and extending the Credential Management API to support U2F authenticators via USB.
  • We’ve seen quite some changes in the browsers’ security interfaces over the past months. First, they emphasized sites that offer a secured connection (HTTPS). Then they decided to indicate insecure sites, and now Chrome announced new changes coming in fall that will make HTTPS the default by marking HTTP pages as “not secure”.
Desktop PWA in Chrome 67
Desktop Progressive Web Apps are now supported in Chrome OS 67, and the Chrome team already started working on support for Mac and Windows, too. (Image credit)

General

  • In “The Cult of the Complex”, Jeffrey Zeldman writes about how we often seem to forget that simplicity is the key and goal of everything we do, the overall goal for projects and life. He explains why it’s so hard to achieve and why it’s so much easier — and tempting — to cultivate complex systems. A very good read and definitely a piece I’ll add to my ‘evergreen’ list.
  • Heydon Pickering shared a new, very interesting article that teaches us to build a web component properly: This time he explains how to build an inclusive and responsive “Card” module.

UI/UX

  • Cool Backgrounds is a cool side project by Moe Amaya. It’s an online generator for polygonal backgrounds with gradients that can generate a lot of variants and shapes. Simply beautiful.

Tooling

Security

  • As security attacks via DNS gain popularity, DNS over HTTPS gets more and more important. Lin Clark explains the technology with a cartoon to make it easier to understand.
  • Windows Edge is now previewing support for same-site cookies. The attribute to lock down cookies even more is already available in Firefox and Chrome, so Safari is the only major browser that still needs to implement it, but I guess it’ll land in their Tech Preview builds very soon as well.
DNS Over HTTPS
Lin Clark created a cartoon to explain how you can better protect your users’ privacy with DNS over HTTPS. (Image credit)

Privacy

Web Performance

  • KeyCDN asked 15 people who know a lot about web performance to share their best advice with readers. Now they shared this article containing a lot of useful performance tips for 2018, including a few words by myself.
  • Stefan Judis discovered that we can already preload ECMA Script modules in Chrome 66 by adding an HTML header tag link rel=“modulepreload”.

Accessibility

  • It’s relatively easy to build a loading spinner — for a Single Page Application during load, for example —, but we rarely think about making them accessible. Stuart Nelson now explains how to do it.
  • Paul Stanton shares which accessibility tools we should use to get the best results.

JavaScript

  • JavaScript has lately been bullied by people who favor Elm, Rust, TypeScript, Babel or Dart. But JavaScript is definitely not worse, as Andrea Giammarchi explains with great examples. This article is also a great read for everyone who uses one of these other languages as it shows a couple of pitfalls that we should be aware of.
  • For a lot of projects, we want to use analytics or other scripts that collect personal information. With GDPR in effect, this got a lot harder. Yett is a nice JavaScript tool that lets you block the execution of such resources until a user agrees to it.
  • Ryan Miller created a new publication called “The Frontendian”, and it features one of the best explanations and guides to CORS I’ve come across so far.
  • The folks at Microsoft created a nice interactive demo page to show what Web Push Notifications can and should look like. If you haven’t gotten to grips with the technology yet, it’s a great primer to how it all works and how to build an interface that doesn’t disturb users.
  • Filepond is a JavaScript library for uploading files. It looks great and comes with a lot of adapters for React, Vue, Angular, and jQuery.
  • React 16.4 is out and brings quite a feature to the library: Pointer Events. They’ll make it easier to deal with user interactions and have been requested for a long time already.
The Frontendian
Inspired by the parallels between basic astrological ideas and push notification architecture, the team at Microsoft explains how to send push notifications to a user without needing the browser or app to be opened. (Image credit)

CSS

Work & Life

  • Anton Sten wrote about the moral implications for our apps. A meaningful explanation why the times of “move fast and break things” are definitely over as we’re dealing with Artificial Intelligence, social networks that affect peoples’ lives, and privacy matters enforced by GDPR.
  • Basecamp now has a new chart type to display a project’s status: the so-called “hill chart” adds a better context than a simple progress bar could ever do it.
  • Ben Werdmüller shares his thoughts about resumes and how they always fail to reflect who you are, what you do, and why you should be hired.

I hope you enjoyed this monthly update. The next one is scheduled for July 13th, so stay tuned. In the meantime, if you like what I do, please consider helping me fund the Web Development Reading List financially.

Have a great day!

— Anselm

Smashing Editorial
(cm)


View post:  

Monthly Web Development Update 6/2018: Complexity, DNS Over HTTPS, And Push Notifications

Thumbnail

Measuring Websites With Mobile-First Optimization Tools




Measuring Websites With Mobile-First Optimization Tools

Jon Raasch



Performance on mobile can be particularly challenging: underpowered devices, slow networks, and poor connections are some of those challenges. With more and more users migrating to mobile, the rewards for mobile optimization are great. Most workflows have already adopted mobile-first design and development strategies, and it’s time to apply a similar mindset to performance.

In this article, we’ll take a look at studies linking page speed to real-world metrics, and discuss the specific ways mobile performance impacts your site. Then we’ll explore benchmarking tools you can use to measure your website’s mobile performance. Finally, we’ll work with tools to help identify and remove the code debt that bloats and weighs down your site.

Responsive Configurators

How would you design a responsive car configurator? How would you deal with accessibility, navigation, real-time previews, interaction and performance? Let’s figure it out. Read article →

Why Performance Matters

The benefits of performance optimization are well-documented. In short, performance matters because users prefer faster websites. But it’s more than a qualitative assumption about user experience. There are a variety of studies that directly link reduced load times to increased conversion and revenue, such as the now decade-old Amazon study that showed each 100ms of latency led to a 1% drop in sales.

Page Speed, Bounce Rate & Conversion

In the data world, poor performance leads to an increased bounce rate. And in the mobile world that bounce rate may occur sooner than you think. A recent study shows that 53% of mobile users abandon a site that takes more than 3 seconds to load.

That means if your site loads in 3.5 seconds, over half of your potential users are leaving (and most likely visiting a competitor). That may be tough to swallow, but it is as much a problem as it is an opportunity. If you can get your site to load more quickly, you are potentially doubling your conversion. And if your conversion is even indirectly linked to profits, you’re doubling your revenue.

SEO And Social Media

Beyond reduced conversion, slow load times create secondary effects that diminish your inbound traffic. Search engines already use page speed in their ranking algorithms, bubbling faster sites to the top. Additionally, Google is specifically factoring mobile speed for mobile searches as of July 2018.

Social media outlets have begun factoring page speed in their algorithms as well. In August 2017, Facebook announced that it would roll out specific changes to the newsfeed algorithm for mobile devices. These changes include page speed as a factor, which means that slow websites will see a decline in Facebook impressions, and in turn a decline in visitors from that source.

Search engines and social media companies aren’t punishing slow websites on a whim, they’ve made a calculated decision to improve the experience for their users. If two websites have effectively the same content, wouldn’t you rather visit one that loads faster?

Many websites depend on search engines and social media for a large portion of their traffic. The slowest of these will have an exacerbated problem, with a reduced number of visitors coming to their site, and over half of those visitors subsequently abandoning.

If the prognosis sounds alarming, that’s because it is! But the good news is that there are a few concrete steps you can take to improve your page speeds. Even the slowest sites can get “sub three seconds” with a good strategy and some work.

Profiling And Benchmarking Tools

Before you begin optimizing, it’s a good idea to take a snapshot of your website’s performance. With profiling, you can determine how much progress you will need to make. Later, you can compare against this benchmark to quantify the speed improvements you make.

There are a number of tools that assess a website’s performance. But before you get started, it’s important to understand that no tool provides a perfect measurement of client-side performance. Devices, connection speeds, and web browsers all impact performance, and it is impossible to analyze all combinations. Additionally, any tool that runs on your personal device can only approximate the experience on a different device or connection.

In one sense, whichever tool you use can provide meaningful insights. As long as you use the same tool before and after, the comparison of each should provide a decent snapshot of performance changes. But certain tools are better than others.

In this section, we’ll walk through two tools that provide a profile of how well your website performs in a mobile environment.

Note: If can be difficult to benchmark an entire site, so I recommend that you choose one or two of your most important pages for benchmarking.

Lighthouse

Lighthouse audit tab


Lighthouse in the Google’s Web Developer Tools. (Large preview)

One of the more useful tools for profiling mobile performance is Google’s Lighthouse. It’s a nice starting point for optimization since it not only analyzes page performance but also provides insights into specific performance issues. Additionally, Lighthouse provides high-level suggestions for speed improvements.

Lighthouse is available in the Audits tab of the Chrome Developer Tools. To get started, open the page you want to optimize in Chrome Dev Tools and perform an audit. I typically perform all the audits, but for our purposes, you only need to check the ‘Performance’ checkbox:

Lighthouse audit selection


All the audits are useful, but we’ll only need the Performance audit. (Large preview)

Lighthouse focuses on mobile, so when you run the audit, Lighthouse will pop your page into the inspector’s responsive viewer and throttle the connection to simulate a mobile experience.

Lighthouse Reports

When the audit finishes, you’ll see an overall performance score, a timeline view of how the page rendered over time, as well as a variety of metrics:

Lighthouse performance audit results


In the performance audit, pay attention to the first meaningful paint. (Large preview)

It’s a lot of information, but one report to emphasize is the first meaningful paint, since that directly influences user bounce rates. You may notice that the tool doesn’t even list the total load time, and that’s because it rarely matters for user experience.

Mobile users expect a first view of the page very quickly, and it may be some time before they scroll to the lower content. In the timeline above, the first paint occurs quickly at 1.3s, then a full above-the-fold content paint occurs at 3.9s. The user can now engage with the above-the-fold content, and anything below-the-fold can take a few seconds longer to load.

Lighthouse’s first meaningful paint is a great metric for benchmarking, but also take a look at the opportunities section. This list helps to identify the key problem areas of your site. Keep these recommendations on your radar, since they may provide your biggest improvements.

Lighthouse Caveats

While Lighthouse provides great insights, it is important to bear in mind that it only simulates a mobile experience. The device is simulated in Chrome, and a mobile connection is simulated with throttling. Actual experiences will vary.

Additionally, you may notice that if you run the audit multiple times, you will get different reports. That’s again because it is simulating the experience, and variances in your device, connection, and the server will impact the results. That said, you can still use Lighthouse for benchmarking, but it is important that you run it several times. It is more relevant as a range of values than a single report.

WebPageTest

In order to get an idea of how quickly your page loads in an actual mobile device, use WebPageTest. One of the nice things about WebPageTest is that it tests on a variety of real devices. Additionally, it will perform the test a number of times and take the average to provide a more accurate benchmark.

To get started, navigate to WebPageTest.org, enter the URL for the page you want to test and then select the mobile device you’d like to use for testing. Also, open up the advanced settings and change the connection speed. I like testing at Fast 3G, because even when users are connected to LTE the connection speed is rarely LTE (#sad):

WebPageTest advanced settings form


WebPageTest provides actual mobile devices for profiling. (Large preview)

After submitting the test (and waiting for any queue), you’ll get a report on the speed of the page:

WebPageTest profiling results


In WebPageTest’s results, pay attention to the start render and first byte. (Large preview)

The summary view consists of a short list of metrics and links to timelines. Again, the value of the start render is more important than the load time. The first byte is useful for analyzing the server response speed. You can also dig into the more in-depth reports for additional insights.

Benchmarking

Now that you’ve profiled your page in Lighthouse and WebPageTest, it’s time to record the values. These benchmarks will provide a useful comparison as you optimize your page. If the metrics improve, your changes are worthwhile. If they stay static (or worse decline), you’ll need to rethink your strategy.

Lighthouse results are simulated which makes it less useful for benchmarking and more useful for in-depth reports and optimization suggestions. However, Lighthouse’s performance score and first meaningful paint are nice benchmarks so run it a few times and take the median for each.

WebPageTest’s values are more reliable for benchmarking since it tests on real devices, so these will be your primary benchmarks. Record the value for the first byte, start to render, and overall load time.

Bloat Reduction

Now that you’ve assessed the performance of your site, let’s take a look at a tool that can help reduce the size of your files. This tool can identify extra, unnecessary pieces of code that bloat your files and cause resources to be larger than they should.

In a perfect world, users would only download the code that they actually need. But the production and maintenance process can lead to unused artifacts in the codebase. Even the most diligent developers can forget to remove pieces of old CSS and JavaScript while making changes. Over time these bits of dead code accumulate and become unnecessary bloat.

Additionally, certain resources are intended to be cached and then used throughout multiple pages, such as a site-wide stylesheet. Site-wide resources often make sense, but how can you tell when a stylesheet is mostly underused?

The Coverage Tab

Fortunately, Chrome Developer Tools has a tool that helps assess the bloat in files: The Coverage tab. The Coverage tab analyzes code coverage as you navigate your site. It provides an interface that shows how much code in a given CSS or JS file is actually being used.

To access the Coverage tab, open up Chrome Developer Tools, and click on the three dots in the top right. Navigate to More Tools > Coverage.

Access the Coverage tab by clicking on More tools and then Coverage


The Coverage tab is a bit hidden in the web developer tools console. (Large preview)

Next, start instrumenting coverage by clicking the reload button on the right. That will reload the page and begin the code coverage analysis. It brings up a report similar to this:

The Coverage report identifies unused code


An example of a Coverage report. (Large preview)

Here, pay attention to the unused bytes:

The coverage report UI shows a breakdown of used and unused bytes


The unused bytes are represented by red lines. (Large preview)

This UI shows the amount of code that is currently unused, colored red. In this particular page, the first file shown is 73% bloat. You may see significant bloat at first, but it only represents the current render. Change your screen size and you should see the CSS coverage go up as media queries get applied. Open any interactive elements like modals and toggles, and it should go up further.

Once you’ve activated every view, you will have an idea of how much code you are actually using. Next, you can dig into the report further to find out just which pieces of code are unused, simply click on one of the resources and look in the main window:

Detail view of a file in the Coverage report, showing which pieces of code aren’t being used


Click on a file in the Coverage report to see the specific portions of unused code. (Large preview)

In this CSS file, look at the highlights to the left of each ruleset; green indicates used code and red indicates bloat. If you are building a single page app or using specialized resources for this particular page, you may be inclined to go in and remove this garbage. But don’t be too hasty. You should definitely remove dead code, but be careful to make sure that you haven’t missed a breakpoint or interactive element.

Next Steps

In this article, we’ve shown the quantitative benefits of optimizing page speed. I hope you’re convinced, and that you have the tools you need to convince others. We’ve also set a minimum goal for mobile page speed: sub three seconds.

To hit this goal, it’s important that you prioritize the highest impact optimizations first. There are a lot of resources online that can help define this roadmap, such as this checklist. Lighthouse can also be a great tool for identifying specific issues in your codebase, so I encourage you to tackle those bottlenecks first. Sometimes the smallest optimizations can have the biggest impact.

Smashing Editorial
(da, lf, ra, yk, il)


Visit link: 

Measuring Websites With Mobile-First Optimization Tools

Thumbnail

Taking A Look At The State Of Progressive Images And User Perception

“Progressive Images” is a hot topic these days. We often come across articles explaining techniques on how to avoid showing an empty space where an image will load. Medium and Facebook are examples of websites and mobile apps that apply this pattern.
I recently wrote about different ways to use SVG as placeholders, and this year’s PerfPlanet’s Performance Calendar included two posts that further describe SQIP, a technique based on blurred SVGs: Progressive Image Loading using Intersection Observer and SQIP and SQIP — Vague Vectors for Performant Previews.

Link to original – 

Taking A Look At The State Of Progressive Images And User Perception

The Front-End Performance Challenge: Winner And Results

A few weeks ago, we asked our readers and the community to use everything they could to make their websites and projects perform blazingly fast. Today, we’re thrilled to show off the results of this challenge and announce the winner who will be awarded with some smashing prizes indeed!
What prizes, you ask? The winner wins a roundtrip flight to London, full accommodation in a fancy hotel, a ticket to SmashingConf London 2018, and last but not least, a Smashing workshop of their choice.

See the original post:  

The Front-End Performance Challenge: Winner And Results

Designing For A Browserless Web

What happens when we take the web browser out of web browsing? Google’s new “Add to Homescreen” feature delivers fast, focused web experiences that are indistinguishable from those of a native app. What can designers learn from the successes of early adopters such as Twitter, and how can we leverage app-like design patterns to tackle this brand new set of user experience challenges?
The “Add to Homescreen” installation process, as shown on Google Chrome Developer’s mobile website (Image source) (Large preview) We’ve seen debates on the topic of native versus web experiences.

Visit site – 

Designing For A Browserless Web

60 Travel Icons To Awaken Your Wanderlust (Freebie)

Summer might be over, but the memories of the places you’ve visited and the people you’ve met remain. No matter if you explored an exotic country, packed your car for a road trip or took out the hiking boots to discover the nature around you — traveling is a great opportunity to discover new places, gain a fresh view on things, and make lasting experiences.
To keep the essence of summer alive a bit longer, the creative minds at AgenteStudio dedicated an entire icon set to traveling.

View post:

60 Travel Icons To Awaken Your Wanderlust (Freebie)

Web Development Reading List #184: New Library Updates, Page Load Performance, And Continuance

Our lives are in constant change, we never stop developing and evolving — our bodies, our minds, our views. And today’s technology supports us in doing that: We can access a lot more information as the generations before us, and with that, we have a variety of new possibilities to grow and develop our personalities.
We can see how work environments change, for example, we see resistance towards change and new methods, but slowly and over time, humanity is changing their overall behavior.

Continue reading here – 

Web Development Reading List #184: New Library Updates, Page Load Performance, And Continuance

Thumbnail

Tips And Tricks For Testing WordPress Themes

Whether you offer free or premium themes, testing should be a major part of your development process. By planning in advance, you can foster a development environment that deters some bugs by design and that helps you prevent others. The aim of this article is to share some of the tricks I use personally during and after development to achieve a bug-free product.
This article is split into three distinct sections:

View original article – 

Tips And Tricks For Testing WordPress Themes