اجعل موقعك سريعًا: الجزء 1
نشرت: 2015-03-18إنه ليس سرا: مستخدمو الويب اليوم بحاجة إلى السرعة. مع زيادة سرعة اتصالات الإنترنت والخلوية وأسرعها ، يتوقع المستخدمون تحميل المواقع بسرعة ، ومن مهمة المطور أن يفعل ما في وسعه لخدمة هذه الصفحات بسرعة. إذن كيف تجعل موقعك يشتعل بسرعة؟ إليك ما يجب أن تفعله على وجه التحديد عند الإنشاء باستخدام WordPress.
أول شيء أولاً: اختبر سرعة موقعك
يمكن تقسيم الأداء إلى فئتين رئيسيتين: الواجهة الأمامية والخلفية. أنا أعتبر أن النهاية الخلفية هي أي شيء متعلق بالخادم وكيفية تعبئة البيانات على الصفحة (كود PHP الخاص بك في قالبك هو "النهاية الخلفية"). تتكون الواجهة الأمامية من جميع أصولك (CSS وجافا سكريبت والصور وما إلى ذلك) والترميز. كل ما يقرأه متصفح الويب ويفسره هو "الواجهة الأمامية". السبب في أنني أقوم بهذا التمييز فيما يتعلق بالأداء هو أنه من الجيد معرفة ما تقوم بتحسينه ، والأهم من ذلك ، أين تحتاج إلى التحسين أكثر.
لاختبار سرعة موقعك ، أوصي باستخدام مزيج من WebPagetest و Google PageSpeed Insights. يعطينا WebPagetest فكرة جيدة عن الوقت الفعلي (بالثواني) الذي يستغرقه تحميل الموقع ، مما يمنحك بعض المقاييس الجيدة لمعرفة ما إذا كانت الواجهة الخلفية أو الواجهة الأمامية تتسبب في تحميل الموقع ببطء. تُعد PageSpeed Insights هي الأفضل للنظر في كيفية عرض موقعك بواسطة المتصفح وما يمكنك تحسينه في الواجهة الأمامية.
ضع في اعتبارك أن هذه المقالة تركز على مواقع WordPress المخصصة تمامًا. إذا كنت تجري اختبارات سرعة على موقع ما باستخدام سمة ضخمة و 19 مكونًا إضافيًا لجهة خارجية (يمكن أن تبطئ المكونات الإضافية كلا من الواجهة الأمامية والخلفية) ، فابدأ بالوصول إلى قائمة فارغة وتنشيط المكونات الإضافية ببطء واحدًا تلو الآخر للعثور عليها التي تعمل على إبطاء الأمور.
أداء الواجهة الأمامية
كيفية تحسين إمكانية الوصول إلى سمة WordPress الخاصة بك الآن
لا يمر يوم لا أستخدم فيه الويب ، ولا حتى عندما أكون في إجازة. سأأخذ تخمينًا جامحًا يمكنك ربطه. أكثر وأكثر ، يلعب الإنترنت ...
القاعدة الذهبية للأداء ، وفقًا لكبير مسؤولي الأداء في Fastly ، ستيف سودرس ، هي أن 80-90٪ من إجمالي وقت تحميل الصفحة يتكون من الواجهة الأمامية (قاعدة 80/20). تعتبر نسبة 10 إلى 20٪ للجهة الخلفية مهمة للغاية ، ولكن حتى إذا كنت تستخدم أسرع أموال مضيفة يمكن شراؤها ، فلن يفي موقعك بإمكانياته الكاملة دون تحسين الواجهة الأمامية للتأكد من إدراك المستخدمين لذلك يتم التحميل بسرعة. الإدراك مهم عندما يتعلق الأمر بتحسين الواجهة الأمامية. لن يهتم المستخدم بالوقت الذي يستغرقه تحميل الموقع من حيث الثواني. كل ما يهمهم حقًا هو السرعة التي يمكنهم بها التفاعل معها ورؤية المحتوى أو تنفيذ الإجراءات دون تأخير. كي لا نقول إنه لا يجب أن تقلق بشأن وقت التحميل الفعلي (يجب عليك ذلك) ، ولكن باتباع الأساليب أدناه ، يمكنك التأكد من أن موقعك في حالة قابلة للاستخدام بأسرع ما يمكن ، متبوعًا بسرعة بتحميل كامل للصفحة كل الأصول.
CSS
أهم شيء تفعله باستخدام CSS قبل تسليمه إلى المتصفح هو ضغطه وإزالة المحددات غير المستخدمة. الحصول على سير عمل تطوير جيد لأسفل عند تطوير السمات يجعل هذه العملية تافهة ، خاصة إذا كنت تستخدم معالجًا مسبقًا مثل Sass. أستخدم Grunt ، وهو عبارة عن عداء مهام JavaScript ينفذ الأوامر نيابة عنك أثناء التطوير. يوجد مكون إضافي لـ Grunt يسمى grunt-Contrib-sass يقوم ببساطة بتجميع جميع ملفات Sass الخاصة بك في ملف واحد (إذا كنت تستخدم أجزاء Sass ، أي) ، ويصغرها ويضغطها. قم برمي المكوّن الإضافي grunt-Contrib-watch فوق ذلك وسيقوم بتشغيل مهمة Sass كلما قمت بحفظ ملف. سهل! لا تضيع وقتك إذا كنت لا تستخدم أحدث وأكبر منهجية CSS ، ولكن حاول اتباع نوع من المعايير أثناء تأليف CSS لتجنب الازدواجية وأحجام الملفات الضخمة.
بمجرد أن تصبح ورقة الأنماط جاهزة للعمل ، فإن أسهل طريقة (وهي الطريقة القياسية إلى حد بعيد) لتحميلها هي الرجوع إليها في <head> ؛. بهذه الطريقة ، يقوم المتصفح بتحميله ويوزعه قبل تحميل باقي عناصر DOM. ومع ذلك ، هناك تقنية جديدة حيث تكون الأنماط "الهامة" مضمنة في <head> ثم يتم تحميل ورقة الأنماط الكاملة بشكل غير متزامن باستخدام JavaScript. لا أستخدم هذه التقنية حقًا إلا عندما أحاول تمامًا تحميل موقع (أو إدراك تحميله) في أقل من ثانية ، ولكن من الرائع النظر إليه ومعرفة ما إذا كان يتناسب مع سير عملك. تحتوي مجموعة Filament Group على مقالة واسعة النطاق حول استخدام هذه التقنية.
جافا سكريبت
فهم كيفية استخدام WordPress لـ MySQL
بشكل عام ، يمكن تقسيم WordPress إلى جزأين: المنطق والقوالب التي تولد الشكل والمظهر لموقع WordPress وقاعدة بيانات MySQL التي تخزن كل المحتوى والقوى ...
القاعدة (القواعد) الذهبية لتحسين JavaScript بسيطة: تقديم أقل عدد ممكن من ملفات JavaScript وتصغيرها وسلسلها. يمكن أن تكون مكونات WordPress الإضافية لجهات خارجية ضارة عن طريق تضخيم مستندك بملفات JavaScript غير محدودة الحظر ، لذلك من المهم أن تكون متيقظًا عند اختيار المكونات الإضافية. من الناحية المثالية ، ستجمع جميع ملفات JavaScript في ملف واحد ثم تصغرها. في الأوقات التي يتعذر فيها دمج جميع ملفاتك في ملف واحد ، توجد سمات HTML تسمى "غير متزامن" و "تأجيل" يمكن استخدامها لتحميل ملفات JavaScript بشكل غير متزامن أو بمجرد تحميل باقي الصفحة.
المكان الأكثر شيوعًا في الوقت الحاضر للإشارة إلى JavaScript هو أسفل المستند ، قبل علامة الإغلاق مباشرةً. ومع ذلك ، هناك تقنيات أكثر تقدمًا لتحميل JavaScript. مرة أخرى ، أجرت شركة Filament Group الكثير من الأبحاث حول هذا الموضوع ولديها العديد من المشاريع مفتوحة المصدر التي يمكنك استخدامها إذا كنت تهدف إلى الحصول على وقت تحميل سريع للغاية للصفحة (بالمناسبة ، أنا لست تابعًا لـ Filament Group ؛ أنا فقط أعتقد أن أشياءهم رائعة). يبدو أن أفضل طريقة هي تحميل البرامج النصية ديناميكيًا عن طريق تضمين دالة صغيرة في <head> ؛ يقوم بعد ذلك بإلحاق علامات البرنامج النصي دون حظر بقية الصفحة. لمزيد من المعلومات ، تحقق من البرنامج النصي loadJS.
الصور
غالبًا ما تكون الصور هي أكبر الملفات في الصفحة ، وهي المسؤولة عن أكبر تأخير في وقت تحميل الصفحة. لكن الشيء الجيد في الصور هو أنه ، على عكس CSS و JavaScript ، تقوم معظم المتصفحات بتحميلها بشكل غير متزامن. يساعد ذلك على الأقل في الأداء المتصور للصفحة ، لكنك لا تزال تريد التأكد من أ) أنك تقدم أقل عدد ممكن من الصور و ب) يتم ضغط هذه الصور قدر الإمكان.
أدوات الضغط ضرورية للضغط على الصور الزائدة قدر الإمكان. ImageOptim هو تطبيق Mac رائع يقوم بذلك بشكل جيد ، جنبًا إلى جنب مع OptiPNG و jpegtran للاستخدام مع متسابقي المهام مثل Grunt.
الخطوط
خطوط الويب شائعة جدًا هذه الأيام. أستخدم Google Web Fonts في كل مشروع تقريبًا ، ولكن حتى وقت قريب لم أكن أدرك الأداء الذي كنت أحصل عليه بمجرد الرجوع إليها في <head> . كانت نسبة الأداء صغيرة ، ولكن هذه مقالة حول جعل المواقع تشتعل بسرعة فائقة ، لذلك كل شيء مهم! للحصول على أفضل أداء باستخدام خطوط الويب ، أوصي باستخدام Web Font Loader ، الذي تم تطويره بالاشتراك بين Google و Typekit. إنه برنامج نصي مفتوح المصدر يدير تحميل الخطوط الخاصة بك من أطراف ثالثة مثل Google Web Fonts ويسمح لهم بالتحميل بشكل غير متزامن (هل سئمت هذه الكلمة حتى الآن؟).
كما هو متوقع ، هناك بعض التهيئة اللازمة لدمج Web Font Loader في مشروعك ، لذا تحقق من المشروع على GitHub للحصول على تفاصيل حول كيفية إعداده.