كيف قلصنا وقت تحميل صفحتنا بمقدار 10 ثوانٍ

لا يبدو أن السرعة والشبكات الاجتماعية تعمل معًا عندما يتعلق الأمر بموقع ويب رائع. هاجرنا موقعنا إلى دولاب الموازنة (الرابط التابع) وقد أدى إلى تحسين أداء واستقرار موقعنا بشكل كبير. لكن تصميم موقعنا - مع تذييل سمين عزز نشاطنا الاجتماعي على Facebook و Twitter و Youtube وعلى البودكاست - أبطأ موقعنا إلى حد الزحف.

كان سيئا. أثناء تحميل صفحة رائعة في ثانيتين أو أقل ، استغرق موقعنا أكثر من 2 ثوانٍ حتى تكتمل الصفحة. لم تكن المشكلة في WordPress أو Flywheel ، كانت المشكلة هي جميع العناصر التفاعلية التي قمنا بتحميلها من خدمات أخرى ... عناصر واجهة مستخدم Facebook و Twitter ، صور معاينة Youtube ، تطبيق Podcast الخاص بنا ، لم أستطع التحكم في بطء تحميلها. حتى الآن.

ستلاحظ الآن أن صفحاتنا يتم تحميلها في حوالي ثانيتين. كيف فعلنا ذلك؟ لقد أضفنا قسمًا ديناميكيًا إلى التذييل الخاص بنا والذي لا يتم تحميله إلا عندما يقوم المستخدم بالتمرير حتى تلك النقطة. قم بالتمرير وصولاً إلى أسفل صفحتنا في المتصفح (وليس الهاتف المحمول أو التطبيق أو الجهاز اللوحي) وسترى صورة تحميل تتولى الأمر:

تحميل

باستخدام jQuery ، لا نقوم فعليًا بتحميل قاعدة الصفحة حتى يقوم شخص ما بالتمرير إلى هناك. الكود في الواقع بسيط للغاية:

$ (window) .scroll (function () {if (jQuery (document) .height () == jQuery (window) .scrollTop () + jQuery (window) .height ()) {if ($ ("# placetoload" ) .text (). length <200) {$ ("# plugary"). load ('[full path of page to load]')؛}}})؛

بمجرد أن يقوم المستخدم بالتمرير إلى قاعدة الصفحة ، يقوم jQuery go باستخراج محتويات الصفحة من المسار المحدد وتحميلها داخل div الذي حددته.

على الرغم من أن الموقع لم يعد يستفيد من المحتوى الذي تم تحميله هناك (نظرًا لأن محرك البحث لا يقوم بالزحف إليه) ، فإننا على ثقة تامة من أن سرعة الصفحة ستساعد في الترتيب والمشاركة والتفاعل أكثر بكثير من وجود شخص ما انتظر بفارغ الصبر حتى يتم تحميل صفحتنا ببطء شديد. والأفضل من ذلك كله ، أن الصفحة لا تزال تحتوي على جميع العناصر التي نريد التفاعل مع زوارنا ... دون التضحية بسرعة الصفحة.

لا يزال لدينا بعض العمل الذي يتعين علينا القيام به ... ولكننا نصل إلى هناك!

ما رأيك؟

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