- Explicit Width and Height: When you include images in your web pages, it’s essential to specify the width and height attributes in the HTML code. This helps the browser allocate space for the image while it’s loading. Without these attributes, the browser may have to reflow the page when the image loads, causing a performance hit and potentially creating a poor user experience.
- GIF to MP4: GIFs are often used for animations, but they tend to be larger in file size and have lower quality compared to modern video formats like MP4. Converting GIFs to MP4 videos can significantly reduce the file size and improve loading times. This is especially important when dealing with animations on web pages.
- Lazy Load: Lazy loading is a technique where you defer the loading of non-essential images until they are about to come into the user’s viewport. This can greatly speed up the initial page load because the browser doesn’t have to load all images at once, especially those that aren’t immediately visible to the user. Lazy loading is typically implemented with JavaScript and HTML attributes.
- Cache CDN: Caching is a mechanism that allows the browser to store resources like images, stylesheets, and scripts locally, so they don’t need to be reloaded from the web server every time a user visits a page. A Content Delivery Network (CDN) is a network of servers distributed across the globe to serve content to users from a location that’s geographically closer to them. Caching and CDNs can dramatically reduce loading times by delivering content faster and reducing server load.
- Layout Shift: Layout shift is a metric that measures how much content on a webpage moves or shifts after it initially loads. It’s important to minimize layout shifts because they can be jarring for users and negatively impact user experience. One common cause of layout shifts is images loading without specified dimensions, causing the content around them to reflow. Properly specifying image dimensions (as mentioned in the first tip) can help prevent layout shifts.
Optimizing your web performance with these tips, especially concerning image formats, can lead to faster loading times, better user experiences, and improved search engine rankings.
- Need webp Images instead of Jpeg or PNG
- Need Mp4 for GIF