loading

Google Lighthouse for Measuring Mobile Site Speed

Posted on by Mario

Lighthouse is a tool created by Google and was originally meant to audit Progressive Web Apps (PWA). In general, this tool will do four audits for accessibility, performance, progressive web apps and an extended list of best practices. With a flaky 3G connection on a slightly underpowered device, Google Lighthouse stimulates your mobile site visitors. The main purpose of Google Lighthouse is to increase a site speed through measuring page speed from a different, more realistic angle. This surely makes Lighthouse very recommended to any web developers and SEO services who aims for a faster loading Mobile site speed.  However, some people are more familiar with PageSpeed instead of Google Lighthouse, so what’s the difference between Page Speed Insights and Google Lighthouse?

PageSpeed Insights vs.Google Lighthouse

Right now, PageSpeed Insights is still the most popular analysis tool which can provide you with a nice score and a list of possible improvements. However, it hardly gives you an idea of the perceived loading speed of your site. Moreover, it also states that your site doesn’t follow the rules and therefore, it is slow for everyone. Here are the two most important things PageSpeed Insights looks at:

  • Time to above-the-fold load: This is the time that it takes to fully render the above-the-fold content of a page from the moment a user requests your page.
  • Time to full page load: This is the time that it takes to fully render the complete content of a page from the moment a user requests your page.

On the other hand, Lighthouse focuses on practical approach where it puts user experience front and center. Since it visits your site over a throttled 3G connection, it can predict what a real visitor would experience. Moreover, Lighthouse will check how and when it responds to input while PageSpeed Insights will just load your site. No wonder Lighthouse can easily find the exact moment when your content is ready to use.

What to Look for in Lighthouse Results?

The important point that users want to see and feel is that your site must be fast and must feel fast. In other words, users should be able to interact with your content as soon as possible. This is absolutely important for your SEO; therefore, you need to fix these issues. There are several metrics that Lighthouse uses such as follows:

  • First meaningful paint: This metric will determine how long content should appear on screen. The lower the score, the faster the page appears.
  • First interactive: it will also measure if a page is minimally interactive.
  • Consistently interactive: This measures when a page is fully interactive.
  • Perceptual Speed Index: This shows how quickly the contents of a page are visibly populated which also comes with a target loading time of <1,250 ms.
  • Estimated latency input: This measures how long your page will respond to user input.
  • Critical requests chain: It shows what resources are needed to initially render this page.

Even though Lighthouse is not as popular as PageSpeed, its functionality cannot be ignored. In fact, this is a worth to try tool for those who want to analyze their site speed. In fact, it is more fine-grained and gives you immediate feedback based on real-world usage.

How to Design for Short Attention Spans

Posted on by Mario

design-for-short-attention-spans

The number of mobile internet users has exceeded the number of desktop-only users, no wonder many businesses want to make their business becomes more mobile. If you are an apps developer or a web designer, you should understand that mobile users characteristic are likely short attention spans. Therefore, it is important to create business app that meets this characteristic. In this article, we present several tricks that can be used to make your apps fit the short attention spans, such as follow:

SPEED THINGS UP

Nowadays, having a lightning fast app is a must thing to have, since a research of the Jampp study reveals that people spend less than an average of 60 seconds on mobile apps. In fact, a three seconds delay in website load time will result in 40 percent of users abandoning your website. The very first step is to make your website and app lightning fast. Make it easy for people to take the most basic action in your app, or on your website, in less than 60 seconds.

The most common mistake that many app developers do is to create app with lots of unnecessary features in the hopes that users will find it interesting while the fact is every web developers should avoid making complicated apps and focusing on performing the most basic tasks in your apps in seconds.

If waiting is avoidable, you can use bar of indication of progress to give your users sense of certainty. This trick has been successfully proven and it is used by many major sites. This is how you change everything. In fact, this method is so effective that 75% of people prefer to have one.

AVOID LOADING SPINNERS AS MUCH AS YOU CAN

Opposite from completeness meters, loading spinners will provide you with bad user experience instead of bringing good impact. No matter how fast your app or website is, it won’t make much of a difference if people perceive it to be slow. Loading spinners doesn’t give users an exact indication of how much progress they’ve made and how long they have to wait, therefore it is not preferable to be used as a time indicator.

TAKE ADVANTAGE OF BACKGROUND LOADING

Instagram is the best example of making actions appear seamless to users. When a user attempts to upload an image that should generally take 30 seconds to load, Instagram makes it appears as if the image loads instantly. This is because while a user is still captioning the image, adding title and tags, Instagram is slowly uploading the image in the background which causes the image is posted automatically, by the time the user actually clicks “share”. This process has made Instagram populary known as a very fast app.

 USE LAZY LOADING

It goes without saying that mostly people will only use half of the functions; therefore, loading each and every function will cause slower user experience. But don’t worry, as you can use lazy loading to help you delay the loading of certain objects until they are needed; for example, on a website that heavily uses images, it is expected that the images will contribute to a delay in site load times.

Moreover, with lazy loading, you can postpone the loading until users scroll to where the images are which actually save users a lot of initial load time that result in creating a perception that your site is much faster than it really is.