Elementor Web Sitesi Nasıl Daha Hızlı Yüklenir

Bu, kolayca takip edebilmeniz için "Elementor'u Hızlandırma: Bir Elementor Web Sitesinin Daha Hızlı Yüklenmesi" eğitimimizin bir dökümüdür.

Kullandığımız araçlar:

Bu video, öğenizin veya web sitenizin hızını artırmak için ihtiyaç duyduğunuz araçları, ipuçlarını ve teknikleri tartışır. Bu örnek videoda, bir Elementor web sitesinin hızını 3.4 saniyeden 1.4 saniyeye çıkarıyoruz. Yani bunu nasıl yapacağınızı öğrenmekle ilgileniyorsanız, bu sizin için öğreticidir.

Bu yüzden, bu videonun yaklaşık bir saat süreceğini umuyoruz ve web sitenizin hızını ve performansını iyileştirme hakkında bilmeniz gereken her şeyi size öğretecek. Pekala, ilk olarak, neden web sitenizin yüklenme süresini gerçekten iyileştirmek istediğinize değinmek istiyorum. Hemen web sitenize gidin, URL'yi tarayıcıya girin ve yükleyin. Web sitesinin yüklenmesi biraz zaman alıyorsa ve orada oturuyorsanız ve gerçekten yükleme süresine odaklanıyorsanız, bunun biraz fazla uzun olduğunu düşünüyorsunuz.

Bu, şirketime veya web siteme veya işletmeme iyi bir bakış değil, o zaman kesinlikle web sitenizin performansına odaklanmak istersiniz. Üzerinden geçebileceğimiz bir sürü istatistik var. Ve şimdi size web sitenizin neden daha hızlı yüklenmesini istediğinize dair birkaç tane göstereceğim. Yani bu Neil Patel'de. SEO uzmanıdır. Ve burada oldukça can sıkıcı istatistikler var. Öncelikle, mobil internet kullanıcılarının %73'ü, kullanımı çok yavaş olan bir web sitesiyle karşılaştıklarını söylüyor. Ve tüketicilerin %47'si iki saniye veya daha kısa sürede yüklenmesini bekliyor. Ve üç saniyeden fazla sürerse, insanların %40'ı web sitesini terk edecek.

Diyelim ki küçük bir kasabada tesisatçısınız ve web sitenizde belki 100 kişi var ve bu 100 kişiden 10 kişi potansiyel müşteriye dönüşüyor. Bu 10 kişinin %40'ını kesip atın, geriye pek bir şey kalmadı, altı kişi kaldı ve onların lider olabileceklerini bilen altı kişi olmayabilir, ancak web sitenizi terk eden ve web sitenizi terk eden dört kişi lider konumuna gelecekti. Çok para kaybediyorsun. Bu nedenle ve bu, küçük bir kasabadaki küçük bir hizmet web sitesinin küçük ölçekli bir örneğidir, eğer ziyaretçi miktarını artırırsanız veya ayda oluşturabileceğiniz olası satış miktarını artırırsanız, şunu görürsünüz: web siteniz hızlı yüklenmiyorsa gerçekten çok para kaybediyorsunuz. Ve internete girip bakabileceğiniz bir sürü başka istatistik var. Ama bunlar ana şeyler.

Bir e-ticaret web sitesi günde 100.000 dolar kazanıyorsa, bir saniyelik sayfa gecikmesi size 2,5 milyon dolara mal olabilir. O zaman bu Amazon ve Walmart'tan. Bu adamların ikisi de web sitelerinin yükleme süresini iyileştiriyor ve satışları kapanıyor. Bu nedenle, WordPress ile oluşturulmuş Elementor web siteniz söz konusu olduğunda hıza odaklanmak kesinlikle gereklidir. Elementor'un kendisi harika bir araçtır çünkü gerçekten istediğiniz her şeyi oluşturmanıza olanak tanır. Gördüğünüz gibi, bu web sitesini Elementor ile yaptık, bir Elementor şablonu kullandık ve bu aslında optimize etmek için kullandığımız web sitesi olacak, bu yüzden bu web sitesini size ajansımızın web sitelerini nasıl optimize ettiğini göstermek için kullanacağım .

Ancak Elementor ile gerçekten istediğiniz her şeyi inşa edebilirsiniz. Bununla birlikte, Elementor kusurlarıyla birlikte gelir. Elementor. Kodlanmış çıktılar söz konusu olduğunda bir numara oldukça şişirilmiş. Bu nedenle, süper temiz olmayan bir grup kod verir. Ve bu nedenle, web sitenizin yüklenme süresini artırabilir. Bu nedenle, kullanıma hazır Elementtor veya en hızlısı değil ve web sitenizi oluşturduktan sonra gerçek hızına odaklanmanız gerekecek. Ve ayrıca Elementor, istediğiniz her şeyi inşa etmenize izin verir.

Yani bunu yapabilirsin, daha çılgın bir şey yapabilirsin, daha basit bir şey inşa edebilirsin, ama ne istersen inşa etmene izin verdiği için, web siteni oluşturmaya gelince biraz dikkatli olmalısın ve düşünmelisin. , bu web sitemin daha yavaş yüklenmesine neden olacak mı ve bu web sitemin daha yavaş yüklenmesine neden olacaksa buna değer mi? Bu, performans söz konusu olduğunda web sitenizi oluştururken düşünmeniz gereken gerçekten sürekli bir takastır. Bu satışlarımı artıracak mı? Bu satışlarımı azaltır mı? Bu beni daha güvenilir mi yapacak yoksa daha fazla ziyaretçi kaybetmemi mi sağlayacak? Yani gerçekten bir tahterevalli. Ve o tahterevalliyi dengelemeye çalışacaksın.

Bu yüzden her zaman Elementor'da ne inşa ettiğinizi düşünmelisiniz. Ve görebileceğiniz gibi, yerleşik bir Elementor bu bir şablondan kullanıldı. Yani tamamını inşa etmedik ama buraya birkaç şey ekledik. Ayrıca, hakkında ve iletişimimiz var, bu yüzden bu, Elementor'u hız için optimize etmek için kullanacağımız sayfa ve web sitesi. Ve görebileceğiniz gibi, bu web sitesinde kullandığımız iki eklenti Elementor ve Elementor Pro'dur ve bu web sitesinde kullandığımız tek tema Hello Elementor'dur. Dolayısıyla bu, optimizasyona başladığımızda takip edebileceğiniz iyi bir temel Elementor web sitesi sağlamalıdır. O halde hemen konuya girelim.

Elementor web sitenizi hız için optimize ederken odaklanmanız gereken ilk şey, üzerinde bulunduğu barındırmadır. Bu nedenle, barındırma ve Elementor söz konusu olduğunda, çok fazla yanlış bilgi var. Ve bu konuda rehberlik arayan birçok insan var. Elementor Facebook grubunda ve genel WordPress Reddit'te çok şey görüyorum. İnsanlar soruyor, hangi sunucularda olmalıyım? GoDaddy'de olmalı mıyım? Bluehost'ta olmalı mıyım? Başka bir şey üzerinde olmalı mıyım?

Oh, eğer paylaşımlı hosting kullanıyorsanız ve bundan kurtulabiliyorsanız, o zaman ondan çıkmalısınız. Hosting almayı düşünüyorsanız, paylaşımlı hostingi düşünmemelisiniz. Bunun nedeni, paylaşılan barındırmanın diğer barındırma tekliflerinden daha yavaş olmasıdır. Ve şimdi neredeyse aynı maliyeti. Bu yüzden size tercih ettiğimiz ana bilgisayar olan CloudWays arasında bir karşılaştırma göstermek istedim ve birazdan CloudWays ve Bluehost olan paylaşılan bir ana bilgisayar hakkında daha fazla bilgi vereceğim. Yani Bluehost muhtemelen orada en çok reklamı yapılan ev sahibi, onların bir ortaklık programı var. Ve eğer insanlar diğer insanları Bluehost'a yönlendirirse, 65$ kazanırlar. Yani bu Bluehost her yerde. Ve yeni başlayan birçok insan, Bluehost'un kendileri için iyi bir seçenek olduğuna inanmakta tuzağa düşüyor.

Ve bazı durumlarda, süper basit bir web sitesi için iyi bir seçenek olabilir. Ancak Elementor ile oluşturulmuş bir web sitesi, etkili bir şekilde yüklenmesi için çok fazla kaynak gerektirir. Bunun nedeni, arka uçta çok, çok tam özellikli bir sayfa oluşturma aracı olan bir numarayı yüklemesidir. Ve ön uçta, geçişler, yüksek çözünürlüklü görüntüler, menü, bunun gibi birçok özelliğe sahip çok iyi tasarlanmış bir sayfa yüklüyor.

Elementor'da temel bir şey inşa ediyor olsanız bile, bu temel bir sayfa değildir. Kod çıktısı temel değildir. Ve yüklemek için işlem gücü gerektirir. Ve paylaşılan barındırma size bunu sağlamaz. Paylaşılan barındırma, Elementor'u hızlı bir şekilde yüklemek için ihtiyaç duyduğunuz kaynakları sunmaz. Ve eğer bunlar kafanızdan geçiyorsa, şimdi size birkaç rakam göstereceğim.

Bu, WordPress web sitemizin CloudWays'e yüklenme süresidir. Ve bu, WordPress web sitemizi, yüklemeyi test etmek, yüklemenin yavaş olmasına neden olan şeyi teşhis etmek ve ardından her şeyi düzeltmek için kullanacağımız alan adıdır. İşte web sitemiz şu anda burada barındırılıyor, gördüğünüz gibi, Google sayfa hızı Insights'ta 100 üzerinden 68 puan alıyor.

Ve işte laboratuvar verilerimiz. Bu videoyu çekeceğimiz için, esas olarak laboratuvar verilerinin hız indeksi altındaki hız indeksine bakacağız, size web sitenizin yüklenme süresinin tam bir ölçüsünü verir. Böylece bir sayfanın içeriğinin ne kadar hızlı doldurulduğunu gösterir. Yani bu, buradaki her şey arasında mutlu bir ortam gibi. Ve bu sayfanın tam olarak yüklenmesinin 2,8 saniye sürdüğünü söylüyor. Görünür şekilde doldurulmuş etkileşim süresi dolu, ancak hız endeksine bir göz atıyoruz. Yani bu sayfanın yüklenmesi 2.8 saniye sürüyor.

Ne yaptık, tüm bu web sitesi kurulumunu aldık. Bu yüzden size arka uçta gösterdiğim her şey hakkında sayfası, iletişim sayfası ve biz, bu web sitesinin mükemmel bir kopyasını oluşturan WP Migration all in one WP Migration adlı bir araç kullanıyoruz. Ve bu web sitesini aldık ve bir Bluehost kurulumuna kurduk. Ve Bluehost'tan hız, güç veya benzeri bir şey gerektirmeyen canlı geliştirme için umut ettik. Artık o kadar çok kullanmıyoruz, ama hala elimizde.

Bu web sitesini aldım, tamamen kopyaladım ve sonra Bluehost'a koydum ve size sayfayı göstereceğim, blog.isotropik.co'ya yükledik ve bu aslında bu videoyu yayınladığımızda olacak, bu sadece yönlendirecek izotropik tasarım blogumuza. Yani bu, ana bilgisayarın farklı olması dışında tam bir kopyadır. Bu bir Bluehost ana bilgisayarında ve yaptığımız şeyi PageSpeed ​​Insights aracılığıyla çalıştırdık. Yani bu, buradakiyle aynı sayfa.

Ve görebilirsiniz, işte sayfa tanımlayıcınız. Ve Bluehost üzerinden çalıştırdık. Ve çok daha kötü bir hız indeksimiz var. Yani 2,8 saniyelik yükleme süresiyle karşılaştırıldığında, bu 3,4 saniye sürüyor. Ve gördüğünüz gibi, bu aynı sayfa. Ve biraz daha farklı bir puanı var, biraz daha kötü. Ancak burada bakılması gereken en önemli şey, aynı sayfada 2,8 saniyeye kıyasla 3,4 saniyedir. Ve bu oldukça basit bir web sitesi, ek eklenti yok.

Sayfada animasyonlar dışında özel bir özellik yoktur. Yani size göstermeye çalıştığım şey, yarasanın dışında, paylaşılan barındırma satın almanın satın alma, kurumsal barındırma satın alma işleminden daha yavaş olduğu ve tekrar gidiyorum, yarasadan birkaç saniye içinde CloudWays'in ne kadar yavaş olduğunu ve daha yavaş olduğunu size göstereceğim. ayrıca bu eklentiler için çok büyük bir web sitesi, Hello Elementor teması, geçişli temel Elementor sayfası. Yani bu 3.4 saniyede yükleniyorsa, eklentisiz, üç sayfa, bunun gibi şeyler, onunla paylaşılan hız sorunları, web sitenizi daha büyük ve daha büyük hale getirdikçe ve daha fazla insan onu ziyaret etmeye başladıkça birleşecektir. Sayfada aynı anda birden fazla kişi varsa, bu hız endeksi katlanarak artacaktır.

Ve daha yüksek bir hız indeksi daha kötüdür çünkü sayfanın yükü bu kadar hızlı almasıdır. Sonuç olarak, harici faktörlerin olmadığı bir geliştirme ortamındaki temel bir web sitesinde paylaşılan barındırmanın daha kötü olduğunu görebilirsiniz. Ama sonra bir web sitesinin gerçek gerçek dünya öğesini eklediğinizde, daha da kötüleşir. Yani Bluehost'ta olmak istemiyorsunuz, insanlar size ne derse desin GoDaddy'de olmak istemiyorsunuz. Ve bunu size söylüyorlar çünkü dönüşüm başına 65$ alıyorlar.

Bu nedenle önerilen sunucumuz CloudWays, tüm acente web sitelerimizde CloudWays kullanıyoruz, CloudWays kullanıyoruz – ve gördüğünüz gibi, tüm acente web sitelerimizde kullanıyoruz, tüm müşteri web sitelerimizde kullanıyoruz. Ve CloudWays, web sitenizi kurumsal düzeyde bulut barındırmada kolayca barındırmanıza olanak tanıyan bir ana bilgisayardır.

Bunun anlamı, web sitenizi Google Compute Engine digitalocean teklifleri olan AWS'de barındırabilmenizdir. Ve bu çok iyi özellikli, iyi yönetilen, iyi yönetilen bir ev sahibi. Böylece beş bulut sağlayıcısında çalıştırabilir, istediğiniz kadar WordPress örneği yükleyebilirsiniz. Bu şirketin destek yönü şaşırtıcı. Bir ajans olarak onlara PHP hakkında birçok ileri düzey soru soruyoruz ve onlar yanıtlıyor ve genellikle bizim için bir şeyler yapacaklar. Yani konu barındırmaya geldiğinde istediğiniz şey bu. Güvenliği, otomatik yedeklemeleri, gerçek zamanlı izlemeyi, yerleşik bir CDN'yi ve bunun gibi şeyleri yönetirler. Bu yüzden harika bir ev sahibi.

Bunu gönülden tavsiye ediyoruz. Fiyatlandırmaya gelince. Bu sunucuyu Bluehost veya GoDaddy ile karşılaştırırsanız, aslında neredeyse aynı fiyattır. Bu nedenle, temel bir Bluehost kurulumu satın alıyorsanız, size ayda yaklaşık 7 dolara mal olur.

Bu, en temel plan için ayda yaklaşık 10 dolara mal olacak. Ve bu, temel bir web sitesinin tek bir kurulumu için yeterince iyidir. Böylece digitalocean, linode, Vultr, AWS, Google Cloud üzerinde barındırabilirsiniz. Tüm web sitelerimizi digitalocean üzerinde yapıyoruz çünkü buradaki en ucuz plan bu. Ve diğer şirketlerin sunduklarına gerçekten ihtiyacınız yok. Yalnızca temel bir öğe veya web sitesi yapıyorsanız, kullandıkça ödeyin. Böylece, bir yıl peşin ödeme yapmak yerine her ay faturalandırılırsınız, bunun gibi şeyler, diğer ev sahipleri de bunu yapar. Ve ücretsiz olarak başlayabilirsiniz.

Böylece üç günlük ücretsiz deneme süresi verebilirsiniz, kredi kartı bilgisi olmadan, bunun gibi herhangi bir şey. Ayrıca, bu şirketi sevdiğimiz için bu şirketle ortak olduk ve ilk ay hostinginizde %30 indirim alabilirsiniz. “İzotopik” kodunu girerek aşağıdaki açıklamada bir bağlantı var. Bu web sitesi ve diğer tüm web sitelerimiz için bu sunucuyu kullanıyoruz. Ve bu ana bilgisayarı kullanmamızın nedeni, endüstri lideri, isim markası, veri merkezlerinde barındırma yapmamıza izin vermesidir. Ve ek kurumsal düzeydeki şirketlerin kullandığı iyi donanımları kullandığımız için iyi bir performans elde ediyoruz.

Bunu Bluehost sunucularına kıyasla, sudan çıkarır çünkü aylık faturalandırılan özel bir RAM, özel bir çekirdek işlemci, 25 gigabayt SSD depolama alanı ve ayda 10 ABD doları için bir terabayt alırsınız. Dolayısıyla biz bu firmayı kullanıyoruz ve sizin de bu firmayı kullanmanızı tavsiye ediyoruz. Dolayısıyla bu eğitici, temel depolama sağlayıcısı olarak CloudWays barındırma ile oluşturulmuş bir web sitesi kullanıyor.

Pekala, umarım bu size neden CloudWays kullandığımıza, Elementor web sitenizin hızını neden artırmak istediğinize ve bunun gibi şeylere dair iyi bir genel bakış sağlamıştır.

Bu yüzden, kim olduğumu hızlıca tanıtmak için, yalnızca WordPress ile inşa eden ve WordPress web sitelerimizin yaklaşık %50'si Elementor ile oluşturulan bir ajansın kurucusuyum. Ve bu nedenle Elementor'da performans sorunları olduğunu fark ettik. Bu yüzden performansı elimizden geldiğince çözmenin yollarını bulduk. Bu yüzden burada paylaşacağım şey bu, Elementor performansı söz konusu olduğunda ajansımın yaptığının aynısını paylaşacağım.

Bu yüzden web siteleri oluşturuyoruz ve ardından profesyonel bir WordPress PageSpeed ​​optimizasyon hizmetimiz var. Ve bu videoda size göstereceğim teknikler temelde bu hizmetle yaptığımız şeylerin aynısı. Yani bu hizmet temelde devreye giriyor ve tam olarak burada size göstereceğim şeyi yapacak. Ayrıca kitabı WordPress PageSpeed ​​üzerine yazdık. Yani Amazon'a sakince giderseniz ve ardından WordPress PageSpeed'i yazarsanız. WordPress PageSpeed'de yazdığımız kitap ilk ortaya çıkan şeydir. Bu yüzden kitabı hemen hemen bunun üzerine yazdık. Web sitenizin performansını nasıl artıracağınıza dair adım adım bir kılavuzdur.

Ve aşağıda bir bağlantımız var. Ayrıca bir Elementor web sitesi oluşturma kitabını da yazdık. İşte web sitemize bir Elementor oluşturmaya ilişkin diğer kitabımız. Ve bu aşağıdaki bağlantıdır. Bu nedenle, sayfa hızını, performansı ve Elementor web sitesiyle ilgili her şeyi artırma konusunda ajansımızın sahip olduğu çok fazla bilgi var. Yani temelde sizinle paylaşacağım şey bu. Bu videonun sonraki bölümünde. Bir ajans olarak tanımladığımız her şeyi, dört yılı aşkın bir süredir WordPress ile web siteleri oluşturmayı ve web sitelerinin %50'sini Elementor ile oluşturmayı paylaşacağım.

Sadece kullandığımız tüm araç ve teknikleri sizinle paylaşacağım. Ve bu tam olarak bir ajansta yapacağımız şeydir. Ama bunu öğretici olarak basit ve anlaşılması kolay hale getirmeye çalışacağım. Bu nedenle, yeni başlayan biri olsanız bile, umarım en azından araçları takip edebilir ve kontrol edebilir ve bunları web sitenize yükleyebilir ve hızı artırıp artıramayacağınızı görebilirsiniz. Bu yüzden size bu konuları basit ve anlaşılması kolay bir şekilde tanıtmaya çalışacağım.

Pekala, şimdi doğrudan öğreticiye geçelim. Umarım bu giriş çok uzun olmamıştır, ama umarım size biraz arka plan ve dikkat etmeniz gereken şeyler vermiştir. Bu videonun başlangıç ​​bölümünde gördüğünüz gibi, web sitemizin temel performans puanını ve yükleme süresini belirlemek için PageSpeed ​​Insights kullanıyoruz. Ve PageSpeed ​​bilgilerini kullanmamızın nedeni, anlaşılmasının basit olması ve web sitenizin yüklenme süresiyle ilgili tam olarak neyin yanlış olduğunu size vermesidir.

GT metrikleri, Pingdom, Fast Or Slow adlı yeni bir araç gibi başka araçlar da var. Ve tüm bunlar bu videonun açıklamasında bağlantılıdır. Ancak PageSpeed'i kullanmamızın nedeni, kullanımının çok basit olması, endüstrinin onu kullanması ve size iyileştirmeye odaklanmak isteyeceğiniz şeylerin bir listesini vermesidir. Bu çok basit bir araçtır. Ve basitlik, kullanımı kolaylaştıran, anlaşılmasını kolaylaştıran ve daha sonra ilerlemeyi ve tanımladığı sorunları düzeltmeyi kolaylaştıran şeydir. Yani piyasada başka araçlar var, diğer araçlar size çok daha fazla güç sunacak, ancak Elementor'da oluşturduğunuz web sitesinin daha hızlı yüklenmesini istiyorsanız, bu sadece bunu yapmanın iyi bir yolu.

Böylece, web sitenizin adresini buraya girersiniz, Analiz düğmesine tıklayın ve bir rapor oluşturmak birkaç saniye sürecektir ve bunun ne yaptığı, deniz feneri adı verilen temel bir API kullanır. Lighthouse, Google'ın oluşturduğu bir performans optimizasyonu ve web sitesi denetim aracıdır. Ve bu aynı zamanda bir Google web sitesi geliştiricilerigoogle.com'dur ve web sitenizi alacak ve tüm testlerinden geçirecek ve ardından bu raporu çıkaracaktır. Ve bir mobil ilk rapor çıktısı verir. Ardından masaüstü raporuna gidebilirsiniz ve biz bunların her iki yönüne de odaklanacağız. Ama önce masaüstü raporuna odaklanacağız. İşte web sitemizin adresi.

Gördüğünüz gibi, bu video için özel olarak oluşturduğumuz burger web sitesidir, size burada tüm metrikleri anlatacak, size fırsatları anlatacak ve size teşhisleri anlatacak, sonra da size geçmiş denetimleri anlatacak ve bunun deniz feneri tarafından yapıldığını gösterecek. Yani burada odaklanmak istediğimiz şeyler bir numara, tüm bu metrikler. Bu yüzden odaklandığımız ana metrik hız indeksi ve biz web sitesini gerçekten optimize edene kadar yukarı ve aşağı sıçrayacak, sonra en büyük içerikli boyama, sonra etkileşim zamanı, sonra ilk içerikli boyama.

Bunların hepsi burada daha fazla araştırılabilir. Bunlar, bu videonun açıklamasında, tüm bu metriklerle ilgili yazdığımız bir blog gönderisine bağlantılardır. Ama sadece bu video için hız indeksine bakacağız. Bu yüzden web sitemizin hız indeksini artırmak istiyoruz. Bunu da aşağı kaydırarak ve fırsatlara bakarak yapacağız. Ve bu öneriler sayfanızın daha hızlı yüklenmesine yardımcı olur, performans puanını doğrudan etkilemez ve bu sizin performans puanınızdır. Ayrıca not edilmesi gereken bir şey de, bu puanı gerçekten umursamamanız gerektiğidir.

Bu daha çok, "hey, web siteniz biraz yavaş yükleniyor, hey, web siteniz biraz hızlı yükleniyor" diyen genel bir ölçümdür. Nokta nokta yukarı ve yukarı itmek istemezsiniz. Odaklanmak istediğiniz şey hız endeksi, biz iki saniyeden daha kısa bir yükleme süresini hedeflemek istiyoruz. Bazen bu, web sitelerinin oluşturulma şekliyle imkansızdır, ancak hız endeksini elimizden geldiğince iyileştirmeye çalışacağız. Yani bunun [duyulmuyor] olmasını istiyoruz. Ve bu gerçekten umurumuzda değil. Yine hız endeksini daha çok önemsiyoruz.

Web sitemizi optimize etmenin yolu, PageSpeed ​​raporunun tetiklediği fırsatlara bakmaktır. Yani burada görebileceğiniz gibi, yeni nesil formatlardaki görselleri arayın ve size yeni nesil bir formatta sunmanızı istediği tüm görselleri verir.

Size ilk sunucu yanıt süresini azaltmanızı söyler ve bunun nedeni muhtemelen sayfalarımızın ve optimize edilmiş olması, oluşturma engelleme kaynaklarını ortadan kaldırmanızı istemesidir. Ve ortadan kaldırmak istediği tüm bu CSS dosyalarını size söyler. Ve sonra size görüntüleri uygun şekilde boyutlandırmanızı söyler. Yani bu önerilerden yapabileceğiniz şey, içeri girip her şeyi manuel olarak yapmak ve resimlerinizi Photoshop'a koyarak ve bu uygun boyuttaki tanımlayıcıya uyacak şekilde yeniden boyutlandırarak uygun şekilde boyutlandırmaktır.

Ayrıca, tüm bu CSS sayfalarını alarak, tüm CSS'yi başka bir sayfaya kopyalayıp yapıştırarak, kullanılmayan tüm CSS'leri kaldırarak ve ardından bir PHP kod parçacığı yükleyerek bu CSS'den yükleyerek işleme düğmesi kaynaklarınızı ortadan kaldırabilirsiniz. Ayrıca, burada tanımlanan diğer her şeyi hemen hemen yaparak sunucu yanıt süresini azaltabilir ve azaltabilirsiniz.

Her şeyi web P'ye dönüştürmek için komut satırınıza bir şey yükleyerek bu yeni nesil biçimleri de sunabilirsiniz. Ancak bu gerçekten karmaşık. az önce söylediğim her şey muhtemelen başının üstünden geçti. Karmaşık, manuel, uzun zaman alıyor ve bunu yapmanın gerçekten bir anlamı yok.

Yapmak istediğiniz şey bu fırsatları ele almak, ancak web sitenizi hız için nasıl optimize edeceğiniz konusunda akıllı olmak istiyorsunuz. Bir ajans olarak, WordPress performans optimizasyonu söz konusu olduğunda üç ana araç kullanıyoruz. Bu üç araç birlikte çalışır. Ve burada hemen hemen her fırsatı çözüyorlar. Ve size burada bu fırsatları doğrudan nasıl ele alacağınızı göstereceğim. Tüm fırsatları çözerler ve web sitenizin daha hızlı yüklenmesini sağlarlar.

Pekala, bu eğitimde kullanacağımız üç ana araç aşağıdaki gibidir. Asset Cleanup Pro adlı bir eklenti kullanacağız. Ve bu bir performans WordPress eklentisidir. Ve bir önbellek eklentisi ile birlikte çalışır. Ve yaptığı şey, sayfayı oluşturan belirli CSS ve JavaScript komut dosyalarını devre dışı bırakarak web sitenizin daha hızlı yüklenmesine yardımcı olmaktır.

Ve sayfada kullanılmayan bu ayrı komut dosyalarını devre dışı bırakabilirsiniz; bu, daha az veri yükleyeceğiniz ve ne kadar az veri yüklerseniz sayfanızın o kadar hızlı yükleneceği anlamına gelir. Performans söz konusu olduğunda, odaklanmak istediğiniz iki ana şey daha az veri yüklemek ve ardından verileri diğer yöntemlere göre daha hızlı yüklenecek şekilde yüklemektir.

Böylece daha az veri yükleyip ardından daha hızlı bir yöntemle veri yükleyerek sayfanızın performans süresini artıracaksınız. Yani burada bir çok özellik var ve bunu size arka uçta göstereceğim. Ücretsiz bir sürümü var ve bir profesyonel sürümü var. Profesyonel sürümü sevmemizin nedeni, bireysel eklentileri ele almamıza izin vermesidir. Tek tek komut dosyalarını eşzamansız olarak yüklememize veya ertelememize izin veriyor ve sonra komut dosyalarını hareket ettirebiliriz ve bunu neden yapmak istediğimizi doğrudan bu eklentinin nasıl kullanılacağına girdiğim başka bir bölümde açıklayacağım. Bu yüzden açıklamada bağlantılı bu eklentinin profesyonel sürümünü kullanıyoruz. Ücretsiz sürümü de kullanabilirsiniz ancak bu eğitimde bahsettiğimiz bazı şeyleri yapamayacaksınız.

Elementor web sitelerinin performansını artırmak için kullandığımız ana eklenti, WP roket adı verilen bir eklentidir. Ve WP roketi web sitenizi hızlandırmanızı sağlar. Bu bir önbelleğe alma eklentisidir, ancak aynı zamanda tam bir performans eklentisidir. WP roketi, sayfanızı önbelleğe almanızı sağlar.

Temel olarak önbellek ne yapar, web sitenizin statik dosyalarını oluşturur. Ardından ziyaretçiler, canlı dosyalar yüklemek yerine statik dosyalar yükler. Ve bunu yaparak, bir sunucuya bağlanması gerekmediği için daha hızlı yüklenecektir. Ayrıca önbelleği önceden yükleyebilir, bireysel dosyalarınızı sıkıştırabilirsiniz. Ve sonra görüntülere odaklanabilirsiniz. Ve tüm bu özelliklerin üzerinden geçeceğim. Ancak tüm bu özellikler web sitemizin daha hızlı yüklenmesini sağlayacaktır.

Bu eklentinin yıllık maliyeti 49$'dır. Ve burada bahsettiğimiz eklentilerden birine para harcayacaksanız, bu olması gerekir. Web sitenizin daha hızlı yüklenmesini sağlayan şey budur. Bu da web sitenizin daha hızlı yüklenmesini sağlayacaktır. Ancak bu, ajansımızda yaptığımız performans optimizasyonunun bel kemiğidir. O zaman bu, sayfaların gerçekten daha hızlı yüklenmesini sağlamak için kullandığımız başka bir şey. Sonra bu eğitimde kullanacağımız başka bir eklenti PerfMatters olarak adlandırılır.

PerfMatters çok basit, çok hafif bir eklenti, bence 50KB kod. Ve web sitemizin belirli öğelerini açıp kapatmamıza izin veriyor, bir tür varlık temizliği gibi. Ve bize üzerinden geçeceğim birkaç özel araç veriyor. Ve tüm web sitesinin daha hızlı yüklenmesini sağlamak için kullanacağımız bu özel araçlar.

Yani bu eklenti tam bir web sitesi, hemen hemen komut dosyası yöneticisi. Bu, web sitesindeki her şey için eksiksiz bir optimizasyon aracıdır. Ve sonra bu araç, bu belirli sayfalara girmemize ve daha hızlı yüklenmek için daha fazla optimize etmemize izin verecek. Bu yüzden, ana sayfanın olabildiğince hızlı yüklenmesini sağlamak için bunu ana sayfada kullanacağız.

Pekala, bunlar kullanmanızı önerdiğimiz üç eklenti ve öğreticimizin kullanacağı şey de bu. Şimdi size her bir eklentiyi WordPress web sitesinde nasıl kuracağımızı ve kullandığımızı anlatacağım. Ve bu, bu eğitimin geri kalanı olacak. Ve sonra bu öğreticiden kendi Elementor web sitenizi hızlandırabilmeniz gerekir. Şimdi elimizdeki, bu videonun başında tanıtılan Elementor üzerine kurulmuş Elementor web sitesi, mevcut eklentiler Elementor ve Elementor. Pro, Sayfa Hızımız ve bu sayfa hızını yeniden yükleyeceğim, performans puanımız 64 ile 68 arasında.

Hız indeksimiz 2,8 ile 3,1 civarındadır. Ve bakmamız gereken mobil puan 100 üzerinden 22. Ve mobilde yüklenmesi 11 saniye sürüyor. Ve yine, bu videoda ele alacağımız tüm fırsatlarımızı bize gösterecek. Ve sonra ayrıca masaüstü 71 hız endeksi 2.2'dir. Görüntüleri yeni nesil formatlarda sunmamız gerekiyor. Ve gördüğünüz gibi, bu oldukça iyi bir performans. Zaten, çünkü CloudWays'deyiz. Bu yüzden bulut yollarını kontrol etmeniz gerekiyor. Ücretsiz Deneme, kredi kartı yok %30 indirimli, "izotropik" açıklamasında bir bağlantı var.

Pekala, yapacağımız ilk şey bu üç eklentiyi de yüklemek. Ve sonra bu eklentiler yüklendikten sonra, her birini ayrı ayrı yapılandıracağız. Ve sonra neredeyse EWWW image optimizer adlı dördüncü bir eklenti kullanacağımızı unuttum. Ve bu araç, görüntülerin yeni nesil formatlarda sunulduğu bu performans fırsatını doğrudan ele alacaktır. Ve bu araç aslında ücretsizdir.

Ve gerçekten hızlı bir şekilde tanıtmak istedim çünkü bu araçla ilgili bazı düşünceler var. Dolayısıyla bu araç, resimlerinizi almak, daha küçük boyutlara yeniden boyutlandırmak, sıkıştırmak ve daha sonra, tipik olarak JPEG veya PNG olan herhangi bir formatta dönüştürmek ve bu formatı alıp web P yapmak için sunucunuzdaki kaynakları kullanır. Web P yeni nesil biçimindedir ve bir milyon kat daha hızlı yüklenir, "aslında değil".

Ancak JPG veya PNG'den veya bunun gibi herhangi bir şeyden çok daha hızlı yüklenir. Bu eklentinin etrafında biraz tartışma var çünkü bazı barındırma sağlayıcıları bu eklentiyi engelleyecek çünkü sunucunuzdaki kaynaklarınızı kullanıyor, bu nedenle sunucunuzdaki RAM ve CPU görüntüleri değiştirmek için. Ve görüntüleri değiştirdiğinizde, son derece kaynak yoğundur. CloudWays kullanıyorsanız, bunu yapacak gücünüz var. Kendi sunucunuzu çalıştırıyorsunuz. Eğlenceli, bu eklentiyi çok kolay kullanabilirsiniz, çok basit, ücretsiz bir eklenti.

CloudWays'de değilseniz, bu eklentiyi kullanmak istemeyebilirsiniz, görüntü eklentisi gibi bir şey kullanmak isteyebilirsiniz. Diğer eklentiler görüntüleri optimize edecek, ancak bunu kendi sunucularında yapacaklar ve tüm işleme performansını veya bunun gibi her şeyi boşaltacaklar. Görüntüyü platformlarına göndermek için ne yapacaklar, platformları bu görüntüyü optimize edecek ve ardından görüntüyü her ana bilgisayarda izin verilen web sitenize geri gönderecek, ancak birisini kullandığınız için bunun için ödeme yapmanız gerekiyor. başka kaynaklar.

Yani bu gerçekten orada çalışan tek ücretsiz çözüm. Ödemeniz gereken diğer çözümler. CloudWays kullanıyorsanız, bu sizin için mükemmel bir araçtır. Başka bir şey üzerindeyseniz, bu sizin için mükemmel bir araç olabilir. Olmayabilir.

Pekala, işte tüm eklentilerimiz. Gördüğünüz gibi, WordPress Rocket, Perf Matters, EWWW, acit cleanup pro etkinleştirilmedi çünkü yalnızca bir web sitesi için lisansım var. Ama bunu istediğim başka bir web sitesine yükleyebilirim.

Pekala, bu yüzden temel olarak doğrudan web sitemizin optimizasyonuna gireceğiz. Yani optimize edeceğimiz ilk araç WP roketi ve WP roketi web sitemizin hızını artıracak. Ve gördüğünüz gibi, her şey kurulu. Ve önbelleği otomatik olarak önceden yükler. Yani bu eklentiyi kurduğunuzda önbellek otomatik olarak optimize edilir ve etkinleştirilir.

Bakacağımız birkaç şey daha var. Bu yüzden bir mobil önbellek kurduk. Yapacağımız başka önbelleğe alma ayarı yok. Ve önbelleğe alma ve bunu neden istediğiniz hakkında daha fazla bilgi edinmek istiyorsanız, aşağıdaki açıklamada bağlantılı çevrimiçi bir sürü makale var. Ancak önbellek, temel olarak web sitenizi en basit şekilde daha hızlı hale getirir.

Bir sonraki yapacağımız şey dosya optimizasyonları. Bu yüzden HTML'yi küçülteceğiz ve bu, dosya boyutunu küçültmek için tüm boşlukları ve yorumları kaldırıyor. Ve yine, dosya boyutu daha küçük, daha az veri yüklendi, daha hızlı yüklenen web sitesi. CSS dosyalarını küçülteceğiz ve bu bir uyarı ve uyarı web sitesini bozduğumu söylüyor, ancak bir web sitesini bozarsa bu riski alacağız, yapabileceğimiz tek şey tıklamayı kaldırıp sorunları teşhis edip sonra hariç tutmak web sitesinin bozulmasına neden olan CSS dosyaları.

Ayrıca CSS dağıtımını optimize edeceğiz, ardından jQuery göçünü kaldıracağız, JavaScript dosyalarını küçülteceğiz, JavaScript dosyalarını birleştireceğiz. Yani birleştirme ve küçültme buna denir. Ve birleştirme ve küçültme, işleme engelleme kaynaklarını elimizden geldiğince ortadan kaldıracaktır. Birleştirme ve küçültme, temel olarak, tüm CSS kodunu almamız, optimize etmemiz, kullanılmayan tüm kodları kaldırmamız ve ardından hepsini birleştirerek küçültmemiz veya hepsini tek bir dosyada birleştirerek birleştirmemiz anlamına gelir.

Bu nedenle, biri CSS ve diğeri JavaScript için olmak üzere yalnızca iki ayrı dosya sunuyoruz. Şimdi buraya geri dönersek, milyonlarca farklı CSS dosyası yüklediğimizi görebiliriz. Dolayısıyla bu araç, tüm bu bireysel CSS dosyalarını alacak ve onları bir araya getirecek ve PageSpeed ​​içgörü raporumuzu yeniden yaptığımızda, şu anda 71'de olduğunu görebileceksiniz.

Tamam, bu yüzden hepsini yaptık. Ayrıca sadece ertelenmiş JavaScript'i yükleyeceğiz. Ve bu, tarayıcı sayfayı oluşturduğunda kodun gerçekten yüklenme şeklini değiştirir. Bununla ilgili daha fazla bilgi edinmek isterseniz, aşağıdaki açıklamada yapabilirsiniz, ancak erteleyerek veya eşzamansız olarak yükleyerek web sitesinin daha hızlı yüklenmesini sağlıyoruz.

Ayrıca resimleri, iframe'leri ve videoları tembelce yükleyeceğiz. Ve bunun yaptığı şey, tarayıcı onlara kaydırdıkça resimlerinizi yüklemektir. Yani tembel yükleme yapmazsanız, sayfa yüklendiğinde sayfadaki tüm görseller yüklenir. Ve bu, gereksiz verileri yükler, çünkü kullanıcınız kaydırma yapmazsa, kimsenin sebepsiz yere göremeyeceği bir görüntüyü görünüm alanından yüklersiniz. Bu, kullanıcı resmi kaydırdıkça yükleyecektir. Emojileri devre dışı bırakmak, HTTP isteklerinin sayısını azaltır, bu nedenle web sitenizde emoji kullanmıyorsanız ve muhtemelen kullanmamanız gerekiyorsa, bu, WordPress'in görüntü dosyasını çağırma ihtiyacını azaltacaktır.

WordPress yerleştirmelerini devre dışı bırakacağız. And then we're also going to set up word WP caching. And we're going to set up WP caching, because we're going to use the EWWW image optimizer in the next step to optimize our images. So we've done all of this. We've optimized our files, we've done media, we've set up our cache. Now we're going to preload things. So we're going to activate pre loading, which is already there. And then we're going to preload bonds.

And if your PageSpeed report tells you to preload fonts, then you can do that. I don't believe that anywhere in this. It will tell us, Yes, it will. Alright, so here's one font, and here's another font. So basically, what I'm going to do, I'm going to copy the link location, and then I'm going to go into preload because PageSpeed Insights tells us that we want to preload our fonts. And then I'm going to take those fonts and preload them using WP rocket. So basically, we just paste the fonts into here. And then save changes. So that increases the performance by having the fonts load a bit faster. So as you can see, these are the paths of where the fonts are stored in WordPress. And we got those paths from going to preload key requests and then going the fonts and we saw the fonts, we put them in here. Alright, so we're going to save those changes again. And we have pre-loaded all of our fonts. We can try out advanced rules, but typically there aren't any things that you want to add into here.

Additionally, with the database, we can clean up our database and cleaning up the database makes it load a little bit faster and makes it a little bit smaller. But we don't really need to do that. If we have a CDN we can enable it. And CloudFlare are CloudWays. CloudWays offers a CDN and CloudFlare offers a CDN. On all of our websites that are hosted on cloud ways, we will use their CDN and their CDN is a stack path CDN. And basically what a CDN does if you're not familiar, and we have a link in the description describing CDNs ends, if you're not familiar with CDNs, basically what it does is it makes the files load faster by serving them from a data center that is closer to your specific geography. So if I'm in New York, it will load it from a server in New York.

Alright, so after integrating your CDN and this is an optional step, you're pretty much done with WP rocket. So we're going to run this through PageSpeed and see if we made a difference. And we should have because of simple math, we made our files smaller by optimizing them. We're now loading them closer to wherever the website is being called from. We've removed unneeded loading of media.

So if there's an image that isn't going to be viewed, it's not going to be load, then we've set up a cache. So this is only with the WP rocket optimization. So we went from 22 to 47 on mobile, we cut our 11 second loading time down to 4.7 seconds, first contentful paint to 1.7 seconds. Now we're on the desktop report. And we went from around 66, I believe to 85. By just optimizing with those individual things. We dropped our speed index to 1.4 seconds. And that is the combination of WP rocket as well as CloudWays. And we really just solved every issue that it told us to do other than the images.

So that's what WP rocket will do for you. As you can see in real time. I clicked a bunch of buttons, click the Save button, and then ran this report again and instantly saw our speed index jumped to 1.4 seconds. Alright, so we're done with WP rocket. WP rocket, by the way, will do this automatically for every new file that you add to the website. So we're adding new pages to our food truck website, it will go ahead and it will take those pages and it will add them to the cache and it will merge and minify all the files automatically. So as you can see, with WP rocket, it's the same website. It's just a faster loading, same website as before, just the faster loading.

Alright, so next up, we're going to optimize our images. And this is a very fun, simple, easy thing to do. What we're going to do is add a couple things. So basically what this is going to do, it's going to take your JPEG files, it's going to take your PNG files, it's going to resize them too. In adequate size, so if your image is like 4000 pixels wide, it will resize it to 1000 pixels wide or something like that, that works well with the website. And by resizing it less data is loaded. And because less data is loaded, the website loads faster. It will also compress the files so it will compress the data in them and make it faster to load.

The final thing we're going to do is convert JPG to PNG. And we're going to do that by checking off JPG to PNG. And then we're also going to check off JS to PNG rewriting. And then we're also going to force web P. And web p again is a file type that is an image file type and it will load your images a lot faster than JPEG or PNG. And it works on the Chrome browser, the Firefox browser and the support for web P images in Safari is currently in beta web P image support, if the image is not supported, so currently in the general version of Safari, it's not supported. It will just fall back this will automatically fall back to JPG or PNG files.

So as you can see here, we're bulk optimizing all of the images in our media library. So I'll show you that here. We have a bunch of images in the media library. They're big images, high resolution images of food, and what this is doing. It's running through and it's chugging along, you can see it's at 36. We have six minutes remaining for optimization. It's running through, it's taking each image and then it's automatically optimizing them. So you can see here, it's reducing the file size by 49%. And you can see like 50% 40%, so you're saving half of your file size. You're reducing it which means the image that's loading is half as large as the original one. Simple math shows that a smaller image is going to load faster. And because that image loads faster, your entire website is going to load faster, then it converts the reduced image to web P. And web p reduces the file size even more. And it depends on the type of logo, but you can save it by up to in this example, that's 50.7% 58%.

Here, I mean, web P will really reduce the file size and then it will also just load faster in the browser. So once this is done running, it will automatically be serving the images in web P and I'll show you how to check for that. In the meantime, I'm going to go check out the perf matters plugin and optimize even further with perf matters. So there's some overlap between perf matters and WP rocket. So you don't really need perf matters, but this is a really neat little plugin that will help you optimize your website in a couple ways. So what we're going to do is, this is a business website. So we're going to remove specific elements of our website. And we're going to disable couple elements.

The emojis are already disabled, but we'll do it again here. We don't need our REST API. We don't have Google Maps, we do have Google fonts. Lazy loading is already optimized through VP rocket and WoCommerce isn't installed on this website. But I'm going to turn these on either way because it doesn't hurt. So it's a very simple plugin that allows you to turn things on and off. We can install Google Analytics here and this is important because Google Analytics is traditionally a third party JavaScript script, and loading JavaScript from the third party can slow down your website.

So if you run a PageSpeed report, and it says, “stop JavaScript from loading” in the third party, then you can easily do that by using this tool, I can get back to it using this tool, entering the tracking ID and then enabling local analytics, which means the script will be stored from on your website, the analytics JavaScript script will be stored on your website. And the only thing that we'll be doing is pushing information from your site to Google Analytics, traditionally, it pulls the script from Google Analytics, runs it on the website and then pushes data back. So that's just site load a little bit faster.

And then finally, we can hop over to extras and I don't think there's anything we're going to do here. But as you can see, you got a couple additional features in parameters.

Alright, so let's Go check back at our bulk optimization. And we are under bulk optimization and actually looks like I stopped it. So we're going to start it up again. And it'll run and it will do its thing and it will optimize the images.

Alright, so while this is optimizing, I'm not going to close the tab like I did last time. Instead, I'm going to go and show you asset cleanup Pro. And asset cleanup Pro is mainly used in our agency for specific optimization of specific pages. I'm going to show you it here. This is a pretty simple website. So we might not use this to the extent that we use it in other websites. But you get a ton of settings here. So if we have a lot of plugins, we can run to plug in manager and disable the plug in on the website. So an example I like using with this is if you use Gravity Forms on the contact page, you needed on the contact page.

If you're using Gravity Forms, it's loading its CSS and JavaScript scripts on the entire website, even if you only use it on a specific page. So let's assume that this is Gravity Forms, we don't have Gravity Forms installed. But if we had Gravity Forms installed, we could unload it site wide everywhere, make an exception, and then load it on our contact page only. So what this rule does, is only loads this individual plugin on the contact page. And then you can also specify regex.

So if you want to load a plug in on all of your posts, you can use regex expressions to do that. So this is a very easy and simple and powerful tool where you can take plugins that you don't use on every single page and you can only load them on the pages that are loaded up. So if you're using a WooCommerce WooCommerce will load on the homepage. And WooCommerce is a massive, massive collection of scripts. And if you're not using WooCommerce, and you're loading their scripts, you're decimating the speed of your homepage because you're loading a bunch of scripts that aren't used that are very heavy scripts.

So by using this tool, you can deactivate WooCommerce everywhere except for where it's used, which means that you won't be loading the scripts with WooCommerce anywhere but where they need to be loaded. And then you can also run through to the traditional settings and then it will show you that the minification and everything else is already taken care of by WP rocket. And asset cleanup pro says it here and we've used it a lot before together. It works well with WP rocket.

Alright, so the main things that we're going to be using this general settings page for is working Going to swap the font display, which will cause our fonts to load a little bit faster. We're going to run into Google fonts. And we're going to apply swap here too. And then if you remember, we've already pre-loaded the fonts in WP rocket, but if you want to preload fonts, in asset cleanup, you can do that here. But you should only preload the fonts in one plugin, you shouldn't do them in multiple plugins.

Alright, so these are the main settings that we're going to use in this website. In other websites, this is a really powerful plugin. So we might be able to use the tools more if we have a bunch of plugins and stuff like that. But in this website, if you remember, we only have two front end plugins, which are the Elementor plugins. So there's really no use here. The main thing that we use this tool for is individual page optimization. So I'm going to show you that right now. If we go on to the Edit page. And we're not editing with Elementor when the Gutenberg editor and we scroll down, this is where the plug in works is magic, right.

You can manage the CSS and JavaScript of the individual plugins. So what you can do here is you can turn off specific Google fonts, you can turn off specific CSS files, you can turn off specific JavaScript files. So if you're not loading specific files from your website, and they're loading on the page, even if you're not using them to create the actual page, you can turn it off. So in this example, I don't believe there's anything that we can actually turn off. Let me check the front end.

We might be able to turn off the icons. So, I'm going to turn off the icons just to show you what you can do here. But you can turn off individual things. So we're going to turn off our Elementor icons, we're going to turn off the font, awesome icons. And keep them like that.

Additional functionality if you need to load something, but you don't want it to load initially, you can go ahead and defer the loading of the script or loaded asynchronously. So as you can see, with JavaScript, if you want to load something asynchronously, you can do it specifically on the say, stuff like that. Typically, we'll use this to remove plugins, scripts and files that we don't use on this specific page. And by removing these from the loading of the page, the page will just load faster because you're not loading unnecessary things.

So I'm just going to show you and we'll have to re enable this because these are actually used in the Page. But as you can see, all of these bond icons are working now, on the back end, we turned off all the fun icons. So if we reload the page, you will notice that these icons are not showing anymore. And that's because it's not loading the file behind the icons. So if you want to make your website load faster, you can remove all the traditional Elementor and all the traditional Font Awesome icons from all of your pages. And then you can use this tool and go ahead and disable whatever plugins and whatever files I'm at, you need to disable. So we're going re enable that because the page actually loads with those plugins. But this was just to show you, you can identify the specific scripts that you don't use on the page.

So say we didn't have the icons that live here. We can take those icons and we can simply disable them with this tool. So that's what we really use this tool for. We'll Go through every individual page on a website and disable the scripts that aren't used on that site. And then if the scripts are used on that site, we can either move them, we can defer them, we can load them asynchronously.

As you can see, we can do a lot here. So this is a very powerful page specific optimization plugin here. So I'm going to upload it, I'm updated, and by updating it, we're going to turn those script files back on and those CSS files back on. And you'll be able to see that our icons show again.

Alright, so we're going to run back to the image optimization. So we've finished our image optimization, and I want to go back and just discuss what we actually have saved here. So as you can see, this is the general optimization. This is the resizing and compression of the PNG and JPEG files. We're not changing the actual file make up with just changing the size of them, we reduced this file by 55%, with web P, we reduced it by another 21%. And this happens throughout the website with multiple different types of images, and sizes of images and anything like that. And you can see that at the end of the day, we're reducing probably by average, we're reducing by maybe 20% to 30%. And these are not massive file sizes.

So 241 kilobytes, but at the end of the day, if we're reducing all of these kilobytes, they add up to megabytes, and then these megabytes add up. In the long run, if you scale the site, they can add up to gigabytes, so you're saving not only bandwidth on your end, but you're also saving a lot of data that is pointlessly loaded when loading the website, which makes things run faster. So now let's go take a look on the front end of the website and see if our files are now loading in web P because they've been optimized and they've been converted to load in web P format.

So we're going to go to find an image. Here's an image right here. And what we're going to do, we're going to inspect the element, and I'm on Firefox developer. But you can also do this through Chrome. You can do this through Edge any browser that you use. I really like Firefox developer, because it gives you a lot of additional tools. But here we are inspecting an image. And we know this is the image because the image class and we can run over the image URL, and it will show us the image here. To identify that we're serving it in web P format.

Burada doc web p'ye bakın. Bunu bir web p görüntüsü olarak sunduğumuzu bu şekilde biliyoruz. Bu Safari'ye yükleniyorsa, nokta web p atılacak ve yalnızca JPEG olarak yüklenecektir. Bu, eklentinin otomatik olarak yaptığı gerçekten harika bir özellik ve resminizi bir web P olarak otomatik olarak yükleyecek ve size gerçek resim yüklemesini göstereceğim, çalışıp çalışmadığını göreceğiz, kim bilir. Ama görebileceğiniz gibi, bu bir web P olarak yükleniyor. Ve web P olduğu için bu yükleme süresinin neredeyse anında olduğunu görebilirsiniz ve sonra JPEG'e geri dönebiliriz.

Böylece size web P yerine bir JPEG dosyası yükleyecektir. Web P çalışmazsa, gördüğünüz gibi bu bir JPEG dosyasıdır, JPEG olarak yüklenir. Ve sonra sadece nokta web p'yi eklersiniz çünkü EWW optimizasyon eklentisi onu bir JP'ye dönüştürmüştür, her ikisinin de kopyasıdır. Yüklemeyi bir web sayfası olarak görebilirsiniz.

Pekala, görüntü optimizasyonu için çok basit bir araç. Gördüğünüz gibi, diğer her şeyi optimize ederken arka planda çalıştırdık. Pekala, bu temelde web sitesinde yürüttüğümüz optimizasyon.

Web sitesinde yaptığımız her şeyi hızlıca gözden geçirmeme izin verin, ardından PageSpeed'i son kez çalıştıracağım ve ardından size web sitesini optimize ederken yaptığımız gerçek sayıları vereceğim. , Sağ.

Pekala, ilk önce yüklediğimiz tüm eklentileri inceleyeceğiz, dört ana görüntü ve performans optimizasyon eklentisi kurduk. Bu yüzden varlık temizleme Pro'yu kurduk ve bu, kullandığımız sayfaya özel bir optimizasyon eklentisidir. Bu harika bir eklenti. Aşağıdaki açıklamada bağlantılı birçok öğreticimiz var. Kullanılmayan CSS kullanılmayan JavaScript'i kaldırmanız gerekiyorsa, bu eklenti tam size göre.

Bir komut dosyası yüklemiyorsanız, bir sayfada komut dosyası kullanmıyorsanız, ancak hala yüklüyorsanız, bu anlamsızdır, bu yüzden devre dışı bırakmalısınız. Bu eklenti bunu kolayca yapmanızı sağlar.

Sırada bir EWW görüntü iyileştirici var. Bu ücretsiz bir eklentidir ve mevcut görüntülerin dosya boyutlarını küçültmenize olanak tanır ve daha sonra kolayca dönüştürebilir ve ardından web p formatında sunabilirsiniz. Tüm barındırma projelerimiz için kullandığımız sağlayıcı olan CloudWays'deyseniz, bulut yollarındaysanız, EWWW'nin sizin için mükemmel bir araç olduğunu unutmayın. Çünkü sunucunuz halledebilir. Paylaşılan barındırma veya onu engelleyen başka bir ana bilgisayar kullanıyorsanız, başka bir görüntü optimizasyon eklentisi bulmak iyi bir fikir olabilir, ancak CloudWays'te olmanızı öneririz. Ve sonra bu eklentiyi kullanmanızı öneririz.

Gerçekten iyi çalışıyor. Yani, burada her şeyi gerçek zamanlı olarak yaptım. Böylece gerçekten birkaç tıklama olduğunu görebiliyordunuz ve gitmeye hazırsınız. Sonra mükemmel meselelerimiz var. Mükemmel konular, yüklemek istemediğimiz komut dosyalarında ince ayar yapmamıza olanak tanır ve ayrıca birkaç ek ayarı vardır. Ve tüm eklentiler arasında bunun en az gerekli olduğunu söyleyebilirim, ancak bu gerçekten iyi bir performans optimizasyon eklentisi. Gerçekten beğendik. Bunu özellikle tüm web sitelerimizde nasıl kullandığımıza dair bir inceleme videosunu size bağlayacağım. Bu konuyu çok çabuk kapattım.

Ardından, son eklenti WP roketidir ve bu, WordPress web sitesinin arkasındaki temel eklentidir. Gördüğünüz gibi, bu WP roket koşusu. Henüz son koşuyu yapmadık ama 68'den 85'e çıktı ve 3.5'ten 1.4'e düştü. Yani bu çılgınca, sadece WP roketiyle. Ve WP roketinin kullanımının çok kolay olduğunu görebilirsiniz. Bu sadece bir grup tıklama. Sanki bir şeyleri tıklamanız gerekiyormuş gibi.

Pekala, bu yüzden en çok ihtiyaç duyulan kiralama sırasına göre, WP roketi, EWW varlık temizleme profesyonelinin önemli olduğunu söyleyebilirim. Tüm bu eklentileri yükleyin ve temel web siteniz daha hızlı yüklenecektir, bu kadar basit.

Yani bu eklentilerin her biri ile yaptığımız WP roketi her şeyi tekrar gözden geçireceğim. Böylece ya bir kontrol listesi yapabilir ya da sadece ne yaptığımızı hatırlatabilirsiniz.

Bu eklentiyi yüklediğinizde otomatik olarak yüklenen önbelleği ve önbellekleri optimize ettik, tüm dosyalarımızı küçültme, HTML, CSS, JavaScript ile birleştirerek optimize ettik, medya resimlerimizin tembel yüklenmesini ayarladık, her şeyi önceden yükledik.

Sonra da çalışmayan bir CDN'yi entegre etmeye çalıştık. Ve CDN olmadan web sitesinin yeterince hızlı yükleneceğine inanıyorum. Ancak size burada gösterdiğim CDN'ye ihtiyacınız varsa, CloudWay CDN, kurun ve ardından devam edin ve WP roket veya mükemmel konular kullanarak kurun, ikisi de aynı özelliklere sahip.

Yine, bu eklentiler arasında birkaç özellik çakışması vardır. Bu nedenle, belirli bir özelliği yapmak için bu eklentilerden yalnızca birini kullanın. Her iki eklentiyle de parçaları önceden yüklemeye çalışmayın. Muhtemelen kırılacaktır.

Temel Elementor yazı tiplerini WP roketi ile buraya önceden yükledik ve bunu PageSpeed ​​raporunda belirtilen URL'leri ekleyerek yaptık. Bu yüzden "hey, devam edip resimlerinizi önceden yüklemek isteyebilirsiniz?" dedi. Böylece onları bulduk. Yani, yazı tipinizi önceden yükleyin. Böylece önceden yüklememizi istediği yazı tiplerini bulduk. buraya kopyalayıp yapıştırdık, çok basit, çok kolay.

Pekala, temelde WP roketiyle yaptığımız buydu, sonra EWW'ye gittik ve kurduk. İlk olarak, kurduk ve burada pek bir şey yapmadık, değil mi? Burada hiçbir şeyi değiştirmedik, birçok şeyi değiştirebilirsiniz. Ve bu çok güçlü bir eklenti, ama temelde buradaki her şeyi atladık, web P'ye gittik ve bu iki kutuyu işaretledik.

JPEG, PNG'den web P'ye, JavaScript web p yeniden yazma. Ve bu, yalnızca temel Elementor web sitesini kullanıyorsanız işe yarayacaktır. Ve sonra web P'yi de zorladık. Sonra medyaya gittik, toplu optimizasyon. Optimize edilmemiş görüntüleri tararız. Sonra devam ettik ve optimizasyonu çalıştırdık ve zaten optimizasyonu çalıştırdık, bu yüzden tekrar çalıştırmayacağız.

Ayrıca mükemmel konulara da bir göz attık. Bu yüzden önemli olan, bireysel şeyleri açıp kapatmanıza izin veren eklentidir. Ve web sitesinde kullanmadığımızı bildiğimiz bir sürü şeyi kapattık. Ayrıca CDN'nizi buraya dahil edebilirsiniz, gerçekten isterseniz Google Analytics'i yerel olarak dahil edebilirsiniz, bunun gibi şeyler.

Ve bu, web sitenizdeki birkaç yüz milisaniyelik yükleme süresini kısaltır, doğru. Yani bu değerli bir eklentidir. Ancak eklentiler ilerledikçe, bu muhtemelen listenin en altındadır.

Son olarak, varlık temizleme Pro ile karşılaştık, arka uçtaki ayarları inceledik, eğer her yerde ihtiyacınız olmayan, ancak yalnızca özel olarak ihtiyacınız olan eklentileriniz varsa, bunu burada yapabilirsiniz. Ardından, ayarların altından geçebilir ve burada daha fazla herhangi bir şeyi optimize edip edemeyeceğinizi görebilirsiniz. Bizim durumumuzda, tek yapmamız gereken belirli yazı tiplerinin yazı tipi görüntüsünü değiştirmek. Ve sonra, demek istediğim, burada yapabileceğiniz bir sürü ek şey var ama varlık temizliğinin temel ayarlarında başka bir şey yapmamıza gerek yoktu.

Sonra ne yaptık Sayfa sayfa gittik ve sadece bir sayfa yaptık. Ancak her sayfadan her sayfaya geçebilirdik, sayfayı arka uç WordPress'te düzenlemeye gittik, o temel düzenleyici değil, arka uç WordPress düzenleyici, ihtiyacımız olmayan tüm komut dosyalarını inceledik ve çevirdik kapalı. Basit, kapalı, açık. Bu ayarlardan hiçbirini bu sayfada bırakmadık çünkü burada her şeyi kullanıyoruz.

Ancak bir şey kullanmıyorsanız ve bu özellikle bir grup farklı eklenti kullanıyorsanız geçerlidir, bu nedenle bir öğe veya eklenti eklentisi kullandığınızı ve bu özel eklentide herhangi bir eklenti kullanmadığınızı varsayalım. sayfasında, o belirli sayfa için eklentinin arkasındaki komut dosyalarını kapatabilirsiniz; bu, daha az veri yüklediğiniz için sayfanın daha hızlı yükleneceği anlamına gelir. Yani hepsini yaptık. Ve şimdi buradayız.

Web sitemiz olan Elementor'da her şey tamamen optimize edildi ve size önce elemental web sitesini göstereceğim. Ardından sayfa hızımızı çalıştıracağız. İşte web sitemiz ve ayrıca belirtmek istedim ki, bu şeyi CloudWays'de bulut dalgalarında barındırıyoruz. Ayda 10 dolar harcıyoruz, özellikle bu kurulum için 1 GB RAM alıyoruz. Barındırma ve bunun gibi çok basit ve kurulumu kolay şeylerle burada çok iyi gidiyoruz.

Dolayısıyla, bulut yöntemlerinin ücretsiz denemesini kontrol etmeniz gerekiyorsa, web sitenizi gerçekten alabilir, WP Migration ile yedekleyebilir, web sitesini burada yaptığımız gibi bir test alanına aktarabilirsiniz, bu bir test alanında, içe aktarabilirsiniz. web sitesi, test alanında optimize edin. Ardından, gerçekten beğendiyseniz, alanınızı eski ana bilgisayardan yeni ana bilgisayara taşıyın. Ve web sitesinin tam bir kopyası olduğu için her şey etkin bir şekilde taşınacaktır. Böylece CloudWay'lerimizi burada deneyebilirsiniz.

Aşağıdaki açıklamada bir bağlantı var cloudways.com web sitesine gidebilirsiniz. Bu bağlantıyı kullanırsanız ve "izotropik" kodumuzu kullanırsanız, barındırma hizmetinin ilk ayında %30 tasarruf edersiniz, bu aslında bu tek dolarlık plan için 10 ABD doları ekleyebilir. Ancak daha büyük bir planınız varsa, gerçekten eklenebilecek çok sayıda web sitesi kullanıyorsanız ve ortak olduğumuz CloudWays'i destekleyerek bize yardımcı olabilirsiniz.

Pekala, bulutların üzerindeyiz, her şey yolunda. tüm web sitemizi optimize ettik. Ve sonunda PageSpeed ​​raporunu tekrar gözden geçireceğim ve umarım, mobilde 100 üzerinden 22 performans puanımızdan ve masaüstünde 100 üzerinden 64'ten iyileşeceğimize inanıyorum.

Pekala, Google PageSpeed ​​Insights raporunu son kez çalıştıracağım ve sonra gidip olan her şeyi tartışacağım. Yani 85 hız indeksimiz 1.4'tür. Ve görsellerimizi yeni nesil formatlarda sunuyoruz. Burada dikkat edilmesi gereken birkaç şey var.

Görsellerimizi test ettik. Dolayısıyla, bu şeyin bir web P olarak hizmet ettiğini biliyoruz, buradaki sorun bazen bağlıdır, Elementor bir arka plan görüntüsü kullanıyorsa, onu CSS aracılığıyla ekler ve CSS eklenen görüntülerin herhangi bir çözümle web P'ye dönüştürülememesidir. şu anda. Ve bu büyük bir sorun.

Ve bunu blogumuzda yazdık. Ancak arka plan resimlerini en hızlı yüklenen resim türü olan web P olarak değiştiremezsiniz. Gördüğünüz gibi, burada web sitemizi gerçekten hızlandırdık, web sitelerimiz çılgınca hızlı şimdi 1,4 saniyede yükleniyor, ilk içerik boyaması 0,5 saniye, etkileşime geçme süresi 1,2 saniye. Ancak tam olarak ele alamadığımız tek fırsatımız her şeyi web P'ye dönüştürmekti.

Ve onu epi'ye dönüştüremememizin nedeni, bunların Elementor tarafından CSS aracılığıyla eklenen arka plan resimleri olması ve web P desteğini kurmamış olmalarıdır. Bunu blogumuzda yazdık ve daha fazlasını okumak isterseniz sizi GitHub sorununa bağlayacağım.

Ama diğer her şey dahil, tüm fırsatlarımızı düzelttik, öne geçtik ve performans puanımızı 85 yaptık, ki bu 30 dakikada yapıldı ve hız endeksini 1.4 saniyeye çıkardık. Ve videonun başına geri dönerseniz, iki saniyenin altında olmasını istiyoruz. Bu, genellikle tüm WordPress web sitelerimizde, ajans web sitelerimizde, müşteri web sitelerimizde uyguladığımız optimizasyondur ve bu aynı zamanda hızlandırma hizmetinde yapacağımız şeye benzer bir şeydir. Yani, bu öğreticiyi bitirmek için.

Pekala, bu eğitim size web sitemizi temizlemek ve daha hızlı hale getirmek için kullandığımız araçları göstermiş olmalıdır. WP roket kullanıyoruz, varlık temizliği kullanıyoruz, EWWW kullanıyoruz ve mükemmel konular kullanıyoruz. Bunların tümü aşağıdaki açıklamada bağlantılıdır.

CloudWays'de ev sahipliği yapıyoruz. Başlangıçta size neden iyi bir ev sahibi saygın bir ev sahibi kullanmak istediğinizi gösterdim. Yani CloudWays, Bluehost'a karşı basit bir web sitesinde, büyük bir zaman farkı vardı. Daha büyük bir web sitesinde, saat farkı daha da görünür olacaktır. Ve tüm bu optimizasyon videoda canlı olarak gerçekleşti. Bu videoda, görebildiğim kadarıyla, muhtemelen bir saat civarında olacak.

Bunu yaklaşık bir saat içinde çalıştırdık, bir grup onay işaretine tıkladık ve bir grup kaydetme düğmesine tıkladık. Bazı komut dosyalarını kapattık ve açtık ve gerçekten yaptığımız tek şey bu. Umarım, bu video size bir WordPress web sitesinin veya WordPress ile oluşturulmuş bir Elementor web sitesinin hızını artırmayı göstermiştir. karmaşık olması gerekmiyor, delicesine zor değil ve bu sadece doğru araçları kullanmak ve doğru düğmeleri tıklatmak meselesi. Ve bunu yapabilirseniz, web sitenizi çok kısa bir sürede yavaş bir web sitesinden hızlı bir web sitesine dönüştürebilirsiniz.

Ve gördüğünüz gibi, bu tam bir yüz puan değil. Ve mobilde arzulanan bir şey var çünkü web sayfamız cep telefonu için geçerli değildi. Ve yapacağımız şey, bu sorunlara neyin neden olduğunu belirlemek ve daha da optimize etmek. Böylece bir saat içinde web sitesinin hızını neredeyse %100 oranında artırmayı başardık. Ek olarak, daha fazla zamanımız olsaydı, web sitesine girip daha hızlı nasıl yükleneceğini bulmak için daha fazla saatimiz olsaydı, bunu yapardık ve muhtemelen 90 gibi yüksek bir puan alırdık.

Yani bir web sitesinin performansını iyileştirmek çok zor değil. Bu araçlar herhangi bir WordPress web sitesinde kullanılabilir, ancak bunu özellikle Elementor için yapmak istedik çünkü bir öğeyi veya web sitesini nasıl daha hızlı hale getirebileceğinizle ilgili birçok soru olduğunu gördük. Bu yüzden umarım bu eğitim size bunu tam olarak nasıl yapacağınızı göstermiştir.

Eğitimi beğendiyseniz, içeriğimizi beğendiyseniz, kanala abone olun. Daha fazla kişinin görmesine yardımcı olacak öğreticiye bir beğeni bırakın ve bu eğiticinin daha fazla kişiye yardımcı olmasına yardımcı olacaktır.

Herhangi bir sorunuz, yorumunuz veya endişeniz varsa, bunları aşağıdaki açıklamada veya aşağıdaki yorumlarda bırakın. Ve sonra aşağıdaki açıklamada, tüm farklı türdeki şeylere bir milyon milyar bağlantı bulacaksınız. Bazıları bağlı kuruluş bağlantıları olduğundan, kullandığımız eklentilerin bağlantılarına tıklamak bize yardımcı olur.

Yine, tüm bu eklentileri müşteri web sitelerimizde günlük web sitelerimizde kullanıyoruz, böylece gerçek anlaşmayı anladığınızı bilirsiniz. Umarım bu yardımcı olmuştur ve çok yakında başka bir videoda görüşmek üzere.