loading...

Tips I discovered this week (for web developers)

sergchr profile image Sergiy ・2 min read

Lazy image loading

In case you need to postpone image loading. For example, you have a page that has a list of 10+ images, let's say you describe the details of your recent travel in a blog. When your reader wants to read the article, 10+ images definitely will affect a page loading time.
You can write a logic by yourself, using Intersection Observer API, as well as using ready-made solutions.
But Chrome 75+ has native support for loading attribute:

<img src="travel.jpg" loading="lazy" alt="Paris castle" />

That means, loading="lazy" will defer image loading until it become visible on the screen.
Blog post from Lighthouse team

Performance audit in the CI process

The Lighthouse team has introduced a tool that can audit every commit for performance, accessibility issues. Try their online auditing tool if you haven't yet.

Puppeteer

A tool can automate many things you do manually, for example:

  • generate screenshots of websites, saving a page as PDF;
  • automate UI testing by providing API to make mouse clicks, form submissions, dealing with inputs, etc.;
  • crawl SPAs;
  • test Chrome extensions;

Pre-loading links

Quicklink pre-loads links in a browser idle time when a link becomes reachable for the user. The tool also verifies whether a user has a slow connection, if so - it will not pre-load a link.

Packages

city-roads

It visualizes all city roads in a particular city, uses OpenStreetMap, renders hand-written like city paths. Source

OpenLayers

One more package to render maps, easy to customize. Source

Posted on by:

sergchr profile

Sergiy

@sergchr

Software developer; mostly Javascript

Discussion

markdown guide