Gereksiz Dosyaları Yüklemeyi ve Web Sitesinin HTTP İsteklerini Azaltmayı Nasıl Durdurursunuz – WordPress Optimizasyon İpuçları
Yayınlanan: 2020-09-08
Crunchify'da, istediğiniz zaman başvurmanız için birden fazla hız optimizasyonu öğreticisi yayınladık.
İçerik sağlayıcımız olarak MaxCDN kullanıyoruz. Neredeyse 4 yıl oldu ve şimdiye kadar çok iyi çalışıyor. Genesis WordPress Framework ve MaxCDN en iyi kombinasyondur. Genesis Framework, varsayılan olarak birçok optimizasyon, Google İşaretleme Şeması, Mobil uyumlu yapı ve çok daha fazlasıyla birlikte gelir.
Geçen hafta MaxCDN hesabıma bakıyordum ve aniden en çok indirilen kaynakları fark ettim. Yukarıdaki resimde gördüğünüz gibi, geçen hafta top 9 out of 10 resource files ~ 5 millions fazla indirildi.
Şaşırdım ve bu kaynağa gerçekten ihtiyacım olmalı mı diye düşündüm. Bu dosyaları ayrı ayrı mı yüklemem gerekiyor? Sitenin yüklenmesi için kesinlikle gerekli olan style.css dosyası dışında gerekli değilse bu dosyalardan nasıl kurtulurum.
Basit numaralarla tüm bu 9 dosyadan nasıl kurtulduğuma başlayalım
Tüm okuyucular için değil
Bu adımlar tüm WordPress okuyucuları için değildir. Crunchify'da Crayon Sözdizimi Vurgulayıcı ve özel temaya özel görüntüler kullanıyoruz, bu nedenle sınırlı kullanıcılar için geçerlidir
Aşama 1
list all of those 9 files . 2. sütun, indirilme sayısını gösterir.
|
1 2 3 4 5 6 7 8 9 |
/ wp - includes / js / wp - embed . min . js 12 , 626 , 575 2.41 GB / wp - content / plugins / crayon - syntax - highlighter / themes / neon / neon . css 11 , 406 , 345 2.61 GB / wp - content / plugins / crayon - syntax - highlighter / css / min / crayon . min . css 11 , 259 , 474 4.50 GB / wp - content / themes / crunchify / images / bg . png 9 , 268 , 221 3.45 GB / wp - content / themes / crunchify / images / bg - pattern . png 9 , 135 , 288 3.41 GB / wp - content / themes / crunchify / images / h3 . png 6 , 289 , 690 1.18 GB / wp - content / themes / crunchify / images / crunchify - logo . png 5 , 476 , 295 7.05 GB / wp - content / themes / crunchify / images / crunchify - sprite . png 5 , 334 , 562 7.45 GB / wp - content / plugins / crayon - syntax - highlighter / js / min / crayon . min . js 4 , 344 , 704 2.60 GB |
Adım 2
Crayon Syntax Highlighter Plugin dosyalarını birlikte gruplayalım.
3 dosya var:
neon.css , crayon.min.css ve crayon.min.js . Bu dosyalardan kurtulmak için toplam 7 ayrıntılı adımla eksiksiz bir ayrı eğitim yazdım. Lütfen üzerinden geçin ve herhangi bir sorun görürseniz bana bildirin.
Aşama 3
Şimdi wp-embed-min.js üzerine gidin. Lütfen WordPress 4.4+ için Otomatik Gömme Komut Dosyası Nasıl Devre Dışı Bırakılır öğreticisini ziyaret edin. Ön uçta gömme dosyasını yüklemeyi durduracaktır.
4. Adım
3 more .png :
bg-pattern.png
Bu resmi üstbilgi ve altbilgi arka planına yüklüyordum. Bunun yerine #333 rengini kullanarak ondan kurtuldum.
crunchify-sprite.png
Kenar çubuğunda sosyal takip düğmelerini göstermek için bu hareketli resmi yüklüyordum. fontawesome yazı tipleriyle değiştirdim.
h3.png
Bunu, bazı konumlardaki H3 gönderilerinin onay işaretini göstermek için yüklüyordum. fontawesome yazı tipleriyle değiştirdim. Aşağıda bir fontawesome eşdeğeridir.
Adım 5
Şimdi sadece 2 dosyamız kaldı. crunchify-logo.png ve bg.png . Bu yüzden image olarak çağırmak yerine bu dosya için base64 image eşdeğerini ekledim.
Önce:
|
1 2 3 4 5 6 7 8 9 10 |
. header - image . site - title a { display : block ; float : left ; min - height : 60px ; text - indent : - 9999px ; width : 100 % ; background - position : center ! important ; background - size : contain ! important ; background : url ( images / crunchify - logo . png ) no - repeat ; } |
Sonrasında:
|
1 2 3 4 5 6 7 8 9 10 |
. header - image . site - title a { display : block ; float : left ; min - height : 60px ; text - indent : - 9999px ; width : 100 % ; background - position : center ! important ; background - size : contain ! important ; background : url ( data : image / png ; base64 , iVBORw0KGgoAAAANSUhEUgAAAmIAAACACAYAAAHfQjXQAABi3UlEQVR42u1dCXhVxfXPQlhcUBEEAQUheQmEPTtucV9xAcLm2r91qYraWnetkR2Sl7AoikutXbRSq9ba1qot1rpVcamKVVFBUZGEbCQkJG + 5 //O778xjMrlbFpJHmPN957vv3WXu3Llzz/zmnDPnxMVp0hQTVF6Sd3zowaONsAPrVpJomz8nuL00x3DjwsK4hM6uW1VVVdjDOcHq6upgp1WqekWu4aXBZk3cb3BnNxg1xF+oQULyPsMw4pUGM2pra0d1WqUa75/sqcHo1Jld8QWgQaz2Ec/jRv0XelmnVaiiNOdxLw0298RBzzmV09TUhIcIoAdUVlbW46F27NhhNDQ0mA8cDAYN6YHrsaXzjqYHXoTrampqkqXjgZ07dxpKA4WpJ0X3id91dXWGuFcoFDLEfvn6DicvDfbyz9K3uvSEEDVAQyAQwANsFD1DbKkhE6R9YWqok6TGeB4PTvuMtWvXJqrXogehAWh7p7TveblnYT9RIpVRJD5j3heVvZXFKc/RxeYnXVmU8qohyeVKf8qrVX7feM+NVliQ3lPwmisykgrz83tckRHZ4r/XzwcVFHIGDyAehD8fAw8u9qufndhWVFTkyo2B8uTGo3KeUD9X3v+JXA/aPieXs2tlqrF+TUZSwwqfQY0XXlsQl0hbo9rvW1J7/7jD8Nvg454abfHMLMONl87KrndptAD3GvMTlXqR4KDyHxyihy2Tz1Wvo+PredSMl/YtU89XPuPoMfQm6kF+NFRVccou2n6ABqos9tXVlZoNiPPiA/emGqH7Uo0qf8qXnhrtqhPTNnlquJnZf3EqB71I9CxlX7T3SfsS5E9HvVb8l0dI+Rx8xtxrvxafI/3vSb+/Id7OjVse2R/5JI21BYnikzTWxkXqUhDXvL50judPdImHRgPffNaYUXExRKJHicGA+D2IAgw0xH/a4xVYNjvbU8PFYqNBJNDoeYkdPNmjtGhmZshLw3XFjEAlgijoURNVeUaQY0CnVyZ7RP+XSfCT8M8yGZ+uYKm3jdCTTk2aNMUqAZ/UrcqtV/VmUb3amqMNTOp1S7Vi7ll3b16nNxjhre1i2uSiJMDMYume71mFhQleGqtyRU64K16kPG+1IlYMhDrnM6R5lpfGKivpmsbatm3bQCsNrTq/lKdge/wzLg==) no-repeat; } |
Her iki görüntüyü de base64 görüntülerine dönüştürdüm. Elde edeceğimiz avantaj, başka bir bağlantı açmak ve görüntü için sunucuya bir HTTP isteği yapmak zorunda kalmamak.
Daha Az İstek = Daha İyi Sayfa yükleme süresi
Görüntüler netliği kaybetmeden (çok küçük olanlar hariç) herhangi bir boyuta ölçeklendiğinden, retina ekranlarda harika görünen SVG (Scalable Vector Graphic) image kullanmanın bazı avantajları vardır.
Bu Data URIs .png veya resimlerle sınırlı değildir, ancak herhangi bir kaynak içindir. İşte çevrimiçi kullandığım basit bir .png'den .svg'ye dönüştürücü aracı.
Özet
Bu eğitim, WordPress'i Hızlandırma ve Performansı Artırma bölümünün bir parçasıdır. Tüm WordPress optimizasyon püf noktalarını ve ipuçlarını burada bulacaksınız.
Bu adımları uygulayarak, 10'dan 9 istenmeyen kaynağın hepsinden kurtuldum. Bu, sayfam çok hızlı yükleniyor çünkü her sayfada 9 daha az istek olacak
Site sayfa hızını artıracak başka ipuçlarınız varsa bana bildirin. Crunchify'da hız ana kriterdir ve bu yüzden çok daha az eklenti kullanıyoruz. Tüm sayfalar within half a second yüklenir.
