Merhaba arkadaşlar,
Wordpress tabanlı kişisel sitemin uzun süredir kullandığım temasını değiştirme kararı aldım ve sıfırdan bir bootstrap tema kodladım. Tam bitmiş sayılmaz fakat şöyle bir sıkıntı yaşıyorum.
Bootstrap min css kullanıyorum, tasarımı baştan sona hız düşünerek tasarlamaya çalıştım. Fakat bootstrap css kullandığımda sırf bu css dosyası nedeniyle hız testlerinde 20-30 puan düşük çıkıyor. Tekbir sitil dosyası neden bu kadar düşürüyor anlamadım.
Sadede gelirsek. Ben bu sitil dosyasını parçalaya bilirmiyim, bölüp sadece ihtiyacım olan kısımlarını kullansam nasıl olur. Daha önce deneyen oldumu? Yada farklı bir fikir var mı. 150kb lık js dosyası sıkıntı çılartmıyor ama 100 küsür kb.lık css dosyası sıkıntı çılartıyor. Aslında açılış hızı 1-2 saniye arasında, ama puan düşük çıkıyor.
Bootstrap Css Hakkında Fikir? |
10 Mesajlar | 1.313 Okunma | ||
- Üyelik 25.07.2014
- Yaş/Cinsiyet 31 / E
- Meslek Elektrik Teknisyeni
- Konum Fransa
- Ad Soyad C** E**
- Mesajlar 3508
- Beğeniler 488 / 1190
- Ticaret 1, (%100)
- Üyelik 10.11.2013
- Yaş/Cinsiyet 27 / E
- Meslek Front-End Developer
- Konum Adana
- Ad Soyad S** D**
- Mesajlar 1345
- Beğeniler 234 / 472
- Ticaret 12, (%100)
Tabi ki parçalayabilirsiniz. Önerim şudur;
Normal Bootstrap dosyasından ihtiyacınız olan tüm sınıfları boş bir css dosyasına aktarın ve sitenizi bu dosya ile test edin. Her hangi bir bozulma olmuyorsa elinizdeki parçalanmış css dosyasını bir minifier aracı yardımıyla tekrar minimize edin ve kullanın.
Tavisye edilen minifier: https://cssminifier.com
Parçalama önerisi ve dikkat edilmesi gereken yerler:
Parçalama kısmında kullandığınız sınıfları tek tek aratıp yeni bir css dosyasına aktarmanız daha kolay olacaktır. Yani boş bir css dosyası oluşturup kullandığınız sınıfları oraya yapıştırın. Fakat dikkat edilmesi gereken nokta var. Bazı sınıflar Bootstrap dosyasında diğer sınıfların yardımı ile çalışmakta. Örnek verecek olursak;
.row sınıfı css dosyasında .container .row, .container-fluid row şeklinde tanımlanmış. Yani container veya container-fluid sınıfı içerisindeki row olarak tanımlanmış. Aynı zaman da tek başına bir row sınıfı da bulunmakta. Siz sadece tek olan row sınıfını alırsanız row sınıfı çalışmayabilir. Buna benzer bir çok bağlantılı sınıf bulunmakta bootstrapta. Ayıklama yaparken tüm bağlantıları kontrol edip gerekli tüm sınıfları almalısınız.
İşiniz zor ama imkansız değil. Sadece biraz zaman ve uğraş istiyor o kadar.
Kolay gelsin :)
Normal Bootstrap dosyasından ihtiyacınız olan tüm sınıfları boş bir css dosyasına aktarın ve sitenizi bu dosya ile test edin. Her hangi bir bozulma olmuyorsa elinizdeki parçalanmış css dosyasını bir minifier aracı yardımıyla tekrar minimize edin ve kullanın.
Tavisye edilen minifier: https://cssminifier.com
Parçalama önerisi ve dikkat edilmesi gereken yerler:
Parçalama kısmında kullandığınız sınıfları tek tek aratıp yeni bir css dosyasına aktarmanız daha kolay olacaktır. Yani boş bir css dosyası oluşturup kullandığınız sınıfları oraya yapıştırın. Fakat dikkat edilmesi gereken nokta var. Bazı sınıflar Bootstrap dosyasında diğer sınıfların yardımı ile çalışmakta. Örnek verecek olursak;
.row sınıfı css dosyasında .container .row, .container-fluid row şeklinde tanımlanmış. Yani container veya container-fluid sınıfı içerisindeki row olarak tanımlanmış. Aynı zaman da tek başına bir row sınıfı da bulunmakta. Siz sadece tek olan row sınıfını alırsanız row sınıfı çalışmayabilir. Buna benzer bir çok bağlantılı sınıf bulunmakta bootstrapta. Ayıklama yaparken tüm bağlantıları kontrol edip gerekli tüm sınıfları almalısınız.
İşiniz zor ama imkansız değil. Sadece biraz zaman ve uğraş istiyor o kadar.
Kolay gelsin :)
sefacandemir.com.tr
- Üyelik 25.07.2014
- Yaş/Cinsiyet 31 / E
- Meslek Elektrik Teknisyeni
- Konum Fransa
- Ad Soyad C** E**
- Mesajlar 3508
- Beğeniler 488 / 1190
- Ticaret 1, (%100)
Hocam bahsettiğiniz gibi denemeler yaptım fakat randıman alamadım, sistemi öyle tasarlamışlarki bir row sitili 40-50 yerde geçiyor. Hal böyle olunca hiç uğraşmak istemedim. Hem düşündüm zaten böyle yaparsam tema bootstrap olmaltan çıkar. Bu nedenle js ile hile yaptım şuan pagespeed 95 e çıktı 65 den.
Biraz konra konu açacağım zaten fikir için fakat tema demosuna gös atmak isterseniz http:// nedir.ga henüzbtam bitmedi ama şablon yapısı hazır sayılır.
SefaCanDemir
Biraz konra konu açacağım zaten fikir için fakat tema demosuna gös atmak isterseniz http:// nedir.ga henüzbtam bitmedi ama şablon yapısı hazır sayılır.
SefaCanDemir
- Üyelik 02.01.2014
- Yaş/Cinsiyet - /
- Meslek
- Konum
- Ad Soyad ** **
- Mesajlar 1852
- Beğeniler 346 / 707
- Ticaret 5, (%100)
Bootstrap'ta sadece ihtiyacın olan kısımları zaten kullanabilirsin.
Bak burada Customize diye bölüm var ;) Sen sadece ihtiyacın kadarını al diye koymuş adamlar.
https://getbootstrap.com/docs/3.3/customize/
12 tane de JQuery modülü eklemişler. Hangisi lazımsa onu kullanırsın, CSS kısmı da öyle. Hem belki biri hız ister diye Less de koymuşlar. Rengini vs düzenlersin. Kendin elle müdahale etmene gerek yok.
Bak burada Customize diye bölüm var ;) Sen sadece ihtiyacın kadarını al diye koymuş adamlar.
https://getbootstrap.com/docs/3.3/customize/
12 tane de JQuery modülü eklemişler. Hangisi lazımsa onu kullanırsın, CSS kısmı da öyle. Hem belki biri hız ister diye Less de koymuşlar. Rengini vs düzenlersin. Kendin elle müdahale etmene gerek yok.
- Üyelik 25.07.2014
- Yaş/Cinsiyet 31 / E
- Meslek Elektrik Teknisyeni
- Konum Fransa
- Ad Soyad C** E**
- Mesajlar 3508
- Beğeniler 488 / 1190
- Ticaret 1, (%100)
PHPacemisi hocam alakan için teşekkürler fakar ben bootstrap 4 kullanıyorum ve onunda yağılandırma kısmı 3 gibi değil yada ben bulamadım. Benim tek bulduğum yapılabdırma kısmında şablon sitilleri ve renk sittilleri ayrı ayrı verilmiş. yani böyle sadece istediklerimizi ekleyeceğimiz bir kısım bulamadım.
birde bu pagaspeed aracı artık vadesini doldurmuş galiba google'ın yeni aracı lighthouse ile yaptım ölçümlerde performans çok süper görünüyor.
Bende böyle bırakmaya karar verdim zaten açış hızı oldukça iyi sadece orada yeşil görmek istemiştim ama artık gerek olmadığını düşünüyorum.
birde bu pagaspeed aracı artık vadesini doldurmuş galiba google'ın yeni aracı lighthouse ile yaptım ölçümlerde performans çok süper görünüyor.
Bende böyle bırakmaya karar verdim zaten açış hızı oldukça iyi sadece orada yeşil görmek istemiştim ama artık gerek olmadığını düşünüyorum.
- Üyelik 02.01.2014
- Yaş/Cinsiyet - /
- Meslek
- Konum
- Ad Soyad ** **
- Mesajlar 1852
- Beğeniler 346 / 707
- Ticaret 5, (%100)
Olmazmı hiç.
https://getbootstrap.com/docs/4.0/getting-started/contents/
Kompile versiyonu indirdiğin zaman zaten parça parça sadece ihtiyaçlarını kullanabiliyorsun. Diğer taraftan JQuery kısmında ise hangi modülün hangi JQuery dosyasını kullandığını sana tek tek söylüyor.
https://getbootstrap.com/docs/4.0/getting-started/introduction/
Bu öğenin altındaki alt menülere bak. Ona göre ihtiyacını belirle. Mesela sitende tablo kullanmayacaksan, Bootstrap Carousel kullanmayacaksan ona göre import et. Hepsi anlatılmış.
https://getbootstrap.com/docs/4.0/getting-started/contents/
Kompile versiyonu indirdiğin zaman zaten parça parça sadece ihtiyaçlarını kullanabiliyorsun. Diğer taraftan JQuery kısmında ise hangi modülün hangi JQuery dosyasını kullandığını sana tek tek söylüyor.
https://getbootstrap.com/docs/4.0/getting-started/introduction/
Bu öğenin altındaki alt menülere bak. Ona göre ihtiyacını belirle. Mesela sitende tablo kullanmayacaksan, Bootstrap Carousel kullanmayacaksan ona göre import et. Hepsi anlatılmış.
- Üyelik 22.07.2014
- Yaş/Cinsiyet 34 / E
- Meslek Flutter Developer
- Konum Mersin
- Ad Soyad M** A**
- Mesajlar 247
- Beğeniler 23 / 77
- Ticaret 0, (%0)
hocam daha önceden burada paylaştığım html temayı wordpresse çeviriyorum fakat şu özel sidebar bileşenlerimi temaya entegre edemiyorum,referans makale veya keyword verebilirmisiniz,araştırmak için
Codeigniter&PHP | Vue.js | Dart&Flutter
- Üyelik 25.07.2014
- Yaş/Cinsiyet 31 / E
- Meslek Elektrik Teknisyeni
- Konum Fransa
- Ad Soyad C** E**
- Mesajlar 3508
- Beğeniler 488 / 1190
- Ticaret 1, (%100)
s60v3 genelde wordpress.org üzerinden araştırıyorum. artık örnek kod ve fonksiyonlarda mevcut eskisi gibi değil.
onun haricinde wordpress costom sidebar diye aratırsan örnekler bulursun. Tam olarak ne yapmal istiyorsun özel bileşen mi yoksa widget alanı mı?
http://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-wordpress-widget/ siteye de göz atabilirsin oldukça zengin içerikli bir site.
onun haricinde wordpress costom sidebar diye aratırsan örnekler bulursun. Tam olarak ne yapmal istiyorsun özel bileşen mi yoksa widget alanı mı?
http://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-wordpress-widget/ siteye de göz atabilirsin oldukça zengin içerikli bir site.
- Üyelik 13.01.2017
- Yaş/Cinsiyet 33 / E
- Meslek Yazılım
- Konum Trabzon
- Ad Soyad B** M**
- Mesajlar 2771
- Beğeniler 293 / 949
- Ticaret 33, (%100)
s60v3 entegre edemediğin kısımlarla ilgili ayrıntılı bir konu aç yardımcı olurum.
- Üyelik 22.07.2014
- Yaş/Cinsiyet 34 / E
- Meslek Flutter Developer
- Konum Mersin
- Ad Soyad M** A**
- Mesajlar 247
- Beğeniler 23 / 77
- Ticaret 0, (%0)
s60v3 genelde wordpress.org üzerinden araştırıyorum. artık örnek kod ve fonksiyonlarda mevcut eskisi gibi değil.
onun haricinde wordpress costom sidebar diye aratırsan örnekler bulursun. Tam olarak ne yapmal istiyorsun özel bileşen mi yoksa widget alanı mı?
http://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-wordpress-widget/ siteye de göz atabilirsin oldukça zengin içerikli bir site.
onun haricinde wordpress costom sidebar diye aratırsan örnekler bulursun. Tam olarak ne yapmal istiyorsun özel bileşen mi yoksa widget alanı mı?
http://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-wordpress-widget/ siteye de göz atabilirsin oldukça zengin içerikli bir site.
şimdilik sadece html ve css ile oluşturduğum şekilde gözükmesini istiyorum sidebar bileşenlerinin,örneğin popüler yazılar widgeti ekleyince wordpessin default tanımlanan widgeti geliyor,onu temama göre özelleştirmek istiyorum
bunun dışında her yer bitti sayılır
Codeigniter&PHP | Vue.js | Dart&Flutter
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)