ShareChat แก้ไขปัญหาความหน่วงเพื่อเพิ่มการเลื่อนฟีด 60%
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ข้อมูลเบื้องต้น
ShareChat เป็นแพลตฟอร์มโซเชียลมีเดียชั้นนำในอินเดียที่อนุญาตให้ผู้ใช้แชร์ความคิดเห็น บันทึกชีวิต และทำความรู้จักเพื่อนใหม่ในภาษาของตนเอง ฟีเจอร์อื่นๆ ได้แก่ ห้องแชทและการส่งข้อความส่วนตัว ซึ่งช่วยให้ผู้ใช้แชร์วิดีโอ มุกตลก เพลง และเนื้อหาโซเชียลอื่นๆ ที่อิงตามภาษาได้ ShareChat มีพันธกิจในการเป็นหัวหอกของการปฏิวัติอินเทอร์เน็ตในอินเดีย และกำลังเปลี่ยนแปลงวิธีที่ผู้ใช้อีกพันล้านคนจะโต้ตอบบนอินเทอร์เน็ต
แอปในตัวเลข
- ยอดดาวน์โหลดกว่า 100 ล้านครั้ง
- ผู้ใช้ที่ใช้งานอยู่รายเดือนกว่า 180 ล้านคน
- ครีเอเตอร์กว่า 32 ล้านคน
- 15 ภาษาอินเดียที่แตกต่างกัน
- ~1.5 ล้านโพสต์ที่สร้างขึ้นทุกวัน
ความท้าทาย
เมื่อ ShareChat เติบโตขึ้นจนเป็นที่ชื่นชอบของผู้คนนับพันทุกวัน แอปก็ต้องเผชิญกับความท้าทายในการส่งเฟรมใหม่ๆ อย่างสม่ำเสมอ ซึ่งส่งผลให้เวลาในการตอบสนองไม่ดีและขัดขวางประสบการณ์ของผู้ใช้
ด้วยเหตุนี้ แอปจึงมีจำนวนเฟรมที่หลุดหรือล่าช้าเพิ่มขึ้น (หรือที่เรียกว่า "Jank") การแก้ไขปัญหา Jank เหล่านี้ด้วยการปรับปรุงเฟรมที่ช้าและหยุดนิ่งจึงมีความสำคัญอย่างยิ่งในการมอบประสบการณ์ที่ราบรื่นแก่ผู้ใช้ทั้งหมด นอกจากนี้ ยังมีบทบาทสำคัญในการทำให้ผู้ใช้ใช้เวลาในแอปมากขึ้น เพิ่มการมีส่วนร่วม และช่วยปรับปรุงคะแนนของ ShareChat ใน Android Play Store
วิธีที่พวกเขาทำ
ShareChat ร่วมมือกับทีมความสัมพันธ์กับนักพัฒนาแอปของ Google เพื่อลด Jank และสร้างผลลัพธ์ทางธุรกิจในเชิงบวกด้วยการปรับปรุงเฟรมที่ช้าและหยุดนิ่ง (Jank) ในแอป โดยเฉพาะอย่างยิ่ง ShareChat ได้มุ่งเน้นการปรับปรุงปัญหาต่อไปนี้
Shared RecyclerView Pool - จากการทำโปรไฟล์ เราพบว่าการสร้าง Viewholder ที่แตกต่างกันใช้เวลานานกว่า จึงได้สร้าง Shared RecyclerView Pool ขึ้นมาเพื่อลดเวลานั้น นอกจากนี้ ยังช่วยลดต้นทุนในการสร้าง Viewholder สำหรับฟีดที่คล้ายกันด้วย
การส่งเลย์เอาต์มากเกินไป - จากการสร้างโปรไฟล์ เรายังพบว่า Viewholder บางรายการขอ requestLayout เพิ่มเติม ในการเพิ่มประสิทธิภาพ เราได้อัปเดตโค้ดให้ใช้ค่าในเวลาที่สร้างแทนที่จะใช้ทุกครั้งที่มีการเชื่อมโยง จึงช่วยประหยัดค่าใช้จ่ายในการเรียกใช้ requestLayout เพิ่มเติม
การวาดทับ - ปรับเลย์เอาต์ให้ง่ายขึ้นเพื่อลดการซ้อนเลเยอร์และนำสีที่ตั้งค่าแยกกันสำหรับแต่ละเลเยอร์ออก
การลดระดับชั้น - สังเกตเห็นการขยายขนาดที่ยาวนานผ่านการจัดทำโปรไฟล์และการตรวจสอบหน้าจอจำนวนมากด้วยตนเอง เราได้ลดลำดับชั้นโดยใช้ ConstraintLayout เพื่อแก้ปัญหานี้
การเพิ่มยอดดูมากเกินไป - ระบุเวลาการเพิ่มที่นานเกินไปสำหรับยอดดูบางรายการขณะทำการโปรไฟล์ ระบบได้แปลงยอดดูเหล่านี้เป็นยอดดูแบบย่อแล้ว
นำงานหนักออกจากเทรด UI - การใช้โปรไฟล์เลอร์ช่วยให้สังเกตได้ว่ามีบางจุดที่เทรดหลักทำงานหนัก เช่น การสร้าง SpannableStringBuilder พร้อมการติดแท็กและการจัดรูปแบบของทุก RecyclerView Bind, การถอดรหัส BlurHash เป็นต้น เราได้นำงานเหล่านี้ออกจากเทรด UI และย้ายไปยังเทรดเบื้องหลัง
การย้ายข้อมูลจาก Rx ไปยัง Coroutine - การใช้หน่วยความจำยังทำให้เกิดการเรียก GC บ่อยครั้ง และมีจำนวนเธรดสูงมากผ่านเธรด RX มากกว่า 100 เธรด เราได้ย้ายกรณีการใช้งานหลายอย่างไปยัง Coroutine เพื่อแก้ไขปัญหาเหล่านี้
การใช้ Coil สำหรับการโหลดรูปภาพ - Glide ทำให้เกิดปัญหาขณะโหลดรูปภาพ โดยเฉพาะในคอมโพเนนต์ที่สร้างผ่าน Jetpack Compose นอกจากนี้ ยังพบว่าขณะโหลดรูปภาพใน LazyColumn แถบเกณฑ์การแสดงผลสูง เหตุการณ์เหล่านี้ทำให้เราตัดสินใจใช้ Coil ในการโหลดรูปภาพ
การล้างและปรับโครงสร้างโค้ดเก่า - การนำโค้ดเก่าและการทดสอบออกช่วยนำมุมมองที่ซ่อนไว้ที่ไม่จำเป็นออกจาก UI และช่วยเขียนหน้าจอบางส่วนใหม่ในวิธีที่ดีขึ้น
ผลลัพธ์
การวิเคราะห์จุดที่ควรปรับปรุงและระบุกลยุทธ์การเพิ่มประสิทธิภาพช่วยให้ ShareChat ปรับปรุงประสบการณ์โดยรวมของผู้ใช้ได้ พร้อมทั้งเพิ่มอัตราการมีส่วนร่วมและการให้คะแนนใน Play Store ด้านล่างนี้คือภาพรวมเชิงปริมาณของผลลัพธ์ที่ ShareChat ได้รับ
- ลดเฟรม "แสดงผลช้า" ใน Play Store ประมาณ 45%
- ลดเฟรมที่ "หยุดนิ่ง" ใน Play Store ได้ประมาณ 30%
- อัตราเฟรมที่กระตุกสำหรับทุกๆ 10,000 เฟรมที่แสดงผลลดลงจาก 10.72% เป็น 3.98%
- การเลื่อนฟีดเพิ่มขึ้น 60%
- คะแนนโดยรวมใน Store เพิ่มขึ้นจากประมาณ 4.0 เป็น 4.3
- การมีส่วนร่วมกับโพสต์เพิ่มขึ้น 10%
"ที่ ShareChat เป้าหมายของเราคือการเป็นแอปโซเชียลมีเดียที่ดีที่สุดที่สร้างความพึงพอใจให้แก่ผู้ใช้
ซึ่งหมายความว่าเราต้องเป็นแอปที่มีประสิทธิภาพดีที่สุดด้วย
การทำงานร่วมกับทีมนักพัฒนาซอฟต์แวร์สัมพันธ์ของ Google ช่วยให้เราทราบถึง
จุดที่ควรปรับปรุงในอุปกรณ์ของผู้ใช้ระดับล่างที่ใช้กันมากที่สุด เราได้เรียนรู้แนวทางปฏิบัติและเครื่องมือด้านประสิทธิภาพที่ดีที่สุดเพื่อระบุและแก้ไขเฟรมค้าง ความกระตุก
การวาดทับ และ ANR"
- Vihaan Verma, ผู้จัดการฝ่ายวิศวกรรม ทีม Android ที่ ShareChat
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-27 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-07-27 UTC"],[],[],null,["# ShareChat addresses Jank issues to increase feed scrolling by 60%\n\nIntroduction\n------------\n\nShareChat is a leading social media platform in India that allows users to share their opinions, document their lives, and make new friends in their native language. Other features include chatrooms, and private messaging, enabling users to share videos, jokes, songs and other language-based social content. On a mission to spearhead India's internet revolution, ShareChat is changing how the next billion users will interact on the internet.\n\nThe app in numbers\n\n- **100 Million+** downloads\n- **180 Million+** Monthly Active Users\n- **32 Million+** content creators\n- **15** different Indian languages\n- **\\~1.5** Million posts created daily\n\nThe Challenge\n-------------\n\nAs ShareChat grew to be loved by thousands of people daily, the app faced a challenge in consistently delivering new frames leading to poor response times that impeded user experience.\n\nAs a result, the app saw an increased number of dropped or delayed frames (also known as \"Jank\"). Fixing these jank issues by improving slow \\& frozen frames was critical in delivering a seamless experience to all its users. This would also play an important role in making users spend more time on the app, increasing engagement and, in turn, improving ShareChat's rating on the Android Play Store.\n\nHow They Did It\n---------------\n\nShareChat worked with Google's developer relations team to reduce Jank and yield a positive business impact by improving slow \\& frozen frames (Jank) on the app. Specifically they worked on improving the following issues -\n\n- **Shared RecyclerView Pool** - Through profiling, it was observed that creating different viewholders takes longer and to minimize that, a Shared RecyclerView Pool was created. This also helped in removing the viewholders creational cost for similar feeds.\n\n- **Excessive Layout Passesl** - Through [profiling](https://perfetto.dev/), it was also observed that some viewholders were requesting additional requestLayouts. To optimize, the code was updated to take value in creation time instead of every bind, thus saving extra requestLayout costs.\n\n- **[OverDraw](https://developer.android.com/topic/performance/rendering/inspect-gpu-rendering)** - Simplified the layouts to reduce layering and removing colors that were being set separately for each of the layers.\n\n- **Flattening of hierarchy** - Observed long inflation through profiling and manual inspection of many screens. The hierarchy was flattened using [ConstraintLayout](https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout) to solve for this.\n\n- **Excessive View Inflation** - Identified long inflation time for certain views while profiling. These views were converted to viewstubs.\n\n- **Removing heavy tasks from UI thread** - Using a profiler allowed for observation of a couple of places where heavy tasks were being done on the main thread, such as creating SpannableStringBuilder with tagging and styling of every recyclerView bind, BlurHash decoding, etc. These tasks were removed from the UI thread and moved to a background thread.\n\n- **Migrating from Rx to [Coroutine](https://developer.android.com/kotlin/coroutines#:%7E:text=A%20coroutine%20is%20a%20concurrency,established%20concepts%20from%20other%20languages)** - Memory consumption also led to frequent GC calls, and there were very high thread counts via the \\\u003e100 RX thread. Many of the use cases were moved to Coroutine to fix these issues.\n\n- **Adoption of [Coil](https://coil-kt.github.io/coil/) for image loading** - Glide was causing issues while loading images, specifically in the components built via jetpack compose. It was also identified that while loading images in LazyColumn, the rendering threshold bar was high. These occurrences led to the adoption of Coil for image loading.\n\n- **Old code cleanup and refactoring** - Removal of old code and experiments helped to remove unnecessary hidden views from the UI and helped rewrite some of the screens in a better way.\n\nResults\n-------\n\nBy analyzing improvement areas and identifying optimization strategies, ShareChat could improve the overall experience for users while increasing its engagement rate and Play Store ratings. Below is the quantitative overview of the results ShareChat achieved -\n\n- \\~45% reduction in 'Slow rendered' frames on Play Store\n- \\~30% reduction in 'Frozen' frames on Play Store\n- Janky frame rates for every 10K frames rendered reduced from 10.72% to 3.98%\n- Feed-scrolling increased by 60%\n- The overall ratings on the Store increased from \\~4.0 to 4.3\n- 10% increase in consumption of posts\n\n\u003e \"At ShareChat, our goal is to be the best social media app out there that\n\u003e delights our users.This also means being the best in terms of app performance.\n\u003e Our collaboration with Google's developer relations team helped us identify\n\u003e areas of improvement on our most used low-end user devices. We learned the best\n\u003e performance practices and tools to identify and fix frozen frames, janks,\n\u003e overdraws, and ANRs.\"\n\u003e\n\u003e **-- Vihaan Verma, Engineering Manager, Android Team at ShareChat**"]]
