Designing for Different Screen Sizes

Gold prices are soaring. Went to Tanishq's website to check rates. Opened DevTools out of habit. Found something interesting — a technique so old, I thought it was outdated. Expected to see: A REST API call fetching real-time rates. Found instead: <input type="hidden" id="goldRateValues" value='{"GetDailyMetalRates":[...]}'> The entire 30-day price history. All karat types — 9KT, 14KT, 18KT, 22KT, 24KT. Embedded directly in the HTML. No API call. No loading state. No spinner. The Why — It's all about the Three S's: 1️⃣ Speed (Zero Latency) ⚡ By the time JavaScript executes, data is already there. No second round-trip to the server. The user sees gold rates the exact millisecond the page renders. No spinners. No layout shift. Just instant content. 2️⃣ SEO & Discoverability 🔍 Gold rate today is searched millions of times. By embedding data directly in HTML, search engine crawlers can index the actual prices instantly. Compare this to a client-side rendered app where crawlers see an empty <div id="root"></div>. 3️⃣ Reliability 🛡️ In areas with spotty internet — common for mobile users checking rates on the go — API calls often fail or timeout. By baking data into the HTML document itself, Tanishq guarantees: If the page loads, the data loads with it. It's an "all or nothing" approach that ensures consistent UI. Modern frameworks handle this better. Actually? Modern frameworks do the exact same thing. They just hide it from you. Open any Next.js app. View page source. You'll find: <script id="__NEXT_DATA__" type="application/json"> {"props":{"pageProps":{"data":{...}}}} </script> Same pattern. Same concept. Fancier wrapper. Here's how each framework does it: Tanishq-> <input type="hidden"> Framework Where data hides Next.js. -> <scriptid="__NEXT_DATA__"> Nuxt.js. -> window.__NUXT__ RemixEmbedded in HTML stream SvelteKitSerialized in <script> AstroDirectly in HTML The pattern has a name: Hydration. Step 1: Server renders HTML with data already embedded Step 2: Browser displays content instantly Step 3: JavaScript hydrates — makes the page interactive That's it. That's the magic behind every modern SSR framework. #WebDevelopment #JavaScript #NextJS #React #Frontend #Performance

Our App Was Crawling at Snail Speed… Until I Made This One Mistake 🚀 A few months ago, I checked our Lighthouse scores—30s. That’s like running an F1 race on a bicycle. 🏎️➡️🚲 𝐀𝐧𝐝 𝐭𝐡𝐞 𝐰𝐨𝐫𝐬𝐭 𝐩𝐚𝐫𝐭? We did everything right—modern stack, top framework, best practices. Yet, our app was sluggish. ❌ AI-powered search engines ignored us. ❌ Users kept waiting. ❌ Something was off. So, we did what every dev does—optimize. 🔧 Cut dependencies 🔧 Shrunk bundles 🔧 Tweaked configs We went from 30s to 70s. Better, but still not great. Then, I made a 𝐦𝐢𝐬𝐭𝐚𝐤𝐞. A glorious, game-changing mistake. One deploy, I accidentally removed JavaScript. And guess what? Lighthouse: 91. 😳 Sure, nothing worked. No buttons, no interactivity. But it proved our app could be fast. 💡 The lesson? Stop making JavaScript do everything. 𝐒𝐨 𝐰𝐞 𝐫𝐞𝐛𝐮𝐢𝐥𝐭: ✅ JavaScript only where needed ✅ No unnecessary hydration ✅ No bloated client-side rendering 𝐓𝐡𝐞 𝐫𝐞𝐬𝐮𝐥𝐭? 🚀 From 30s to consistent 90+ scores 🚀 Faster load times 🚀 Better search engine visibility Sometimes, the problem isn’t a lack of optimization—it’s an excess of complexity. Not every app needs a heavy framework. Not every UI should be hydrated. If you’re struggling with performance, ask yourself: ❓ Do I really need this much JavaScript? ❓ Can I pre-render more? ❓ What happens if I strip everything back to basics? You might be surprised by what you find. 👀

𝗜 𝗿𝗲𝗱𝘂𝗰𝗲𝗱 𝗼𝘂𝗿 𝗮𝗽𝗽'𝘀 𝗹𝗼𝗮𝗱 𝘁𝗶𝗺𝗲 𝗯𝘆 𝟳𝟯%. 𝗧𝗵𝗲 𝘀𝗲𝗰𝗿𝗲𝘁? 𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝘁𝗵𝗲 𝗖𝗿𝗶𝘁𝗶𝗰𝗮𝗹 𝗥𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 𝗣𝗮𝘁𝗵.... Most developers optimize the wrong things. They minify JavaScript. Compress images. Add a CDN. And wonder why their app still feels slow. 𝗛𝗲𝗿𝗲'𝘀 𝘄𝗵𝗮𝘁 𝘁𝗵𝗲𝘆'𝗿𝗲 𝗺𝗶𝘀𝘀𝗶𝗻𝗴: Your browser follows a specific sequence to render a page. Miss one step and EVERYTHING GONE!! 𝗧𝗵𝗲 𝗖𝗿𝗶𝘁𝗶𝗰𝗮𝗹 𝗥𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 𝗣𝗮𝘁𝗵 𝘄𝗼𝗿𝗸𝘀 𝗹𝗶𝗸𝗲 𝘁𝗵𝗶𝘀: 𝟭- 𝗛𝗧𝗠𝗟 𝗣𝗮𝗿𝘀𝗶𝗻𝗴 → The browser reads your HTML top to bottom. But here's the catch: when it hits a script tag, everything stops. Your beautiful HTML just sits there, waiting. 𝟮- 𝗖𝗦𝗦𝗢𝗠 𝗖𝗼𝗻𝘀𝘁𝗿𝘂𝗰𝘁𝗶𝗼𝗻 → CSS blocks rendering. Yes, ALL of it. That massive stylesheet you loaded? The browser won't show a single pixel until it's fully parsed. This is why CSS in the head matters. 𝟯- 𝗥𝗲𝗻𝗱𝗲𝗿 𝗧𝗿𝗲𝗲 𝗖𝗿𝗲𝗮𝘁𝗶𝗼𝗻 → Browser combines DOM and CSSOM. Only the visible elements make it here. That display: none element? Not even calculated yet. 𝟰- 𝗟𝗮𝘆𝗼𝘂𝘁 (𝗥𝗲𝗳𝗹𝗼𝘄) → Browser calculates exact positions and sizes. Change one margin? Recalculate everything. This is expensive. 𝟱- 𝗣𝗮𝗶𝗻𝘁 → Finally, pixels on screen. But trigger layout again? Back to step 4. 𝗠𝗼𝘀𝘁 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗮𝗱𝘃𝗶𝗰𝗲 𝘀𝗸𝗶𝗽𝘀 𝘁𝗵𝗲 𝗿𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 𝗼𝗿𝗱𝗲𝗿. • Async scripts ≠ faster paint • Optimized images ≠ unblocked render • Smaller bundles ≠ no CSS blocking Understand the Critical Rendering Path!! 𝗪𝗵𝗮𝘁 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝗺𝗼𝘃𝗲𝗱 𝘁𝗵𝗲 𝗻𝗲𝗲𝗱𝗹𝗲:  • Inline critical CSS  • Deferred non-critical styles  • Async/defer scripts  • Removed render-blocking resources 𝗥𝗲𝘀𝘂𝗹𝘁: load time 4.2s → 1.1s 𝗦𝗮𝗺𝗲 𝗨𝗜 | 𝗦𝗮𝗺𝗲 𝗳𝗲𝗮𝘁𝘂𝗿𝗲𝘀 | 𝗝𝘂𝘀𝘁 𝘂𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝘁𝗵𝗲 𝗯𝗿𝗼𝘄𝘀𝗲𝗿 You don’t get hired for knowing tools. You get hired for the depth you can explain under pressure. If you want to build skills that can’t be replaced, learn how the browser, JavaScript, and React actually works. Link in comments 👇

Stop guessing why your app is slow. Open DevTools and measure. Open the Performance tab, hit Record, and use your app: click, scroll, navigate, interact. Then stop the recording and inspect the timeline. You're looking for: - Long tasks (over 50ms) - Reflows and repaints - Scripts blocking the main thread These are the red flags. If you’re blocking rendering or constantly forcing layout recalculations, your app’s going to feel janky. Next, dive into the Flame Graph. Wide bars = expensive functions. These are your hotspots. Refactor them. Avoid blocking the UI. Break them into smaller, async chunks where you can. If it’s heavy and synchronous, it’s a problem. DOM reads and writes? Batch them. Reading layout properties like offsetWidth forces the browser to recalculate layout. Writing right after that (e.g., changing styles) forces it again. That’s a double reflow, and it adds up fast. To fix it group reads first, then writes.Trigger one reflow, not two. Memory usage matters too. If you haven’t taken a Heap Snapshot, you have no idea what’s lingering in memory. Detached DOM nodes, closures, abandoned observers, they all pile up over time. Leaks don’t crash your app, they slowly choke it. Long JavaScript tasks freeze the UI. If you're blocking the main thread for more than 50ms, you're locking out user interaction. Break those tasks apart: - Use setTimeout, requestIdleCallback, or Web Workers - Prioritize responsiveness over raw throughput Don’t load everything up front. If your initial bundle includes every image, every script, every component—you're forcing the browser to choke before it can render anything useful. To fix it - Lazy-load non-critical assets - Use <link rel="preload"> for essentials like fonts - Defer anything not needed for first paint DevTools isn’t optional, it’s a daily tool. You don't fix performance by guessing. You fix it by measuring.

I cut my React Native build time by 60%. Here's exactly how I did it. Most developers ignore the tools already in their apps. Big mistake. React Native has powerful built-in performance tools. You don't need fancy paid solutions. Here's what actually works: 𝐔𝐬𝐞 𝐭𝐡𝐞 𝐏𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞 𝐌𝐨𝐧𝐢𝐭𝐨𝐫 - Press CMD+D (iOS) or CMD+M (Android) - Toggle "Show Performance Monitor" - Watch your JS frame rate - Keep it above 55FPS 𝐄𝐧𝐚𝐛𝐥𝐞 𝐇𝐞𝐫𝐦𝐞𝐬 𝐄𝐧𝐠𝐢𝐧𝐞 - Open your android/app/build.gradle file - Set enableHermes to true - Rebuild your app - Enjoy faster startup times 𝐏𝐫𝐨𝐟𝐢𝐥𝐞 𝐰𝐢𝐭𝐡 𝐅𝐥𝐢𝐩𝐩𝐞𝐫 - Install Flipper on your computer - Connect your development device - Check the React DevTools plugin - Find slow components instantly 𝐑𝐞𝐦𝐨𝐯𝐞 𝐜𝐨𝐧𝐬𝐨𝐥𝐞.𝐥𝐨𝐠 𝐬𝐭𝐚𝐭𝐞𝐦𝐞𝐧𝐭𝐬 - They slow down your app - Use babel-plugin-transform-remove-console - Your production build stays fast 𝐔𝐬𝐞 𝐭𝐡𝐞 𝐑𝐞𝐚𝐜𝐭 𝐃𝐞𝐯𝐓𝐨𝐨𝐥𝐬 𝐏𝐫𝐨𝐟𝐢𝐥𝐞𝐫 - Record user interactions - See which components re-render - Fix unnecessary renders - Speed improves immediately 𝐎𝐩𝐭𝐢𝐦𝐢𝐳𝐞 𝐢𝐦𝐚𝐠𝐞𝐬 𝐩𝐫𝐨𝐩𝐞𝐫𝐥𝐲 - Use react-native-fast-image - Cache images automatically - Reduce memory usage - Faster load times guaranteed I've used these on so many production apps. Every single one got faster. No expensive tools needed. What's your biggest React Native performance issue? Drop a comment and let's solve it together.

You know what kills your site performance? Rendering 3000px of content when the user can only see 900px. And there is an easy fix for that. It's a magical CSS property content-visibility: auto. Look, the browser doesn't care that your testimonials are off-screen. It still calculates their layout, styles, and geometry. Your hero section is ready, but the main thread is busy with content the user can't see until they scroll down. Result: slow INP, laggy interactions, poor user experience. The rescue is - content-visibility: auto It's like a toggle that tells the browser: "Skip rendering this section until it's actually needed." The browser saves CPU resources. Your page becomes interactive faster. Scrolling is smoother. But! You need another property: contain-intrinsic-size: auto 600px. Why? Because if you don't reserve space for hidden sections, they collapse to 0 height. Your scrollbar thinks the page is shorter than it is. When you scroll down and the section renders, the page expands suddenly and everything jumps. The auto prefix solves this. It's like "memory mode" for the browser. E.g. use 600px as a rough estimate on first render. Once the browser actually renders the section, it remembers the real height. Future scrolls are smooth. Where to use it: .heavy-section { content-visibility: auto; contain-intrinsic-size: auto 700px; // 700px is an approximate height that you think your block will have } Best for sections below the fold: reviews, footers, anything with complex layouts that aren't immediately visible. Never on the hero section. That needs to render instantly for good LCP. What improves: • INP (Interaction to Next Paint) • Initial load speed • Mobile battery life • Scroll performance Your users won't see the optimization. They'll just notice your site feels faster.

If you're a product manager and your engineering team asks for non-functional requirements on how fast your new features need to load, and you're drawing a blank, consider the following... First, let's talk about The Doherty Threshold. It should be your performance golden rule, and it has an interesting history. Back in 1982, IBM employees Walter J. Doherty and Ahrvind J. Thadani came up with a study "The Economic Value of Rapid Response Time." They challenged the prevailing two-second response standard, arguing that productivity improves when interactions happen faster than 400 milliseconds. This 400ms threshold isn't arbitrary. It's the sweet spot where neither the computer nor the user waits on the other. When you hit this mark, something interesting happens: productivity increases, costs decrease, and employees find more satisfaction in their work. Why does it matter so much? Because delays of 100-300ms are noticeable. Anything over a second is when the attention wanders and important task information starts fading. The Doherty threshold keeps users in that optimal spot, maintaining their flow and focus. What if you can't quite reach that 400ms goal? Don't worry, there are some clever ways to improve perceived performance. For example, you could try using skeleton screens like Instagram does, showing placeholder blocks where content will appear. Or you could use the "blur up" technique for images, loading a tiny, blurred version first before revealing the high-resolution image. Animations can used too. Gmail's loading screen uses a simple animated logo and progress bar to make wait times feel shorter. And for longer waits you can provide a progress bar with an estimated completion time. Instagram's UI displays comments before they're actually posted, so the app feels very quick. By focusing on perceived performance, you can dramatically improve user experience even when true speed improvements are challenging. So next time your team asks about performance requirements, you've got this. And have these tricks up your sleeve :)

When someone clicks a payment link on their phone and the page takes 16 seconds to load, they're gone. Not because the product is bad. Not because the price is wrong. Because the experience told them something felt off before they ever saw a Pay button. Speed is the first trust signal your customer receives. Before your brand, before your logo, before your checkout form. If the page loads slow, people start asking themselves if this is even legit. Our team just cut mobile First Contentful Paint from 11.2 seconds to 2.2 seconds. An 80% improvement. On desktop we're hitting 0.6 seconds. That's near instant for a fully interactive payment form. Josh Sadler wrote up exactly how we did it and why it matters. The technical details are worth reading, but the bigger point is simple: in payments, performance IS the product. Every millisecond between your customer and the Pay button is a chance for them to reconsider the purchase and walk away. We believe software should be beautiful and fast. This is what that looks like in practice. https://lnkd.in/gmumXhjq

Improving Page Load Speed for Better SEO 🚀 Did you know that a 1-second delay in page load speed can reduce conversions by 7% and increase bounce rates by 32%? Page speed isn’t just a UX factor; it’s a critical SEO ranking signal. Fast-loading websites improve user experience, increase engagement, and help you rank higher on search engines. If you’re serious about SEO, here’s a detailed checklist to improve your page load speed: 1) Optimize Images - Use compressed formats like WebP instead of JPEG/PNG. - Resize images to fit their display dimensions. - Tools: TinyPNG, ShortPixel, or ImageOptim. 2) Enable Browser Caching - Store static files (images, CSS, JS) on users' browsers for faster load times on return visits. - Use tools like W3 Total Cache or WP Rocket for WordPress sites. 3) Minify CSS, JavaScript, and HTML - Remove unnecessary spaces, comments, and characters to reduce file size. - Tools: Minify CSS, UglifyJS, or plugins like Autoptimize. 4) Use a Content Delivery Network (CDN) - CDNs like Cloudflare or Amazon CloudFront distribute content across multiple servers globally for faster access. 5) Reduce HTTP Requests - Combine CSS/JS files and use CSS sprites for multiple small images to reduce server requests. 6) Enable Lazy Loading - Load images and videos only when they come into view. - It saves bandwidth and improves load speed. 7) Implement GZIP Compression - Compress files before sending them to the browser, reducing page size significantly. - Test if it’s enabled with tools like GzipTest. 8) Optimize Your Hosting - Use fast, reliable hosting. - Consider upgrading to cloud hosting or a dedicated server for high-traffic websites. 9) Remove Unused Plugins & Scripts - Deactivate plugins and scripts you no longer use. - Each one adds weight to your website. 10) Prioritize Above-the-Fold Content (Critical Rendering Path) - Load essential elements first, like headings, text, and CTAs, while other content loads in the background. Pro Tip: Use Tools to Measure and Monitor Speed - Google PageSpeed Insights - GTmetrix - Pingdom Tools These tools provide actionable recommendations to boost performance. Why Does It Matter? - Faster pages rank higher. - Improved user experience = lower bounce rates. - Mobile users expect lightning-fast load times. Remember: Google’s Core Web Vitals prioritize page speed, so improving it is a direct boost to your SEO performance. Which of these strategies are you already using, and what results have you seen? Drop your thoughts or questions below! ♻️ Save this checklist for later or share it with someone who needs it! 👉 Follow Dinesh Katyare for more actionable SEO tips. 🚀

🚀 For a 123-year-old company, https://www.mcmaster.com boasts one of the fastest e-commerce websites I can remember using! Check out how they achieve blazing speeds **Highlights** 🚀 Fast Performance: McMaster-Carr’s website feels fast despite its old design. 💻 Server Rendering: The site uses server-rendered HTML instead of JavaScript frameworks. 🔄 Prefetching: HTML prefetching enhances navigation speed when hovering over links. ⚡ Caching Techniques: Aggressive caching strategies are employed for optimal performance. 🖼️ Image Optimization: Fixed dimensions and sprite techniques reduce image loading times. 📏 Critical CSS: CSS is loaded inline to avoid rendering delays and jank. 📉 Minimal JavaScript: Only necessary JavaScript is loaded per page, ensuring efficiency. **Key Insights** 🏎️ Speed Over Aesthetics: Despite its classic look, McMaster-Carr prioritizes speed through advanced web techniques, showing that design doesn’t have to compromise performance. 🌐 Server-Side Efficiency: By rendering HTML on the server, the site avoids heavy client-side frameworks, allowing for much faster load times, as browsers excel at rendering HTML. 🔍 User Experience Focus: The site’s prefetching of HTML ensures users experience seamless navigation, anticipating their next moves and loading pages before they’re even clicked. 🔄 Smart Caching: Using CDNs and service workers, McMaster-Carr optimizes cache management, ensuring quicker access to frequently visited pages and resources. 📐 Image Loading Strategy: Utilizing fixed dimensions and image sprites minimizes layout shifts and reduces the number of server requests, enhancing the viewing experience. 🎨 Critical CSS Implementation: Loading CSS in the head improves rendering performance, as the browser applies styles immediately, preventing visual jank during loading. 📦 Targeted JavaScript Use: Loading only essential JavaScript per page minimizes unnecessary bloat, allowing the site to remain responsive and fast, even with older technologies. Which of these strategies can you use in 2024?