Next.js ve lqip-modern ile LQIP Nasıl Oluşturulur?
Laravel ile çalışan bir projeniz var, modellara, querylere, n+1 problemine ve diğer performans detaylarına dikkat ederek sistem yazdınız. Ancak site açılırken yine de yavaş açılıyor ve çeşitli performans servislerinde düşük puanlar alıyorsunuz.
Eğer böyle bir senaryo içersindeyseniz muhtemelen sorun görsellerinizdedir. Tabiki bunu çözmenin yolları var örneğin defer
yani Lazyload.
Ancak size de öyle geliyor mu bilmiyorum ama lazyload UI olarak bana hep kötü bir tercih olarak gelmiştir. Çünkü görseller yüklenene kadar yerleri boş kalıyor ve kötü bir görüntü oluşturuyor.
Siz de benim gibi düşünüyorsunuz o zaman neşelenin, çünkü bu sorunu çözmenin bir yolu daha var. LQIP Modern.
LQIP Nedir?
Öncelikle LQIP'nin ne olduğuna bakalım. LQIP, Low Quality Image Placeholders yani Düşük Kaliteli Görsel Yertutucu
.
LQIP'ler söz konusu görseli küçültülerek, bulanıklaştırarak ve kalitesini azaltarak elde edilir. Asıl görsel yüklenene kadar placeholder
görevi görür.
Boyutları son derece düşük olduğundan FCP(First Contentful Paint) süresini önemli derecede azaltırlar.
Uyumluluk
Burada ufak bir parantez açalım. WebP'ler neredeyse bütün modern tarayıcılarda desteklenmektedir, ancak macOs kullanıyorsanız Safari'de macOs 11(Big Sur) ve sonrasında desteklenmektedir.
%100 uyumluluk istiyorsanız, JPEG LQIP
kullanabilirsiniz.
Next.js ve LQIP Modern
Next.js'in next/image
adında local dosyalarda LQIP için in-built paketi mevcut, ancak uzak görüntüleri desteklemiyor maalesef.
LQIP görüntüler derleme sırasında oluşur, yani bu demek oluyorki uzak görsel değişirse LQIP aynı kalacak.
Eğer görselleri bir CMS'ten alıyorsanız bu iyi çünkü next.js'in on-demand Incremental Static Regeneration
özelliği ile görsellerde değişiklik olduğunda
LQIP'leri tekrar oluşturabilirsiniz.
Bu yazı için Unsplash
'ten herhangi bir görsel seçiyorum.
Öncelikle bir Next.js uygulaması oluşturalım.
npx create-next-app next-lqip-demo
Daha sonra pages/index.js
dosyasına aşağıdaki kodları ekleyin.
pages/index.js
import Head from "next/head";import Image from "next/image";import styles from "../styles/Home.module.css";export default function Home() {return (<div className={styles.container}><Head><title>Next.js ile LQIP Modern Önizleme Görselleri Oluşturmak</title></Head><main className={styles.main}><div style={{ marginTop: "4rem" }}><Imagesrc="https://images.unsplash.com/photo-1652128656618-918516c50029"alt="Anastasia Saldatava"height={1200}width={800}/></div></main></div>);}
next.config.js
içerisine aşağıdaki kodları ekleyin.
next.config.js
const nextConfig = {reactStrictMode: true,images: {domains: ["images.unsplash.com"],},};module.exports = nextConfig;
next/image
componentini kullanırken görseli uzaktan çekeceğimiz için görseli çektiğimiz domaini buraya eklememiz gerekiyor.
Şimdi uygulamamızı npm run dev
yada yarn dev
ile çalıştıralım.
Sayfayı ilk açtığınızda görselin yüklenmesinin birkaç saniye sürdüğünü fark edeceksiniz. Tabiki bu internet hızınıza göre değişecektir.
Görselleri Optimize Etmek İçin LQIP Kullanma
Öncelikle lqip-modern
ve sharp
paketlerini yükleyelim. Sharp görselleri manipüle etmemize yarayan lqip-modern
tarafından kullanılan bir pakettir.
npm install --save lqip-modern sharp
Daha sonra pages/index.js
dosyasıdaki kodu aşağıdakiyle değiştirelim.
pages/index.js
import lqipModern from "lqip-modern";import Head from "next/head";import Image from "next/image";import styles from "../styles/Home.module.css";export default function Home({ imageUrl, previewImageUrl }) {return (<div className={styles.container}><Head><title>Next.js ile LQIP Modern Önizleme Görselleri Oluşturmak</title></Head><main className={styles.main}><div style={{ marginTop: "4rem" }}><Imagesrc="https://images.unsplash.com/photo-1652128656618-918516c50029"alt="Anastasia Saldatava"height={1200}width={800}placeholder="blur"blurDataURL={previewImageUrl}/></div></main></div>);}export const getStaticProps = async () => {const unsplashImageUrl ="https://images.unsplash.com/photo-1652128656618-918516c50029";const image = await fetch(unsplashImageUrl);const imageBuffer = Buffer.from(await image.arrayBuffer());const previewImage = await lqipModern(imageBuffer);return {props: {imageUrl: unsplashImageUrl,previewImageUrl: previewImage.metadata.dataURIBase64,},};};
Öncelikle getStaticProps
içerisinde görselimizi çekiyoruz ve bunu bir Buffer'e çeviriyoruz. Daha sonra Buffer'a dönüştürdüğümüz objeyi lqip-modern
ile manipüle ediyoruz.
lqip-modern
bize meta veriler içeren bir object döndürüyor. Bu veriler içerisinden dataURIBase64
değerini alıyoruz ve proplar ile client-side'a gönderiyoruz.
Client-side tarafında Image
componentimize placeholder="blur"
adında bir parametre ekledik. Bu uzak bir görsel olduğu için componentimize blurDataURL
parametresini göndermemiz gerekiyor, buraya proplar ile gönderdiğimiz previewImageUrl
değerini veriyoruz.
Şimdi sayfayı yenilediğinizde görsel hala yükleniyor ancak bu sefer LQIP ile birlikte.
lqip-modern
bize sadece 94 Bayt
büyüklüğünde bir placeholder oluşturdu.
Webp Yerine JPEG Kullanmak
Blogun başında da belirttiğim gibi eğer %100 tarayıcı uyumluluğu istiyorsanız WebP değil JPEG kullanmalısınız. previewImage değişkeninin aşağıdaki şekilde güncelleyin.
pages/index.js
const previewImage = await lqipModern(imageBuffer, { outputFormat: "jpeg" });
İşte Bu Kadar!
Evet, işte bu kadar. Umarım bu yazı lqip-modern
ve LQIP hakkındaki sorularınıza cevap olmuştur. Yararlı bulduysanız paylaşmayı unutmayın 😚