Bu dizinin ikinci bölümünde, birkaç basit değişiklikle Joomla sitenizden temel düzeyde bir performansın nasıl çıkarılacağını anlattım. Bugün statik medyaya daha derinden dalıyoruz: JavaScript, CSS ve görüntü dosyaları.
Bu değişiklikler daha kapsamlıdır, ancak yavaş bir sitenin çöplüğünü iyi performans gösteren bir siteye dönüştürebilir. Muhtemelen, bu değişikliklerin tümü tüm siteler için anlamlı değildir, ancak elde ettiğiniz performans avantajları önemlidir.
Sitenizin büyük bir kısmı statik medya dosyaları biçiminde gelir: CSS, JavaScript, resimler ve olası ses ve video da. İçeriğimize ikincil olarak değerlendirdiğimizde, bunlar hakkında fazla düşünmeme eğilimindeyiz, ancak genellikle bir sayfayı ziyaret ederken sitemizin sunucusundan kullanıcının cihazına aktarılan verilerin çoğunu oluştururlar. Buna ek olarak, büyük CSS ve JavaScript dosyalarının ayrıştırılması veya büyük görüntülerin kodunun çözülmesi, ana tarayıcı iş parçacığını dondurur, bu da basit bir ifadeyle, tarayıcının sayfayı oluşturmak için herhangi bir iş yapamayacağı anlamına gelir (yalnızca arka planda daha fazla veri indirebilir).
Ayrıca, daha fazla CSS, JavaScript ve görüntü dosyalarının yüklenmesi daha uzun sürer; bu, tarayıcının sayfayı oluşturmayı durdurması ve bu dosyalardan birinin yüklenmesi her bittiğinde her şeyi sıfırdan yeniden hesaplaması gerektiği anlamına gelir. Bu, sayfanın daha yavaş görünmesine veya içeriğin ekranda atlama gibi diğer oluşturma bozukluklarına neden olabilir (tarayıcı jargonunda "Düzen Kaydırma" olarak adlandırılır).
Resimlerinizi Optimize Edin
Blog veya haber sitesi gibi görsel ağırlıklı bir siteniz varsa, sayfa içerik transferinizin en büyük kısmı görsellerdir. Muhtemelen sadece bir resim çekmeye, onu Joomla'nın Medya Yöneticisi ile yüklemeye, belki yeniden boyutlandırmaya veya biraz kırpmaya alışkınsınız - Joomla 4'ün Medya Yöneticisi artık bunu yapabilir! - ve buna bir gün diyelim. Sizin için iyi, ancak resimleriniz büyük olasılıkla optimize edilmemiş ve olması gerekenden daha büyük (Kilobayt cinsinden, boyutları olması gerekmez).
Belki de pngcrush ve mozjpeg gibi araçların belirsiz veya keskin bir şekilde farkındasınızdır. Komut satırı konusunda rahatsanız, resimlerinizi optimize etmek için bunları kullanın.
Daha da kolayı, Windows, macOS ve Linux için ImageOptim adlı ücretsiz bir araç var ve bu araçlardan birkaçını resimlerinize karşı çalıştırabilir ve en küçük dosyayı seçebilirsiniz. Çok basit. Görüntü klasörünüzü araca sürükleyip bırakın. Tamamlanana kadar bekleyin. Resimleriniz optimize edilmiş sürümleriyle değiştirilir. Açıkçası bu, önce sitenizin yerel bir kopyasında yapılmalıdır. Emin değilseniz, orijinal görüntülerinizin bir kopyasını saklayın çünkü ImageOptim optimize edilmiş sürümlerle görüntülerinizin üzerine yazar.
Resimlerinizi Uyarlanabilir Hale Getirin
Sitenizin farklı ekran boyutlarına sahip cihazlarda görüntüleneceğini zaten biliyorsunuz: 5" altı bütçeye uygun Android telefonlar, 6" ana akım akıllı telefonlar, 7"+ phablet veya küçük tabletler, 10"-11" tabletler, 13"-15 "dizüstü bilgisayarlar ve devasa 23"+ masaüstü monitörler. Sitenizi duyarlı hale getirerek bunu zaten hesaba kattınız; bu, içeriğinizin ölçekleneceği ve tasarımınızın sitenizin oluşturduğu ekran boyutuna en uygun etkileşim modlarına göre kendisini bükeceği anlamına gelir.
Peki ya Resimleriniz?
Hedef cihazlarınız 380px genişliğinde bütçeli bir telefondan 5120px genişliğinde bir masaüstüne kadar değiştiğinde, aynı görüntü dosyası her boyut için uygun değildir. Küçük ekran için optimize ederseniz, görüntü büyük ekranda bulanık ve pikselli görünecektir. Büyük ekran için optimizasyon yaparsanız, ziyaretçilerinizin çoğu çok daha küçük bir resim görüntülemek için gereksiz yere büyük bir dosya indiriyor. Hedef kitlenizdeki en yaygın cihaz boyutunu optimize etmek, her iki dünyanın da en kötüsüdür: küçük cihazlar büyük bir dosya indirir ve büyük ekranlar bulanık bir fotoğraf gösterir.
Standart ekran yoğunluğunun (standart inç başına 96 pikseldir) 2x, 3x veya 4x piksel yoğunluklarına sahip HiDPI cihazlarını da hesaba katmaya başlarsanız, çözmeniz gereken bir bulmaca var demektir. Pek çok cihazda kötü görüntülenecek oldukça küçük bir dosya mı yoksa tüm cihazlarda harika görüntülenen ancak birkaç Megabayt büyüklüğünde büyük bir dosya mı arıyorsunuz?
Neyse ki, seçmek zorunda DEĞİLSİNİZ. Tarayıcılar uzun süredir desteklenen uyarlanabilir görüntülere sahiptir. Kısacası, RESİM öğesini kullanarak uygun medya sorgularıyla tarayıcıya, sitenizin oluşturulduğu görüntü (çözünürlük ve DPI) için doğru görüntü dosyasını otomatik olarak seçmesini söyleyebilirsiniz. Ekran boyutu değişirse, örneğin kullanıcı cihazını dikeyden yataya döndürdüyse veya masaüstünde tarayıcı penceresini yeniden boyutlandırdıysa, tarayıcı ne yapacağını akıllıca çözecektir. Yeterince büyük bir resmi varsa, onu küçültür. Olmazsa ve RESİM öğenizde, gerekli boyutlar için daha uygun bir görüntü dosyasının mevcut olduğunu ima ettiyseniz, bunun yerine onu yükleyecektir. Daha büyük resim yüklenirken, daha küçük olan ölçeklenmiş olarak görünecektir, bu nedenle, kullanıcınızın bakış açısından, kısa bir süre içinde kaybolan resimlerde biraz bulanıklık olur.
RESİM öğesiyle yapabileceğiniz başka bir sihirli şey, tarayıcının desteklediği en uygun dosya biçimini seçmesidir. Web'deki çoğu resim JPG veya PNG'dir. Bunlar, 1990'lara ve hatta daha öncesine dayanan eski görüntü biçimleridir. Çoğu modern tarayıcı , şeffaflığı desteklerken çok daha küçük dosyalarla sonuçlanan çok daha verimli bir görüntü dosyası formatı olan WEBP'yi de destekler. Bir site oluşturucu olarak sizin bakış açınızdan, steroidler üzerindeki PNG gibidir. Ne yazık ki, eski tarayıcı sürümleri (ve Safari'nin tüm sürümleri) WEBP'yi hiç desteklemediği için her şeyi WEBP'ye dönüştüremezsiniz.
Şimdiye kadar başınızı umutsuzluk içinde tutuyor olabilirsiniz. Tek bir görüntü dosyası yüklemek ve içeriğinize bir IMG etiketi yerleştirmek, artık çeşitli farklı görüntü boyutları ve görüntü türleri oluşturmanızı gerektiren bir bulmaca haline geldi. Bu, site entegratörü olarak sizin için zor ve müşterileriniz için kesinlikle imkansız.
Neyse ki, bunu sizin için halledebilecek üçüncü taraf Joomla uzantıları var. Geçmişte XT Adaptive Images Pro 'yu kullandım. Econa ve muhtemelen diğerleri de var - her ihtiyaç ve bütçe için bir uzantının bulunduğu Joomla Uzantıları Dizini'ne derin bir dalış yapabilirsiniz.
Başka bir seçenek de, düzen geçersiz kılmaları ve resimlerinizin duyarlı sürümlerini otomatik olarak oluşturan bir yardımcı ile devam etmektir. Bu, Charlie Lodder'ın Lightning şablonuna katkıda bulunduğum koddur. Özel şablonlar yapmak sizin işinizse, bu düzen geçersiz kılmaları ve yardımcı sınıfı kendi şablonunuzda kullanmak üzere kolayca uyarlayabilirsiniz.
Vektör Çizimler
Görüntüler hakkında belirtilmesi gereken bir diğer nokta, illüstrasyonların (fotoğrafların aksine) tipik olarak hayatlarına Adobe Illustrator veya Affinity Designer gibi bir vektör dosyası olarak başlamasıdır. Genellikle gördüğümüz şey, bunların bir sitede kullanılmadan önce şeffaf PNG dosyalarına dönüştürülmesidir. Bu, bununla ilgili en az etkili yoldur.
Tarayıcılar, uzun süredir desteklenen ölçeklenebilir vektör grafikleri (SVG) dosyalarına, vektör grafiklerini tanımlayan küçük metin dosyalarına sahiptir. Fotoğraf için optimize edilmiş dosya formatlarından (JPG, PNG ve hatta WEBP) çok daha küçük olma eğilimindedirler, düz metin oldukları için çok daha fazla sıkıştırılabilirler ve netliği kaybetmeden herhangi bir ekran çözünürlüğünde küçükten devasaya kadar herhangi bir boyuta ölçeklenebilirler.
Joomla 3'te herhangi bir SVG desteğinin - hatta üçüncü taraf uzantıları kullanmadan ekleme olasılığı - bariz bir şekilde yokken, bu Joomla 4'te manuel olarak etkinleştirdiğiniz sürece mükemmel bir şekilde mümkündür. İçerik, Medya'ya gidin ve Seçenekler'e tıklayın. Yasal Resim Uzantılarını (Dosya Türleri) SVG'yi içerecek şekilde değiştirin, yani şu şekilde değiştirin:
- bmp,gif,jpg,png,svg
Yüklemeleri Kısıtla'yı etkinleştirdiyseniz (yapmalısınız!), İzin Verilen Uzantıları da svg içerecek şekilde değiştirin, yani:
- bmp,gif,jpg,jpeg,png,webp,ico,mp3,mp4,odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,csv,svg
MIME Türlerini Kontrol Et'i etkinleştirdiyseniz, Legal MIME Türlerine image/svg+xml eklemeniz de gerekir, yani:
- image/jpeg,image/gif,image/png,image/bmp,application/msword,application/excel,application/pdf,application/powerpoint,text/plain,application/x-zip,image/svg+xml
Kaydet ve Kapat'a tıklayın. Artık Joomla, SVG dosyalarını yüklemenize ve bunları bir görüntünün eklenmesine izin verilen her yerde kullanmanıza izin veriyor.
Son bir uyarı notu: SVG dosyalarını içerikten kendi boyutlarını almayı bekleyen öğelerde kullanmaya çalışmayın (SVG dosyalarının, tarayıcının tüm ihtiyaçları için içsel sabit bir genişliği ve yüksekliği yoktur, bir tanesi şurada belirtilmiş olsa bile) ve SVG dosyalarını arka plan resimleri olarak kullanmaya çalışmayın. Her ikisini de yapmanın yolları var, ancak büyük olasılıkla gereksiz yere acı çekeceksiniz.
JavaScript ve CSS ile Uğraşmayın
Son 15 yılda JavaScript ve CSS yüklemesini daha hızlı hale getirmek için çeşitli teknikler olmuştur. Genellikle aşağıdaki tekniklere indirgenirler: dosyaları birleştirme, dosyaları küçültme, dosyaları GZipping ve JS/CSS yüklemesini HTML belgesinin altına taşıma.
Hiçbirini yapma. Bunu yapan herhangi bir eklenti kullanmayın. Bunlar Joomla 4'teki inanılmaz derecede kötü fikirler ve onlara ihtiyaç yok!
Dosyaları birleştirmek çok fazla tavuk ve yumurta durumuna neden olur. Sitenizin her sayfasında hangi sipariş dosyalarının birleştirilmesi gerektiğini bilmeniz ve bir şeyler çalışmadığında karışıklığı gidermeniz gerekir. Ayrıca tam olarak sıfır sorunu çözer; Geçen ay tarayıcıların sayfayı görüntülenmeye hazırlamak için nasıl şeyler indirdiğinden bahsetmiştik.
PHP kodunu kullanarak JavaScript ve CSS dosyalarını küçültmek tamamen ters etki yapar. Bu, yaklaşık 12 yıl önce bu dosyaların çok basit olduğu zamanlarda işe yaradı. Modern JavaScript ve CSS, onları küçültmek için daha özel, PHP olmayan koda ihtiyaç duyar, örneğin Babel ve Closure. Çoğu geliştirici kodlarını yine de küçültür ve Joomla, Joomla 3.0'ın ilk günlerinden beri küçültülmüş dosyalar için tam desteğe sahiptir.
Dosyalarınızı GZip için bir eklenti kullanmak inanılmaz derecede verimsizdir ve daha uzun sayfa yükleme sürelerine neden olur. Geçen ay, web sunucunuzun bunu nasıl daha verimli bir şekilde yapmasını ve tarayıcıya statik dosyaları önbelleğe almasını söyleyebileceğinizden bahsettik.
JavaScript dosyalarını sayfanın başından aşağıya taşımak sorun oluyor. Başlıkta veya belge gövdesinde bu koda atıfta bulunan satır içi bir komut dosyası varsa, geliştiricinin makul olarak önceden yüklenmesini beklediği siteniz bozuk görünecektir. Joomla 4, ertelenmiş ve eşzamansız komut dosyası yüklemeyi destekler. Geliştirici JavaScript'inin bunu destekleyebileceğini biliyorsa ve JavaScript'i HTML belgesinin en altına taşımakla hemen hemen aynı etkiye (aslında, daha da iyi bir performans kazancı!) sahiptir.
Son olarak, CSS'yi HTML belgesinin en altına taşımak, çözdüğünden daha büyük bir sorun yaratır. Tarayıcı tam sayfanın stilini değiştirmez, ardından stil sayfasını okur ve baştan başlaması gerekir. Bu, çok fazla ekstra çalışmaya neden olur ve sitenizin daha yavaş oluşturulmasına neden olurken, aynı zamanda sayfa yeniden oluşturulurken yanıp söner ve hareket eder. Bu korkunç bir kullanıcı deneyimi.
Bu nedenle, lütfen sitenizi sözde "optimize etmek" için bunları yapan eklentileri kullanmayın. Bunlar on yıl önce alakalıydı ama artık değil.
CDN Kullanma
Sitenizin en büyük performans darboğazı, statik dosyalarınızın teslimidir: resimler, CSS, JavaScript, videolar, ses. Bu, bir siteye sahip olmanın özünde bulunan iki faktör tarafından daha da kötüleşir: mevcut bant genişliği ve kullanıcıya yakınlık.
Kullanılabilir bant genişliği, sitenizin sunucusunun bir istemciye bayt gönderebileceği "hız sınırı"dır. Elbette, Gigabit fiber İnternet bağlantınız veya süper hızlı 5G mobil bağlantınız olabilir. Sunucu 20 Mbps'de zirveye ulaşırsa veya bunun bir kısmı, o sunucudan gelen tüm içeriğin cihazınıza ne kadar hızlı ulaşacağıdır.
Kullanıcıya yakınlık, evrenin nihai hız sınırı ile ilgilidir: ışık hızı. Bazılarınız gülüyor. Bu doğru! Sitenizin sunucularından gelen tüm veriler fiber optik bağlantılardan geçer, yani lazer ışığı cam kanallar aracılığıyla yönlendirilir. Seyahatinin %99,9'u bu. Diğer %0,1 bakır kablolar (ADSL/VDSL), mikrodalgalar (uydu İnternet, 5G, WiFi) veya elektrik darbeleri (Ethernet) olabilir. Lazer ışığı, ışık hızından daha hızlı hareket edemez - aslında, yaklaşık 0,9c, ışık hızının %90'ı veya saniyede 270.000 Kilometre / saniyede 168.000 mil kadar utangaç bir hızla hareket eder. Sunucunuz dünyanın diğer ucundaysa, bize yaklaşık 75 milisaniye veren yaklaşık 20.000 Kilometreyi geçmesi gerekir. Veri aktarımı bir gidiş-dönüş sürer (isteği gönderin, sonucu geri alın) bu şekilde, o sunucudan kullanıcının cihazına herhangi bir şey gelmeden önce fazladan 150 msn beklememiz var. Sunucu kullanıcıya ne kadar yakınsa veri aktarımı o kadar hızlı başlar.
Ana makinenizden daha fazla bant genişliği satın almak mümkün olabilir ancak pahalı olabilir. Sunucunun konumunu değiştirmek, özellikle Avrupa çapında tek bir ülke veya ABD eyaletinden daha büyük bir coğrafi konuma hizmet veriyorsanız pratik olmayabilir.
Her iki sorunun da çözümü bir CDN (İçerik Dağıtım Ağı) kullanmaktır. Bir CDN, dünyanın her yerindeki veri merkezlerinde düğüm adı verilen birden çok sunucuya sahiptir. Statik dosyalarınız bu düğümlerde önbelleğe alınır. Bir istemci sitenizden bir sayfa istediğinde, CDN isteği sunucunuza iletir, sunucunuz Joomla'yı çalıştırır ve HTML içeriğini CDN düğümü aracılığıyla kullanıcıya geri gönderir. Ancak tarayıcı statik içeriği istediğinde sitenizin - sayfayı oluşturmak için gerekli JavaScript, CSS, resimler vb. - CDN düğümü onu önbelleğe aldı ve kullanıcıya en yakın düğümden teslim etti. CDN ayrıca, ana makinenizden çok daha ucuza toplu olarak satın aldıkları için bol miktarda bant genişliğine sahiptir; bu, sunucunuz yapamasa bile hızlı bir Gigabit veya 5G bağlantısını doyurabilecekleri anlamına gelir. Birleşik etki, sitenin çok daha hızlı yüklenmesidir.
Dışarıda bir sürü CDN var. Kombine bir CDN, site optimizasyonu ve site güvenlik hizmeti olduğu için CloudFlare kullanıyorum. Sunucunuz bunu desteklemiyorsa, sunduğu optimizasyon özellikleri statik kaynaklarınızın sıkıştırılmasını otomatik olarak halledebilir. İhtiyaçlarınıza bağlı olarak, ücretsiz bir katman vardır, ancak aynı zamanda daha birçok özelliğe sahip ücretli katmanlar da vardır.
CDN kullanmak gerekli değildir. Geniş bir coğrafi alana hizmet verecek bir siteniz varsa veya isteklerle dolup taşmasını bekliyorsanız, evet, göz önünde bulundurmanız gereken bir şey. Bir CDN için ödeme yapmak, genellikle özel bir sunucuya geçmekten çok daha ucuz ve daha az baş ağrısıdır.
Devam Edecek
Önümüzdeki ay, sitenizin şablonlarını oluşturan veya özelleştirenler için site oluşturma becerileri hakkında konuşacağız. Bu dizinin son makalesi, içerik kalitesi ve içeriğinizi yalnızca arama motorları için değil aynı zamanda insan ziyaretçileriniz için optimize etmeyle ilgili ipuçları ve püf noktaları ile iki ay içinde yayınlanacak. O zamana kadar iyi günler!
Kaynak: Joomla.org - Nicholas K. Dionysopoulos
