DEV Community

Serhii
Serhii

Posted on

1 1

Tips I discovered this week (for web developers)

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" />
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more