WP Offload S3 ile WordPress Sitenizin Sayfa Yükleme Süresini İyileştirin: Bir Vaka Çalışması

Delicious Brains'te çalışmanın en güzel yanlarından biri de iş dışında kullandığım ve sevdiğim ürünler üzerinde çalışmak. Ekibe katılmadan çok önce bir WP Migrate DB Pro müşterisiydim ve hala kişisel sitelerde ve yan projelerde günlük olarak kullanıyorum. Ancak, site medya dosyalarını Amazon S3 ve DigitalOcean'a boşaltmak için diğer eklentimiz olan WP Offload Media'yı (eski adıyla WP Offload S3) kullanma gereği duymadım.

Haziran ayında, karımın öğretim kaynakları web sitesinde yeni bir sunucuya taşımak, etki alanını değiştirmek ve yeniden marka dağıtmak için biraz zaman harcadım. Bu yıl odak noktası siteyi büyütmek ve ödeme yapan üye sayısını artırmak. Artan dönüşümlerin bir parçası olarak sitenin hızını ve performansını iyileştirmek istiyorum ve çok sayıda PDF ve resim ile WP Offload S3 ve Assets Pull eklentisi bu tür optimizasyon için kullanmak için mükemmel eklentiler.

Neden WP Boşaltma S3?

Peki neden eklentileri kullanasınız? CloudFront tarafından sunulmak üzere medyanızı Amazon S3'e boşaltmak, içinizin rahat etmesi, para tasarrufu sağlaması ve sayfa yükleme sürelerini iyileştirmesi gibi birçok avantaja sahiptir.

Medyayı S3'e kopyalıyor ve sunucunuzda bırakıyorsanız, wp-content/uploads dizininizin yedeğini etkili bir şekilde oluşturuyorsunuz ve onu yedekleme planınızın bir parçası haline getiriyorsunuz. Ayrıca, S3 depolama maliyetinden daha pahalı olan barındırma konusunda yerden tasarruf etmek için dosyaları S3'e aktarıldıktan sonra sunucudan kaldırma seçeneğini de kullanabilirsiniz.

Medya ve site varlıklarını (Varlıklar Çekme eklentisiyle) sunucunuzdan değil CloudFront'tan sunmak, sunucuya gelen istekleri azaltarak CPU ve IO etkinliğini azaltır. CloudFront CDN, varlıkları sunucunuzun konumu yerine kullanıcıya en yakın konumdan teslim edeceğinden, isteklerin daha hızlı olması gerekir, bu da daha hızlı sayfa yüklemesi, kullanıcı için daha iyi bir deneyim ve Google'ın dikkate aldığı bir metriği iyileştirmeyi sağlar. .

Yükleme süresinde büyük azalmalar veya büyük hız artışları görmeyeceğiz; ancak, bu kılavuzdaki diğer tüm performans iyileştirmelerini yaptıktan sonra, bu yaklaşım, her milisaniyenin önemli olduğu durumlarda değerli ilave hız iyileştirmeleri elde etmek için nispeten basit bir yöntemdir.

Hadi dalalım.

Kurulum

Site Composer ile yönetildiğinden, premium eklentilerimiz için özel Composer desteği sunduğumuz için hem WP Offload S3 hem de Assets Pull eklentisini yüklemek son derece kolaydır.

WP Boşaltma S3 etkinleştirildiğinde, Ayarlar > Boşaltma S3 yoluyla ayarları yapılandırabilirsiniz. IAM kullanıcımı site için kullanılan pakete kısıtlı erişimle ayarladım ve wp-config.php dosyamda erişim anahtarımı ve sırrımı tanımladım. Bu ayrıntıları veritabanının dışında tutmak için yapılandırma dosyasındaki kovayı da tanımladım.

Print Play Learn sitesi, PDF indirmelerini yönetmek için Easy Digital Downloads'ı kullanır ve varsayılan olarak tüm indirmeler wp-content/uploads/edd dizininde saklanır, böylece htaccess veya nginx kurallarıyla kısıtlanabilirler. WP Boşaltma S3, dosyaları S3'e yüklendiğinde özel olarak ayarlamak için EDD ile bir entegrasyona sahiptir. Ancak, mevcut medyayı S3'e toplu olarak boşaltırken, indirme dosyaları özel olarak ayarlanmaz, bu yüzden erişim seviyesini ayarlamak için eklentide bir filtre kullandım ve edd/ yolunu korumak için dizini S3'te ayarladım:

 function ppl_add_edd_dir_to_path( $args ) { if ( false === strpos( $args['SourceFile'], 'uploads/edd/' ) || false !== strpos( $args['Key'], 'uploads/edd/' ) ) { return $args; } $args['Key'] = str_replace( '/uploads/', '/uploads/edd/', $args['Key'] ); return $args; } add_filter( 'as3cf_object_meta', 'ppl_add_edd_dir_to_path', 10, 2 ); function ppl_make_edd_objects_private( $acl, $data, $post_id ) { if ( 'private' === $acl ) { return $acl; } $file_path = get_attached_file( $post_id, true ); if ( false === strpos( $file_path, 'uploads/edd/' ) ) { return $acl; } $parts = explode( '.', $file_path ); if ( 'pdf' !== $parts[1] ) { return $acl; } return 'private'; } add_filter( 'as3cf_upload_acl', 'ppl_make_edd_objects_private', 10, 3 );

Yukarıdaki kod, site çapında kod ince ayarlarını tutmak için kullandığım wp-content/mu-plugins/site.php dosyasına eklendi.

Mevcut Medya Kitaplığının tamamı S3'e boşaltıldıktan ve gelecekteki yüklemeler için Copy Files to S3 ayarı açıldığında, dosyaları S3'ten sunmayı düşünmek istiyoruz. Dosyaların doğrudan S3'ten sunulmaması ve bir CDN'nin avantajlarından yararlanabilmemiz için bir CloudFront dağıtımı ayarlayalım. Bunlar, bir CloudFront dağıtımının ayarlanmasını ve CloudFront'un HTTPS'de özel bir etki alanıyla nasıl kullanılacağını açıklayan en iyi belgelerdir, çünkü sdskh43433k4lk.cloudfront.net cdn.printplaylearn.com gibi çirkin bir CloudFront varsayılan URL'si değil kullanmak istiyorum.

Varlık Çekme Eklentisi

Bulmacanın son parçası, JS, CSS ve görüntü dosyaları gibi sitenin tüm varlıklarının CloudFront tarafından da sunulmasıdır. Bunu başarmak için Assets Pull eklentisini kullanabiliriz ve kurulumu oldukça basittir. Eklenti yüklenip etkinleştirildikten sonra, yardımcı kurulum adımlarını uygulayabilir veya manuel olarak yapılandırabilirsiniz.

Medya kitaplığımla aynı cdn alt etki alanında çalışan aynı CloudFront dağıtımını kullanmak istiyorum, bunun iki dağıtım çalıştırmaya göre bir performans avantajı var. İki DNS girişine sahip olmak (örneğin medya için cdn. ve assets. için varlıklar) iki HTTPS bağlantısı anlamına gelir, ancak tek bir bağlantıyla bir girişe indirgemek, HTTP/2'nin çoğullama eşzamansız bağlantısını kullanır. Ayrıca, tüm varlıkların tek bir alt alan adı altında olması daha iyi hissettirir.

Hem medya kitaplığı hem de sitenizin varlıkları için aynı dağıtımı yapılandırmak için bu belgeye bakın.

Hususlar

Sitenin yerel geliştirme kopyasını, hazırlama sitesini ve elbette sitenin üretim sürümünü çalıştırıyorum, ancak ilk geliştirme ve testten sonra geliştirme veya hazırlama sitemin test görüntülerini S3'e boşaltmasını istemiyorum. Daha önce ortamlar arasında medyayı işleme stratejilerinden bahsetmiştik ve ben burada yalnızca AWS erişim anahtarına ve gizli anahtarın yapılandırıldığı üretim sitesinde 'erişim yok' stratejisini seçiyorum. Diğer ortamlardaki hiçbir yeni medya boşaltılmayacak, ancak mevcut medya CloudFront tarafından sunulacak.

Daha önce 'Sunucudan Dosyaları Kaldır' ayarından bahsetmiştim, yani yerel dosyalar yüklendikten sonra kaldırılır. Teorik olarak bu harika, VPS'imden binlerce PDF'yi ve ilişkili resmi kaldırabilirim (böylece site büyüdükçe disk alanını artırmaya devam etmem gerekmiyor) ve hepsini S3'e koyabilirim. Ancak, bunu yapmanın dezavantajları vardır. Bazı görüntü işleme eklentilerinin görüntü dosyasına erişmesi gerekir ve bu eklenti zamanın %99'unu halletse de sorunlarla karşılaşma olasılığı vardır. Benim için PDF'ler disk alanındaki en büyük boşaltımdır ve asla düzenlenmeyecektir, bu nedenle diğer tüm dosyaların sunucuda kalmasını sağlamak için eklentinin filtrelerinden birini kullanabilirim:

 function ppl_preserve_non_pdf_files_on_server( $check, $file ) { $parts = explode( '.', $file ); if ( 'pdf' !== $parts[1] ) { return true; } return $check; } add_filter( 'as3cf_preserve_file_from_local_removal', 'ppl_preserve_non_pdf_files_on_server', 10, 2 );

Karşılaştığım son şey, CloudFront'tan, özellikle de temamdaki Kaynaklar Arası Kaynak Paylaşımı'na (CORS) tabi olan web yazı tipi dosyalarıyla ilgili varlıkları sunarken bazı konsol hatalarıydı. Burada açıklandığı gibi nginx yapılandırmama eklenen basit bir snippet ile çözüldü.

Sonuçlar

Eklentileri dağıtmadan önce, sonuçları karşılaştırmak ve daha sonra karşılaştırmak için birkaç araç kullanarak sitenin bazı testlerini yaptım.

Her şeyden önce, sitedeki bir sayfaya eşzamanlı 100 istekle 10.000 istek göndermek için Apache Bench'i kullandım:

 $ ab -n 10000 -c 100 https://printplaylearn.com/resources/

Değişikliklerden sonra sitedeki CPU kullanımının (ağırlıklı olarak sitede tam sayfalama önbelleğe alma etkin olduğundan nginx işleminden) azaltılıp azaltılmadığını görmek istedim. İşte Digital Ocean'ın raporlarından ani yükselişler. Eklentileri uyguladıktan sonra CPU artışının ~%5 daha düşük olduğunu görebilirsiniz:

Eklentilerle sayfa yükleme hızının artıp artmadığını test etmek için Sitespeed.io kullandım. Ancak site Londra'da bir DigitalOcean damlacığında olduğundan ve Birleşik Krallık'ta bulunduğumdan, eklentiler bir konumdan her zaman hızlı olmadan önce site varlıklarına yapılan istekler nedeniyle onu makinemden çalıştırmak adil bir test olmaz. bakış açısı. Bu yüzden testleri çalıştırmak için hızla New York'ta yeni bir sunucu kurdum. Docker'ı sunucuya kurmam ve testi çalıştırmak için Docker yöntemini kullanmam gerekiyordu:

 $ docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:7.3.5 https://printplaylearn.com/resources/

Her iki sonucu da inceledikten sonra, eklentileri uyguladıktan sonra sayfa yükleme süresinin ortalama 0,78 saniye azaldığını gördüm, kazanan!

Çözüm

Sonuç olarak, karımın sitesine WP Offload S3 ve Assets Pull eklentisini eklemek bir fark yarattı. Barındırma maliyetlerimi düşürmenin yanı sıra bazı küçük ama etkili performans kazanımları ekledi. Ve özellikle sitenizin performansını artırmak için üstlenebileceğiniz diğer görevlerle karşılaştırıldığında, kurulumu genellikle basitti ve mevcut filtreler, ihtiyaç duyduğum tüm ince ayarların uygulanmasını kolaylaştırdı.

WP Offload S3 ve Assets Pull eklentisini kullanıyor musunuz? Site performansı için tercih ettiğiniz optimizasyonlar nelerdir? Aşağıdaki yorumlarda bize bildirin.