Tek bir CSS kodu ile websitenizin hızını arttırabilirsiniz!

in #programming4 years ago

Google, 2020'de Chrome için 85'inci sürümünü yayınladı. Önceki büyük güncellemeler gibi bu güncellemede de Chrome'a bir dizi düzeltme ve yeni özellik geldi tabii.

Bir websitesi için bir site veya sayfa geliştirdiğimizde, sayfayı kullanıcılara göstermek için birkaç adım gerekir. Tarayıcı, sitemizin ilk pikselini çizmeden önce pek çok şey yapar. Tüm bu ayarlamalardan sonra sayfadaki ögeleri tek tek çizmeye başlar.

image.png

Chrome 85'in yayınlanmasından sonra, developerlar artık basit bir CSS kodunu kullanarak bu işlemileri hızlandırabilirler. Bu CSS kod bloğu sayesinde, tarayıcıya belirli bir element pencerede görünür olana kadar o elementin render edilmesinin atlanabileceğini söyleyebiliyoruz. Peki nedir bu sihirli kod bloğu?

#element { content-visibility: auto; }

image.png

Zaten projemden birine uyguladım ve performans öncekinden etkileyici bir şekilde arttı. Daha önce Google Lighthouse hızı 71 olan bir websiteme bu tekniği uyguladığımda performans skorunun 85 olduğunu gördüm. Ki bu gerçekten etkileyici.

Siz de sitenizde bu yöntemi kullanırsanız lütfen sonuçlari paylaşın. Iyi hackler!

Detaylar: web.dev/content-visibility/

Sort:  

Hello @erdeniz! This is @anggreklestari from @OCD team. We saw that you already posted your first post here in Hive! Congratulations and welcome! However, it would be awesome if you do an introduction post. As a sample of what an intro post is, you can refer to this intro post for reference:

Keeping Up With the Buzz - My Introduction to the Hive Community

There's no specific format on how you do your intro post, but there is some suggested content that we would love to see in your post. Information like who are you and where you're from, how did you discover Hive or who invited you, what types of content you want to see here and the types that you want to produce, and what are your expectations in this platform. There's no pressure on this. You can choose whatever information you would like to share.

Well, you can explore the communities that suitable for your content. You can read some of the communities in this post: OCD Communities Incubation Program

If you have questions, you can hop into OCD's Discord server and we'll gladly answer your questions. For now, @lovesniper will follow you and we are looking forward to your intro post!

Congratulations @erdeniz! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :

You distributed more than 10 upvotes.
Your next target is to reach 50 upvotes.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Check out the last post from @hivebuzz:

Hive Tour Update - Account creation and Account Recovery steps
Support the HiveBuzz project. Vote for our proposal!