Tag Archives: image optimization

Performance Optimization of Web Pages: NaukriGulf

New Naukrigulf English Desktop Homepage is designed with the goal of providing better interface to our users. Of course, the new site comes with eye-pleasing aesthetics, enhanced usability and is simply faster. Lets first look at some speed-metrics to see really how fast our homepage has become. Benchmark report of Previous Homepage vs New Homepage Old Homepage New Homepage Homepage TTFB = 1.17 TTFB = 1.02 *TTFB : Time To First byte   Let us see what we did to achieve this Low Resolution Images Before Page Load and High Resolution Image After Page... Read More

Optimizing CSS background images using WebP

webp In continuation to our first article on WebP “Optimizing web pages using WebP”, we have extended our approach to display WebP images with the help of CSS background. As we earlier stated that Naukrigulf.com is one of the first few sites on the web to use WebP images format to serve banners. Now we are serving our background images in WebP format as well. In this approach we have two solutions to call background WebP images. - Using CSS Parent-Child Relationship - Using @ queries. CSS Parent-Child Relationship - In this approach we have to check user's browser and assign a class... Read More

Optimizing web pages using WebP

“A picture is worth thousand words” --Napoléon Bonaparte When it comes to web page optimization. Decreasing the image size on your web page make a big difference as it's the major chunk that consume user bandwidth. According to data from HTTP Archive( http://httparchive.org/ ) For an average web page, image accounts for ... 63% of the transferred bytes for desktop sites 69 % of the transferred bytes for mobile sites. Source: http://httparchive.org/ And the bad news is, its increasing over time.The reason is increasing Hi Dpi devices over time. Source:... Read More