Mi sitio web es simple de una página. una gran imagen de página completa y texto de 10 líneas y algunos enlaces como política de privacidad, términos, etc.
Entonces, cuando mi sitio web se carga. el texto se carga primero antes de la imagen, lo que disminuye la experiencia del usuario. quiero que la imagen se cargue primero antes que el otro contenido de la página.
Mi código :
<link rel="preload" href="//www.example.com/one/img/ckd.png" as="image"> <link rel="prefetch" href="//www.example.com/one/img/ckd.png" />Puede comenzar con texto oculto y, al onload la imagen, hacerla visible. Nota: esto podría tener un impacto negativo en la prueba de PageSpeed porque aumentaría el tiempo de contenido. Pruébelo con el acelerador en la red (Devtools, pestaña Red) y en la pestaña Faro.
<link rel="preload" href="https://picsum.photos/id/237/200/300" as="image"> <link rel="prefetch" href="https://picsum.photos/id/237/200/300" /> <style> body.hide-text h1 { visibility: hidden } h1 { font-size: 30px; color: white; padding: 50px; } img { position: absolute; z-index: -1; } </style> <body class="hide-text"> <img src="https://picsum.photos/id/237/400/300" onload="show_text()"> <h1>hello world</h1> <script> function show_text() { document.body.classList.remove("hide-text"); } </script> </body>