DEV Community: Shreerang Patwardhan

Binged 📺

Shreerang Patwardhan — Wed, 18 Dec 2019 16:37:38 +0000

I built a small side project - Binged 📺 using which you can find out how much time you have spent watching Netflix in 2019. It's that time of the year when you start making resolutions for the next year and if reducing screen time is on the top of your mind then head over to https://binged.herokuapp.com to find out how much you have Binged.

Share it with friends and let me know what you think of the product. Feedback on code is also welcome 😀

Day #4 of #30DaysOfWebPerf

Shreerang Patwardhan — Fri, 29 Nov 2019 20:30:31 +0000

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

Day 4 of #30DaysOfWebPerf - As we continue to explore ways to improve site speed by improving image delivery🚚, let us look into one very popular method of doing so - Domain Sharding. We will also explore the benefits of HTTP2 and see how these 2 play together #webperf #webdev

19:14 PM - 29 Nov 2019

0 2

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

What is domain sharding? You may already know this, but browsers have a limit on concurrent connections for each hostname. Domain sharding is a method used to increase the number of simultaneously downloaded resources for a website. Images from etondigital.com/domain-shardin…

19:14 PM - 29 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

1 other benefit you get out of domain sharding is being able to deliver images, CSS and JS files from a 🍪-less domain. This reduces the size of the response headers drastically as there are no cookies sent over the wire. This technique has proven to improve performance ~30%.

19:14 PM - 29 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

Some sites that are successfully using domain sharding include @Macys, @Flipkart, @Rakuten, @BestBuy, @Bloomingdales and many more... In the example from Macy's mobile homepage, you will notice that they are leveraging the benefits of both domain sharding and a 🍪-less domain.

19:28 PM - 29 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

Domain sharding does increase the time for DNS lookup to the new domain. However, this can be mitigated with preconnect. Preconnect allows the browser to set up early connections before an HTTP request is actually sent to the server.

<link href='' rel='preconnect' crossorigin>

19:28 PM - 29 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

Domain sharding definitely seems to be promising, but then is it relevant today when we have HTTP2? Funny you should ask. Let's first see what value HTTP2 gets to the table. This article - developers.google.com/web/fundamenta… details everything you need to know about #HTTP2 #webdev #webperf

19:50 PM - 29 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

One of the major benefits that #http2 gets to the table is multiplexing which is what we were achieving with domain sharding in http1.1. Then do we need domain sharding anymore? This article helps you understand the benefits of HTTP2 -medium.com/@jacobtan/unde…

19:50 PM - 29 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

This leaves us with the Cookies being sent as part of the headers. #http2 solves this for you as well with header compression using #hpack HTTP/2 uses an index table, which stores the headers received from the first request it handles. #optimization #webperf #webdeveloper

19:50 PM - 29 Nov 2019

0 1

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

Subsequent requests then only have to send the index of the duplicate header, opposed to the full textual value. Unique headers or headers that have changed are sent as normal. #optimization #http2 #webperf #30daysofwebperf

19:50 PM - 29 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

So now the million dollar question - Do we need #DomainSharding with #http2? Most likely NOT. If you have HTTP2 enabled correctly for your domain on the CDN/server, you will get all the performance enhancements of domain sharding without breaking a sweat😅 #perfnow

20:23 PM - 29 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

That's a wrap for day 4 of #30DaysOfWebPerf If you do not have #http2 enabled go do it now! It will be absolutely worth it. To learn more about #webperf and share your thoughts on it, continue to follow me here on #Twitter or on @ThePracticalDev at dev.to/shreerangp/30d… 🐦

20:23 PM - 29 Nov 2019

0 1

Day #3 of #30DaysOfWebPerf

Shreerang Patwardhan — Sun, 24 Nov 2019 00:52:50 +0000

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

Day 3 of #30DaysOfWebPerf - Let's look at why fast site speed matters and more importantly how impactful it really is. At the end of the day if your user cannot get to that #amazing blog post or cannot checkout from your #ecommerce shop then site speed does not matter. #ux

00:10 AM - 24 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

If ⬆️site speed ≠ ⬆️revenue or click rate then what's the point if there is no #ROI? In this thread we will look into how site speed, web performance and site revenue are all tied together. Let's look at a few tools that help you estimate your potential #ROI in site speed gains.

00:10 AM - 24 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

If you are using @Akamai as your #cdn then you most likely have access to their #awesome performance measurement tool #mPulse in which you will find the even more exciting #WhatIf tool.

00:22 AM - 24 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

As the name suggests this tool helps you answer the question - What if my site speed improved by x seconds how would it affect my site's revenue? This clearly indicates that site speed is directly proportional to increased revenue. #perf

⬆️site speed === ⬆️revenue or click rate

00:22 AM - 24 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

You can find out more about the @Akamai's #WhatIf tool here in this article at developer.akamai.com/blog/2018/11/2…

00:29 AM - 24 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

I am pretty sure #googleanalytics and #AdobeAnalytics must have a pretty similar tool. I have not explored those options, so if you have please share your experience here. #whatif #revenue

00:22 AM - 24 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

These tools above clearly demonstrate the impact fast sites have on your business revenue. What else is impacted by a fast site. #SEO. Faster sites are ranked better after the "Speed Update" @Google rolled out to their search engine as described here - webmasters.googleblog.com/2018/01/using-…

00:29 AM - 24 Nov 2019

1 1

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

If you are looking for a more easier option, there is this amazing tool #TestMySite by @ThinkwithGoogle - thinkwithgoogle.com/feature/testmy… which helps you evaluate the impact a faster site can have on your business. #webperf #30DaysOfWebPerf

00:22 AM - 24 Nov 2019

0 1

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

Eg.: Let's assume that you have a site with #sitespeed of about 3.4s with 1000K monthly visitors, converting at a rate of 1.2% with #AOV of $103. By improving the site speed by just a second, you might see a potential lift of over $1000K🤯Now that is what I call an #Impact

00:22 AM - 24 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

What I am not aware of, and this is purely because of no experience in the field of #SEO is, how much time does it actually take to see a lift in #SEO after the site speed improves. Tag somebody who might be able to shed some light on this topic; @SEO maybe🤷‍♂️

00:29 AM - 24 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

@SEO What else is impacted by fast sites? Your Brand Reputation. #reputation is like a double edged sword. Once you create a bad reputation for your site, it is very hard to #shakeoff & on the flip side, once you create a good reputation, then it is even more difficult to maintain it!

00:36 AM - 24 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

With users getting used to a certain level of speed on sites they commonly use; when they visit your's and if it is not fast enough or better, you are bound to loose your customer/user. #UserExperience This not only means loss of revenue, but also a loss of opportunity.

00:36 AM - 24 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

If you want your users/customers to stay longer on your sites (think ⬇️bounce rates and ⬇️exit rates), you need to make your site fast. A customer once lost is very difficult to get back. As the saying goes - "Opportunity knocks only once. Make the best of it". #webdev #webperf

00:36 AM - 24 Nov 2019

0 1

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

I believe that's it for day 3 of #30DaysOfWebPerf. I hope you see how impactful fast sites actually are to your brand and business. Make sure you measure the potential impact to revenue caused by your next performance enhancement, before you present it to your team! #BePrepared

00:41 AM - 24 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

A picture speaks a 1000 words and so do a million dollars monthly! Show them the #impact If you are one of those who gets excited by the big 5 days, make sure you look at tools like the ones I shared today and see how impactful your speed enhancement change might have been ❤️

00:41 AM - 24 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

Continue to follow me here on #Twitter or on @ThePracticalDev at dev.to/shreerangp for more insights into improving #web #performance Thoughts and comments are always welcome! Share your experience with site speed enhancements. Let's make the #web faster together!

00:44 AM - 24 Nov 2019

0 0

Day #2 of #30DaysOfWebPerf

Shreerang Patwardhan — Fri, 22 Nov 2019 23:43:59 +0000

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

Day 2 of #30DaysOfPerf - Delivering optimized images

Yesterday we looked at image lazy loading as a way to improve the site speed significantly - almost by ~40+%. What more can we do to improve our site speed. Delivering optimized images goes a long way and we will see how!

23:31 PM - 22 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

Optimizing web images is a process of delivering high-quality images in the right format, dimension, size, and resolution while keeping the smallest possible size.
The #dog image if optimized, without loosing quality will be 14% less heavy✅🤯
Image by pixabay.com/images/id-2785…

23:31 PM - 22 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

#jpeg, #png, #webp, #jpeg2000, #jpegxr, #gif & #tiff are all different types of image format each using a different image compression algorithm which determines the size of the image. Again, always remember, when it comes to performance enhancement, "Less is Better". #minimalist

23:31 PM - 22 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

Delivering the right image format is critical when it comes to delivering #optimized images on your site. Not all modern formats are supported on all browsers. So always remember to have a #jpg or #png fallback. #webdev #webdevelopment

23:31 PM - 22 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

Now let's talk about how we go about optimizing these images. You can do it manually for #webp, though not sustainable, if you have a large number of images, but this article here - web.dev/serve-images-w… talks of a process to reliably do it.

23:31 PM - 22 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

There is also a #GithubAction that you can set up - github.com/marketplace/ac… that optimizes your existing images. #imageoptimization #images

23:31 PM - 22 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

On a larger enterprise level, you can use services provided by @Akamai, @Optimizely, @fastly or @ImagizerEngine and multiple others am not aware of. These services do the heavy lifting🏋️‍♂️for you and generate the optimized images based on your requirements and on-the-fly mostly.

23:31 PM - 22 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

Serving optimized images in the right image format can easily make your pages about 20% faster. Image optimization is an important aspect of performance optimization for your sites and you should absolutely evaluate it and invest in it. #30daysofwebperf

23:31 PM - 22 Nov 2019

0 0

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

For those obsessed with improving their site's @Google #Lighthouse score, serving optimized images will also help you fix the "Serve images in next-gen format" error/warning ⚠️ thereby improving the score. #webperf #Perfect

23:36 PM - 22 Nov 2019

0 1

Shreerang Patwardhan 👨🏻‍💻👨🏻‍💼🏸🇮🇳🇺🇸

@shreerangp

That's it for Day #2 of #30DaysOfWebPerf. Continue to follow me for more insights into improving #web #performance Please share your thoughts and experiences with image lazy loading. Also comments and feedback are highly appreciated. #perfmatters #UserExperience #ux #users

23:36 PM - 22 Nov 2019

0 0

Day #1 of #30DaysOfWebPerf

Shreerang Patwardhan — Fri, 22 Nov 2019 05:49:19 +0000

// Detect dark theme var iframe = document.getElementById('tweet-1197750297310793729-592'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197750297310793729&theme=dark" } // Detect dark theme var iframe = document.getElementById('tweet-1197750298170679296-961'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197750298170679296&theme=dark" } // Detect dark theme var iframe = document.getElementById('tweet-1197750298896285696-424'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197750298896285696&theme=dark" } // Detect dark theme var iframe = document.getElementById('tweet-1197750302864072704-165'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197750302864072704&theme=dark" } // Detect dark theme var iframe = document.getElementById('tweet-1197750310355132417-312'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197750310355132417&theme=dark" } // Detect dark theme var iframe = document.getElementById('tweet-1197750311542067200-997'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197750311542067200&theme=dark" } // Detect dark theme var iframe = document.getElementById('tweet-1197750315740565504-226'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197750315740565504&theme=dark" } // Detect dark theme var iframe = document.getElementById('tweet-1197750317032411136-448'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197750317032411136&theme=dark" } // Detect dark theme var iframe = document.getElementById('tweet-1197750656532017152-509'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197750656532017152&theme=dark" } // Detect dark theme var iframe = document.getElementById('tweet-1197750657643532288-325'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197750657643532288&theme=dark" } // Detect dark theme var iframe = document.getElementById('tweet-1197750658482360321-335'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197750658482360321&theme=dark" } // Detect dark theme var iframe = document.getElementById('tweet-1197750659518304256-227'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197750659518304256&theme=dark" } // Detect dark theme var iframe = document.getElementById('tweet-1197750660734697472-66'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197750660734697472&theme=dark" } // Detect dark theme var iframe = document.getElementById('tweet-1197750661808418816-709'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197750661808418816&theme=dark" } // Detect dark theme var iframe = document.getElementById('tweet-1197750662617939968-229'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197750662617939968&theme=dark" } // Detect dark theme var iframe = document.getElementById('tweet-1197750666128572417-735'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197750666128572417&theme=dark" } // Detect dark theme var iframe = document.getElementById('tweet-1197750668552859648-640'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1197750668552859648&theme=dark" }

#30DaysOfWebPerf

Shreerang Patwardhan — Fri, 22 Nov 2019 05:40:27 +0000

I have been working on improving the performance of some large e-commerce sites lately and that is when I came across #30DaysOfWebPerf on Twitter. This made me think, if I could learn more by embarking on this 30 day long journey and in the process also share some of the knowledge I have. Some topics, I think, I will cover as part of this will include.

Let's tackle the Images (obviously)
Cleaning up the critical render path
Cleaning up unused CSS
Cleaning up unused Javascript
Cleaning up the DOM
Dealing with third party scripts
Measuring performance
Resources you can learn from

Follow me on Twitter @shreerangp for the #30DaysOfWebPerf series, or on #DEVcommunity where I'll post the thread for each day in the series at https://dev.to/shreerangp/30daysofwebperf-4kh9

DEV Community: Shreerang Patwardhan

Binged 📺

Day #4 of #30DaysOfWebPerf

Day #3 of #30DaysOfWebPerf

Day #2 of #30DaysOfWebPerf

Day #1 of #30DaysOfWebPerf

#30DaysOfWebPerf

#30DaysOfWebPerf Series

Day #1 of #30DaysOfWebPerf

Shreerang Patwardhan ・ Nov 22 '19

Day #2 of #30DaysOfWebPerf

Shreerang Patwardhan ・ Nov 22 '19

Day #3 of #30DaysOfWebPerf

Shreerang Patwardhan ・ Nov 24 '19

Day #4 of #30DaysOfWebPerf

Shreerang Patwardhan ・ Nov 29 '19