تحميل الأزرار الاجتماعية Lazy Load with Socialite.js

لوحة مفاتيح السرعة

اليوم قضيت يومًا رائعًا مع فريق الويب في Angie's List. تعمل Angie's List على تطوير موقعها إلى مكتبة موارد مذهلة ... وطوال الوقت استمروا في تسريع موقعهم. يتم تحميل صفحاتهم بسرعة مذهلة. إذا كنت لا تصدقني ، انبثق هذه الصفحة على ابواب المرآب.

تتضمن الصفحة الصور والفيديو والأزرار الاجتماعية ... ولا يزال يتم تحميلها في أجزاء من الثانية. مقارنة موقعهم بموقعي يشبه سباق بريوس بطائرة F-16. لم ينتهوا بعد ، فهم يبحثون دائمًا عن طرق لتحسين تجربة العملاء والحصول على المحتوى الذي تم العثور عليه ومشاركته.

ليس لدينا فريق تطوير بدوام كامل ولا موارد لشركة عامة ، لذا فإن تقدمنا ​​أبطأ قليلاً من Angie's List. لدينا مضيف رائع مع دولاب الموازنة - استخدام التخزين المؤقت المتقدم و CDN ، لكننا نعلم أنه لا تزال هناك بعض الأشياء التي تؤذينا. على سبيل المثال ، لم يتم تحسين صورنا. هناك خدمات يمكنك من خلالها تحويل صورك إلى جزء صغير من حجمها مع الحفاظ على وضوحها ... نحن ننظر إليها.

بينما كنت أعرض لهم موقعنا ، تراجعت وعلقت رأسي بينما تجمدت الصفحة عند تحميل زر اجتماعي. أعتقد أنه كان Facebook. عذرًا ... ظهر الزر بعد ثانية أو ثانيتين وتم تحميل باقي الصفحة. قرف.

عندما وصفت المشكلة ، توصل مهندسهم على الفور إلى حل ، Socialite.js. يوفر Socialite طريقة سهلة للغاية لتنفيذ وتفعيل عدد كبير من أزرار المشاركة الاجتماعية - في أي وقت تريده. عند تحميل المستند ، عند تمرير مؤشر الماوس ، على أي حدث! نظرًا لأن Socialite يقوم بتحميل الأزرار بشكل غير متزامن ، فلن يتم تعليق المستند أثناء انتظار 50 كيلوبايت من الوسائط الاجتماعية.

لحسن الحظ ، هناك بالفعل مكون إضافي لبرنامج WordPress يتضمن Socialite ، يسمى WPSocialite. الليلة ، قمت بنزع كل التعليمات البرمجية المخصصة الخاصة بي لتحميل الأزرار وتنفيذ WPSocialite. تمكنت من تخصيص CSS وتعديل الأزرار التي أردتها. أتطلع إلى إضافة بعض الأزرار الإضافية في المستقبل - مثل Buffer أو Reddit ... ولكن هذا مثالي في الوقت الحالي!

ما رأيك؟

يستخدم هذا الموقع نظام Akismet لتقليل الرسائل الضارة. تعرف كيف تتم معالجة بيانات تعليقك.