My website is simple one page. a big full page image and 10 line text and some links like privacy policy, terms etc.
So, when my website load. text load first before image which decrease the user experience. i want image load first before the other content of the page.
My Code :
<link rel="preload" href="//www.example.com/one/img/ckd.png" as="image">
<link rel="prefetch" href="//www.example.com/one/img/ckd.png" />
You can start with hidden text, and onload of the image, make it visible. Note: this might have negative impact on PageSpeed test because time to content would be increased. Test this with throttle on network (Devtools, Network tab) and on Lighthouse tab.
<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>