developers.google.com
gtmetrix.com
(في الصور نتايج سرعة تويتر و قوقل 😅)
كلا الموقعين بيعطونك نصائح لتحسين السرعة ولكن للأسف هي نصائح محدودة، لذلك إقرأ باقي الثريد زين
(١) دراسة قبل ١٠ سنوات تقريبا من أمازون وجدت ان كل ثانية تأخير في تحميل الصفحة تكلهم ١٠٪ من المبيعات 😰
robotics.stanford.edu
الدراسات بشكل عام تشير إلى أنه لابد أن يتحمل الموقع في اقل من ثانيتين وفوق ٥ ثاني وضعك مزري
(٣) تجربة المستخدم في التطبيق تجعل صبره ينفد أثناء تصفح الموقع اذا ضغط صورة، رابط أو زر وما شاف تغير في الصفحة خلال أقل من ثانية
(٣) الوقت حتى يتمكن المستخدم من التفاعل من الصفحة First Input Delay (FID)
(٤) حجم الصفحة Page Size
(٥) عدد الركوستات Number of HTTP Requests
(٦) الوقت حتى تتحمل الصفحة بالكامل Fully Loaded Time
developers.google.com
مشكلة المقاييس هذي انها تعطيك انطباع خاطيء في التركيز على سرعة عرض الصفحة أو المنطقة رقم ١ في الصورة و تنسى بقية الأشياء أو ما خلف الكواليس والتي غالبا تكون الأهم.
طبعا في التطبيق الموضع أوضح
(١) عمليات القراءة والكتابة IO وخصوصا في قاعدة البيانات وليس من عمليات المعالجة processing
(٢) حجم الموارد الكبير (صور وفيديو، ملفات JS، ملفات CSS) وتكرار تحميلها بدون كاش، وأخص بذلك الصور
(٤) بطء تنفيذ كود السيرفر في اللغات ال interpreted وعلى رأسها PHP و (javascript (NodeJS وهذي أكثر نقطة تتأثر بقوة المعالج ولكنها المشكلة الأضعف
developer.mozilla.org
developer.mozilla.org
github.com
(١) ال CDN تعطيك طبقة ثانية من ال HTTP Cache وهو ال public cache لملفات موقعك موزعة على كافة أنحاء العالم.
(٣) الكاش في ال CDN يكون public يستفيد منه كل مستخدمي موقعك أو تطبيقك اللي في نفس المنطقة الجغرافية
(٥) أيضا تقوم هذه الشبكات بتصغير ملفات الجافاسكربت والستايل minification وهذي تقنية ضغط خاصة بهذه النوعية من الملفات وممكن نتكلم عنها بعدين.
(١) في مرحلة التطوير خلك حذر كثير في تفعيل ال http cache لأنه راح يدوخ راسك. حقيقة خلك حذر في تفعيل أي كاش عموما أثناء التطوير وخله آخر مرحلة وتأكد انك فاهم بالضبط كيف يشتغل بالتفصيل المهم (شف الرابط)
developer.mozilla.org
(٣) لما المستخدم للموقع أو التطبيق ينزل صورة ويكون مفعل لها الكاش ما راح يشوف الصورة الجديدة إلا لما ينتهي وقت تفعيل الكاش لأنه دايما راح يقراها من الكاش وليس من السيرفر
#memcached
memcached.org و
#redis
redis.io
كلا المنتجين يعملان من خلال تخزين البيانات مؤقتا في الذاكرة العشوائية RAM بدل الهارديسك
بالاضافة لتخزين البيانات في الميموري فإن طريقة قراءة البيانات في هذين المنتجين (يعني الاستعلام) سريعة جدا مقارنة بالداتابيز العادية. طيب كيف فكرة الاستخدام؟
(١) تقوم بتركيب واعداد المنتج اللي يعجبك منهم على سيرفرك ( الشغل من الكوماند لاين ويبغى له تعب شوي). هذا مقال مطول للمقارنة بين الأثنين من علي بابا كلاود @Alibaba_Cloud/redis-vs-memcached-in-memory-data-storage-systems-3395279b0941" target="_blank" rel="noopener" onclick="event.stopPropagation()">medium.com
وهذا واحد ثاني من ستاك أوفرفلو stackoverflow.com
(٣) تصمم وتكتب الكود المناسب لعمل الكاش
هذي روابط دروس:
julien.danjou.info
codeforgeek.com
(٥) زي ما قلت سابقا، خلك حذر في استخدام الكاش ودايما جرب واختبر زين قبل تتوهق 😅
SiteGround Optimizer
The SiteGround Optimizer plugin is developed by SiteGround to dramatically improve WordPress website...
W3 Total Cache
Search Engine (SEO) & Performance Optimization (WPO) via caching. Integrated caching: CDN, Page, Min...
en.wikipedia.org
#firebase #firestore
firebase.google.com
(١) يطلب الصفحة من السيرفر بناء على العنوان URL
(٢) يستقبل ملف ال HTML ثم يقوم بقراءته وتفسيره ورسمه parse and render
developer.mozilla.org
(١) تحميل حسب الحاجة عبر برمجة ال HTML والجافاسكربت sitepoint.com
(٢) هذي بعض الأدوات المشهورة لتجميع وتصغير الجافاسكربت
github.com
closure-compiler.appspot.com من قوقل
(٣) بلق ان جاهز ومجاني ومشهور جدا للكاش للوردبريس wordpress.org
(٤) البلق ان الأشهر للكاش وتسريع الموقع لووردبريس ولكن غير مجاني
wp-rocket.me
W3 Total Cache
Search Engine (SEO) & Performance Optimization (WPO) via caching. Integrated caching: CDN, Page, Min...
#1 WordPress Caching Plugin | WP Rocket
Make your website reach the stars. Use the most powerful caching plugin for WordPress. WP Rocket is...
marketplace.digitalocean.com
هذا رابط البلق ان لوحده لو تبي
wordpress.org
OpenLiteSpeed WordPress | DigitalOcean Marketplace 1-Click App
Blazing-fast WordPress with LSCache, 300+ times faster than regular WordPress
LiteSpeed Cache
All-in-one unbeatable acceleration & PageSpeed improvement: caching, image/CSS/JS optimization...
wordpress.org
(١) تقسيم الملف إلى ملفات صغيرة عن طريق ال lazy loading لبعض أجزاء الجافاسكربت باستخدام تقنيات تسمى بال code splitting أو ال tree splitting. هنا تجد شرح كامل من reactjs لهذا الموضوع reactjs.org
وهذا رابط من react create app يوضح واحدة من أشهر المشاكل اللي تواجه مبرمجي reactjs في استخدام السيرفر ووركر
github.com
بالنسبة لي تقنية السيرفس ووركر تقنية رائعة جدا اذا قدرت تشغلها صح 😁 وراح يكون عندك فعلا تطبيق بكل معنى الكلمة كأنه تطبيق جوال
(١) اللي راح نعمل له كاش هنا هو ملفات ال JSON اللي تمثل الرد على طلب ال API وراح نعتمد ال URL مع ال query string كمفتاح لعملية الكاش. ممكن تستخدم أي بيانات تبغاها للمفاتيح ولكن تأكد ما يحصل تصادم collision بحيث تستخدم مفتاحين لنفس البيانات بالخطأ
وهذا أيضا مقال آخر
kennethlange.com
dabapps.com
DB ومثل ال #clustring وكذلك ال #sharding
Loading suggestions...