How Podac Loads Images 95x Faster

How Podac Loads Images 95x Faster

And no it’s not using magic, just simple Chrome trickery

Over the past year, a fun little project of mine has been constructing an elegant and efficient new tab page. Ever since I started using Chrome I was underwhelmed by the default new tab page: comprising only of a few recent links (most of which I never actually needed) and the Google search bar. What I wanted to have on that page were my key bookmarks, emboldened by a few beautiful backgrounds, surely that’s not too hard to ask for.

Using React, I mustered up a simple background component that would first fetch images from a personal collection of mine on Unsplash, before rendering them into view.

import React from "react";

export default class Background extends React.Component {
  componentDidMount() {
    let img = new Image();

    this.fetchUnsplashImage().then(unsplash => {
      let src = unsplash.urls.custom;
      img.onload = () => (this.refs.image.src = src);
      img.src = src;
    });
  }

  fetchUnsplashImage = function() {
    let url = "https://MYPROXY.net/collections=3688490";
    let w = `&w=${window.innerWidth}`;
    let h = `&h=${window.innerHeight}`;

    return fetch(url + w + h).then(res => res.json());
  };

  render() {
    return (
      <div id="container">
        <img id="image" ref="image" alt="" />
      </div>
    );
  }
}

However, there is a pretty obvious problem with doing this: the load time. Running an experiment, I worked out the average load time to fetch the Unsplash image was 395ms, and another 792ms to actually load the image and render it into view. This was happening because upon load, the component first had to send a API call to Unsplash, wait for a response, before finally sending another request to load the returned image URL. What this meant was there was a lot of unnecessary load time, which for a new tab page was unacceptable.

reactjs fast-loading javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

ReactJS: The Javascript Developer’s Guide

This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.

JavaScript Shopping Cart - Javascript Project for Beginners

JavaScript Shopping Cart - javascript shopping cart tutorial for beginnersBuy me a coffee 🍺 https://www.paypal.com/paypalme/ziddahSource Code: https://bit....

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

What is ECMAScript and How is it Different From JavaScript?

Many times developers use JavaScript and ECMAScript synonymously for each other. Though they are very closely linked to each other, it does not mean they are the same thing.here is a complete story on the history of JavaScript and how it came into existence. To cut the long story short, ECMA in ECMAScript refers to Europen Computer Manufacturers Association to which JavaScript 1.1 was submitted for standardization back in the year 1997.

Simple Skeleton Loading with Reactjs

react-skeleton-loading Simple Skeleton Loading with Reactjs