Nicholas Ray's blog

https://www.nray.dev/

Front-end development tips that improve page speed, user happiness, and business success

フィード

記事のアイキャッチ画像
Astro vs. Next.js: Why I Prefer Astro For Most Sites
Nicholas Ray's blog
Why Astro is better than Next.js for static, content-heavy websites.
1ヶ月前
記事のアイキャッチ画像
How To Fix "Image elements do not have explicit width and height"
Nicholas Ray's blog
The guide to fixing unsized images that cause layout shifts.
9ヶ月前
記事のアイキャッチ画像
How To Use Video Formats for Animated Content [7 Steps]
Nicholas Ray's blog
The guide to replacing your animated GIFs with videos for faster load and Largest Contentful Paint times.
9ヶ月前
記事のアイキャッチ画像
How To Efficiently Encode Images
Nicholas Ray's blog
The guide to compressing your website's images for faster load times.
9ヶ月前
記事のアイキャッチ画像
How To Serve Images in Next-Gen Formats
Nicholas Ray's blog
The detailed guide to serving your website's images as fast as possible
9ヶ月前
記事のアイキャッチ画像
How to Defer Offscreen Images In 2023
Nicholas Ray's blog
The detailed guide to lazy loading your website's images
10ヶ月前
記事のアイキャッチ画像
How to Balance Text (Without JavaScript)
Nicholas Ray's blog
CSS now offers an experimental property that eliminates awkward-looking headlines.
10ヶ月前
記事のアイキャッチ画像
Interaction to Next Paint (INP): Everything You Need to Know
Nicholas Ray's blog
The in-depth guide to understanding and optimizing the upcoming Core Web Vital for your website
10ヶ月前
記事のアイキャッチ画像
300ms Faster: Reducing Wikipedia's Total Blocking Time
Nicholas Ray's blog
How two simple steps improved the responsiveness of Wikipedia's mobile site
1年前
記事のアイキャッチ画像
How to Build Tailwind CSS Dark Mode
Nicholas Ray's blog
Learn step-by-step instructions on implementing a sleek dark mode theme for your website using Tailwind CSS.
1年前
記事のアイキャッチ画像
Visual Testing: Building A More Robust Wikipedia Interface By Spotting the Differences
Nicholas Ray's blog
A look at how we leveraged visual testing to catch UI bugs when developing Wikipedia's new desktop experience.
1年前
記事のアイキャッチ画像
Using Chrome Profiler to Fix Performance Issues
Nicholas Ray's blog
Chrome's DevTools performance panel can help you diagnose and fix common performance problems. Learn how in this article!
1年前
記事のアイキャッチ画像
How to Create Performant Scroll Animations in React
Nicholas Ray's blog
Learn how to incorporate performant web animations into your site while avoiding common pitfalls.
2年前
記事のアイキャッチ画像
Using Media Queries in JavaScript
Nicholas Ray's blog
Using media queries is very popular in CSS, but this article explores how they can also be used in JavaScript
2年前
記事のアイキャッチ画像
Analyzing Wikipedia's Search Performance
Nicholas Ray's blog
Performance comparison between Wikipedia's new search component built in Vue.js and the legacy search component.
3年前