Hello everyone, I’m creating a lot of new projects every day and sharing them ?, including things you’ll love to know about javascript and web Developer, Designer. Subscribe to the channel so you don’t miss it 
.
#javascript #code #css
—–
Theme VsCode I’m Using:
Featured video series
React Js Tutorial:
Design Slider – Carousel web:
E-Commerce Web Coding:
Design Parallax SCrolling Effect:
Web Applycation Code:
Javascript Tutorial:
CSS Tutorial:
Many other impressive videos:
Contact With me:
Instagram:
Email: hohoang.dev@gmail.com
Donate me:
Thank you so much ?
Here, I share all my knowledge about Developer and Web Design including languages such as HTML, CSS, SASS, Javascript, Vue, React, Bootstrap, Tailwind along with clean code techniques and UI UX Design.
In the next few hours, there will be an extremely high-quality video published, Let's wait together
Welcome to 2010! Lolz. Just using lazy loading is ironically LAZY! (*real advice below)
What are you doing, Just going through the mozzila docs page by page? I can tell because you don't actually offer any actual web development advice and sound like the docs! Are you even a developer??
*For those wanting better advice: yes use lazy loading on images Below the Fold. But before you do, check out your jpeg/PNG to make sure you have the right format for the image you have – photos = lots of colours so jpeg, shapes and less Colors = PNG.
Look at the mb of the file, too big?, open in photopea, save as jpeg and reduce to about 80% quality – thank me later.
Then check the dimensions of the image – you do not need an 8k photo to place into a 600px div! (~5mb Vs 100kb) – Convert all images to webp and use picture with IMG tags instead of just IMG tags. Create multiple versions of both jpeg and webp versions – a thumb, medium and large size. Learn to use media queries to load the thumb first and then reload upto large for desktop views! This will actually make your site more efficient and actually load the whole page quicker than simply using lazy loading. You will also save on costs if you pay by usage quotas and your users will have more data on their plan to browse more!
AI Slop channel and it has 160K subscribers. This world has gone to shit.
Please keep doing this, i wanna know how professionals optimize their websites.
omg so awesome.
Thank you
This is what Next/Image do by default?
fantastisch. vielen dank. wieder ein beweis dafur dass man wirklich keine scheiss frameworks ode r3rd party libs braucht. einfach pure standard web technologies. damit geht alles einfach.
Thx! Will try
where did you get the images that you are using in this video ??
Doing the lords work, thank you <3
thnk u little boy
Increasing load speed = switch to bun and Preact
I'm using Edge, and the 'Network' feature isn't available.
It is real important and cool!!!
it is impressive you are right!
buddy this is too basic, You used to give amazing tips
Goood video. new subscriber
Yo!!
What's with the thumbnail man
This reduces server load and egress costs. But for slow mobile data connections, this ain't practical. Adding paging system is the way to go so that when user scrolls 70-80% of page, next page loads in background such that when user sees the content, it's just there with infinite scrolling.
thank you, great info
This knowledge-transfers makes me high – thanks!
Another great and helpful vid, thanks.
A small detail:
you can use something like tinypng(or other image compressor) to make images less weight. Then you can use picture>source tags to load pages based on device viewport size. And I'm not sure why but "web" formats like webp/avif are recommended for web
Btw, a lot of modern frameworks already have built-in image components and they can compress it automatically by display sizes(ie astro/svelte)
Are you on drugs or something? That's nothing new at all.
Hi Lun Dev,
Can I get your setting.json of your vscode :<
Great
Lundev always Awesome 
I'm a react developer and in react we say this is a lazy loading feature which improves the performance of our Application and doesn't apply load on the app while loading everything
Seeing you after many days
Happy to see new Video
Yes, page speed performance is important today, especially if you want to get ranked high in the search results. Sadly, this is a game where some contenders cheat with loaded a blank page first, get an ultra-high performance then later load the real website data.
Happy you're back with a new video, and I highly hope everything is fine, as I never got a reply on message I had sent you.
Bullshit. Dont lazyload the first visible images, dont use 100% w and h.
I have a side question –> How did you select all image tags and place the cursor at the end to write "loading = "lazy" in all of them at once
I only know of holding "Alt" and clicking each line one by one but little shortcuts like that are so helpful
Thanks
the Goat is back
1:29
Nice video… Insightful
"the system needs to know how big the images are to kkep the space"…. but is valid to put width 100 percent and height 100 percent (or 100 viewport height) for images inside a blog post or an article (dynamic content)? we can define there the width like 100 percent of the article container, but we can't define height (without breaking the aspect ratio of them)
oh, thuộc tính loading="lazy" mới à anh, chưa support safari phải
I was amazed and I was proud that I subscribed you
Insightful. Thanks.
Welcome again
, l miss your video
<style>
img {
width: 100%;
height: 100vh;
}
</style>
<img src="#" alt="#" loading="lazy">
Anytime
Impressive
I almost missed this crucial knowledge because of that thumbnail
please change the thumbnail
Do shorts bro
Amazing! And so it even loads the images just before the window view so the visitors never see images missing or loading rt?