Html Question posted in
Some basic documentation can be found here.

how to make webpage load faster with HTML

I have been working on a web project with a large amount of images and videos on web site.After hosting it into a server it can be slow down the page to load because of large amount of images.

How can i prevent it?.Is there any way to load image or video after loading my web page with HTML or Javascript ?

Tags:

2

Answers


  1. 0

    There are tons of ways dealing with images and optimize them, the approach below is just one of them:

    You can use lazy loading for your images, so images would load only when needed and close to the user’s viewport.

    That way, it won’t affect the load & blocking times of your site.
    You can do it this way:

    <img loading="lazy" src="image.jpg" alt="..." />

    Read more about the lazy loading approach at the MDN Docs

    Login or Signup to reply.
  2. 0

    Lazy Loading

    • For Images: Use the loading="lazy" attribute in your tags.

    ex:

    <img src="image.jpg" loading="lazy" alt="description">
    • For videos: You might need to use JavaScript for lazy loading videos.

    Compress Images and maybe use moderns formats WebP;

    Maybe try to use different image sizes for different screen sizes using the element or srcset attribute.

    <img srcset="small-image.jpg 500w, medium-image.jpg 1000w, large-image.jpg 1500w" src="medium-image.jpg" alt="description">

    Host your images and videos on a CDNs.

    For Javascript: Use asynchronous Loading

    If you have JavaScript files that are not essential for the initial page load, load them asynchronously.

    <script src="yourscript.js" async></script>

    For essential assets, you can use to instruct the browser to load them early in the page load process.

    <link rel="preload" href="important-asset.jpg" as="image">

    And maybe you can try to reduce the number of HTTP requests by combining files, using CSS sprites, and reducing the use of external scripts and fonts.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search