How to use mediapipe face mesh on pictures

Question

I modified the official example and tried to put the face mesh on the picture

https://google.github.io/mediapipe/solutions/face_mesh.html#javascript-solution-api

const faceMesh = new FaceMesh({locateFile: (file) => {
    return `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/${file}`;
  }});


  faceMesh.setOptions({
    maxNumFaces: 1,
    refineLandmarks: true,
    minDetectionConfidence: 0.5,
    minTrackingConfidence: 0.5
  });

  faceMesh.onResults(onResults);

  async function render(image) {
    await faceMesh.send({
      image: image
    });
  }

function main() {
  var image = new Image();
  image.crossOrigin = "anonymous";
  image.src = "https://media.istockphoto.com/photos/portrait-of-mature-hispanic-man-picture-id805012064?b=1&k=20&m=805012064&s=170667a&w=0&h=7jWoHlRITekFJe0gSCx6CVbpqRWNhGH_KyNH782sqs4=";
  canvasElement.width = image.width;
  canvasElement.height = image.height;
  image.onload = function() {
    render(image);
  };
}

main();

succeeded, but images are slow to load and warnings appear

I0722 15:38:46.392000       1 gl_context_webgl.cc:151] Successfully created a WebGL context with major version 3 and handle 3

I0722 15:38:46.396000       1 gl_context.cc:351] GL version: 3.0 (OpenGL ES 3.0 (WebGL 2.0 (OpenGL ES 3.0 Chromium)))

W0722 15:38:46.396000       1 gl_context.cc:821] OpenGL error checking is disabled

how to improve this question. Thanks in advance.