🦌 🎠 🎅🏾 تدقيق Chrome 500: الجزء 1. الهبوط 🔗 🎴 👨🏼‍✈️

أدوات المطور في Chrome تحتوي على علامة التبويب Audit. إنها أداة تسمى Lighthouse ، والتي تعمل على تحليل مدى جودة تطبيق الويب.

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

إذا لم يكن لديك القدرة على تثبيت chrome ، فيمكنك تثبيت المنارة من npm والعمل معها من وحدة التحكم.

في المقالة ، لم أبدأ بمقارنة كل توصية بقسم معين ؛ وبدلاً من ذلك ، قسمت الأقسام إلى حلول تقدمت بها والتي أحبتها Ligthouse. هذا ليس كل ما يوصي به ، إنه الأكثر إثارة للاهتمام فقط. التوصيات المتبقية بسيطة للغاية ، ومثل SEO منذ فترة طويلة مألوفة للجميع.

الأداء

اختيار الخادم

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

تهيئة التطبيق

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

من الناحية المثالية ، يجب أن يبدو مثل هذا:

<!DOCTYPE html> <html lang="ru"> <head> <title> </title> <link rel="manifest" href="./manifest.webmanifest"> <link rel="shortcut icon" href="content/images/favicon.ico" type="image/x-icon"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width" /> <meta name="theme-color" content="#425566"> <meta name="Description" content=" "> </head> <body> <div id="loader"> loading </div> <script async> // todo:     </script> </body> </html>

لا ينبغي أن يكون هناك أي محتوى فيه ، بل فقط الكود الضروري لتهيئة التطبيق ، والذي سيتم تحميل التطبيق نفسه والمحتوى.

لا تتناول هذه المقالة عملية التحسين للروبوتات ، لكنني أقول أنه من الأسهل التقاط روبوت معين وإعطاء ما يحتاج إليه روبوت معين. سوف يفهم Google bot نفسه كل شيء من المحتوى الذي سيتم تحميله لاحقًا.

استخدام شاشة البداية

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

كشاشة البداية ، كخيار ، يمكنك استخدام الرسوم المتحركة المغلق أو مجرد صورة ، كما هو الحال في الهواتف المحمولة. الشرط الوحيد هو أنه ينبغي أن يكون خفيف جدا.

ماذا نحصل؟ سيتلقى المستخدمون ذوو الإنترنت البطيء على الفور رد فعل من الموقع ، ولن يعجبوا بالشاشة البيضاء ويتساءلون ما إذا كان الموقع يعمل على الإطلاق أم لا. على الأرجح لن يرى المستخدمون الذين لديهم إنترنت سريع ذلك ، لكن حتى لديهم تأخيرات في الإنترنت.

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

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

تهيئة التطبيق

الآن وقد صرفنا انتباه المستخدم عن الصور ، فقد حان الوقت لتنزيل التطبيق. للقيام بذلك ، نقوم بإدراج البرنامج النصي التالي داخل كتلة البرنامج النصي.

 // 1.  ServiceWorker,     PWA if (navigator.serviceWorker && !navigator.serviceWorker.controller) { navigator.serviceWorker.register('pwabuider-sw.js', { scope: './' }); } // 2.    [ "./content/font.css", "./content/grid.css" ].forEach(function(url){ var style = document.createElement("link"); style.href = url; style.rel = "stylesheet"; document.head.appendChild(style); }); // 3.    [ "./scripts/polyfills.min.js", //  vendors.min.js "./scripts/main.min.js" // spa  ].forEach(function(url){ const script = document.createElement("script"); script.src = url; script.async = false; document.head.appendChild(script); });

ماذا تتكون من:

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

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

كسول التحميل وتقديم

المعلمة الهامة للغاية هي مدى سرعة رسم الشاشة الأولى ويمكن للمستخدم بدء التفاعل مع هذه الصفحة. وهنا يجدر استخدام التحسينات التالية:

1. تقديم كسول. من الضروري رسم هذا الجزء فقط من الصفحة التي يبحث فيها المستخدم ، ويجب بالفعل عرض المكونات الثقيلة أو الصور عندما ينتقل إليها المستخدم.

الحل الجيد هنا هو مكونات الكسل البطيئة والكسل img:

 <div> <p></p> <lazy-img src="..."/> </div> <lazy-block>   </lazy-block> <lazy-block>   </lazy-block> <lazy-block>   </lazy-block>

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

لكن لا تنسى Google bot ، التي ترى سبا ، ولكن لا تقوم بالتمرير في الصفحة بأكملها. لذلك ، إذا لم تهتم ، فلن يرى المحتوى الخاص بك.

2. إذا كان أي من المكونات يستخدم تبعية خارجية ، فسيتعين عليه تحميلها بنفسه حسب الضرورة. على سبيل المثال ، يمكن أن يكون كتلة تحتوي على خرائط أو مخططات أو رسومات ثلاثية الأبعاد. ومؤخراً ، كانت طريقة القيام بذلك في JS بسيطة للغاية:

 class Demo { constructor() { this.init(); } private async init() { const module = await import('./external.mjs'); //   module.default(); module.doStuff(); } }

نتيجة لذلك ، يقوم المستخدم بتحميل ما يحتاج إليه فقط ، مما يوفر موارد المستخدم والخادم بشكل كبير.

حزمة التقليل

و ... نعم ، لم تفكر في الأمر ، إنه لا يتعلق بالتصغير في Terser (UglifyJS) ، بل يتعلق فقط بإعطاء ما يحتاجه لمتصفح معين.

والحقيقة هي أن المتصفحات تتطور باستمرار ، ولديها واجهة برمجة تطبيقات جديدة ، وبدأ مطورو البرامج في استخدامها ، وللتوافق مع المتصفحات القديمة ، يقومون بتوصيل ملفات polyfills و transpilers. نتيجةً لذلك ، تكمن المشكلة في أن يحصل المستخدمون الذين لديهم أحدث المتصفحات ، والتي تبلغ حوالي 80٪ ، على رمز مصمم لمستخدمي IE11 ، ويتم نقلهم باستخدام ملفات متعددة.

المشكلة في هذا الكود هي أنه يحتوي على الكثير من النص الإضافي ، وأدائه أقل بثلاث مرات (حسب تقديراتي الشخصية) من الأصل. من المنطقي إنشاء حزم متعددة لإصدارات مختلفة من المتصفحات. حزمة برمز ES2017 لـ Chrome 73 مع حد أدنى من الملفات المتعددة ، حزمة مع ES5 لـ IE11 بحد أدنى من الملفات المتعددة ، إلخ.

كتبت عن كيفية جمع حزم من إصدارات مختلفة في وقت واحد في مقال سابق . ولتحديد الإصدار الصحيح في المستعرض ، نقوم بتعديل البرنامج النصي لاتصال البرنامج قليلاً:

 var esVersion = ".es2017"; try{ eval('"use strict"; class foo {}'); }catch(e){ esVersion = ".es5"; } [ "./scripts/polyfills" + esVersion + ".min.js", "./scripts/main" + esVersion + ".min.js" ].forEach(function(url){ const script = document.createElement("script"); script.src = url; script.async = false; document.head.appendChild(script); });

نتيجة لذلك ، سيتلقى مستخدمو المتصفحات الحديثة أكثر البرامج إنتاجية وخفيفة الوزن ، وسيحصل مستخدمو IE11 على ما يستحقونه.

طريقة أخرى مثيرة للاهتمام لتقليل

مكتبة مثيرة للاهتمام للغاية لتخفيض الحزم بنسبة 50 ٪ ، لسوء الحظ مع نتائج غير متوقعة.

تقليل الرمز

هناك مشكلة شائعة للغاية عندما يبدأ المطورون في ربط كل ما تراه أعينهم. نتيجة لذلك ، في بعض الأحيان يمكنك مشاهدة البرامج التي يتراوح وزنها بين 5-15 ميغابايت أو أكثر. لذلك ، يجب التعامل مع اختيار المكتبات بحكمة.

بدلاً من الأطر الثقيلة مثل Angular أو React ، من الأفضل اختيار نظيراتها الأكثر خفيفة الوزن: vue ، preact ، mithril ، إلخ. فهي ليست بأي حال من الأحوال أدنى من نظرائهم البارزين ، ولكن يمكن أن يكون التوفير في حجم الحزمة عدة مرات.

تجنب استخدام المكتبات الثقيلة. بدلاً من استخدام المكتبات ، مثل jquery و lodash و moment و rxjs وأي مكتبة أخرى بحجم أصغر من 100 كيلو بايت ، حاول دراسة الخوارزميات بشكل أعمق وابحث عن حل في JS الأصلي. كقاعدة عامة ، يمكنك الكتابة بطريقة أبسط على نص أصلي ، ويمكنك التخلص من التبعية الثقيلة غير الضرورية.

تصغير الصورة

ربما يعرف جميع مطوري الواجهة الأمامية عن تنسيق صورة الويب ، ويعرفون أيضًا الحاجة إلى تصغير الصور إلى حجم العرض المطلوب. ولكن لسبب ما ، تجاهل كل المطورين تقريبًا هذا. والسبب في ذلك ، في رأيي ، بسيط للغاية ، والناس لا يفهمون كيفية القيام بذلك وتطبيقه في متصفحات مختلفة.

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

لاستخدام Sharp ، يجب عليك كتابة برنامج نصي ، وأنا أستخدمه مع glob للبحث بشكل متكرر عن الصور في الدليل مع الصور المصدر ، وإخفاء البرنامج النصي نفسه من الأداة المساعدة لتشغيل مهام gulp. مثال على التجميع الخاص بي:

 gulp.task('core-min-images', async () => { const fs = require('fs'); const path = require('path'); const glob = require('glob'); const sharp = require('sharp'); // 1.          glob const files = await new Promise((resolve, reject) => { glob('src/content/**/*.{jpeg,jpg,png}', {}, async (er, files) => { !er ? resolve(files) : reject(er); }); }); // 2.      let completed = 1; await Promise.all(files.map(async (file) => { const outFile = file.replace(/^src/, 'www'); const outDir = path.dirname(outFile); // 2.1.       if (!fs.existsSync(outDir)) { fs.mkdirSync(outDir, { recursive: true }); } // 2.2.    const origin = sharp(file); // 2.3.     1920     //       jpg/png  webp    (80%) const size1920 = origin.resize({ width: 1920 }); await size1920.toFile(outFile.replace(/\.(jpeg|jpg|png)$/, '-1920w.$1')); await size1920.toFile(outFile.replace(/\.(jpeg|jpg|png)$/, '-1920w.webp')); // 2.4.    480   const size480 = origin.resize({ width: 480 }); await size480.toFile(outFile.replace(/\.(jpeg|jpg|png)$/, '-480w.$1')); await size480.toFile(outFile.replace(/\.(jpeg|jpg|png)$/, '-480w.webp')); // 2.5.    120   const size120 = origin.resize({ width: 120 }); await size120.toFile(outFile.replace(/\.(jpeg|jpg|png)$/, '-120w.$1')); await size120.toFile(outFile.replace(/\.(jpeg|jpg|png)$/, '-120w.webp')); // 2.6.      console.log(`Complete image ${completed++} of ${files.length}:`, file); })); });

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

 <img src="sample.jpg"/>

الآن نحن بحاجة إلى كتابة مثل هذا:

 <picture> <source srcset="img/sample-480w.webp" type="image/webp"> <source srcset="img/sample-480w.jpg" type="image/jpeg"> <img src="img/sample-480w.jpg" alt=" !"> </picture>

وبعد ذلك سيختار المتصفح نفسه التنسيق الأكثر ملاءمة لذلك. يمكنك أيضًا إضافة هذا الخيار بصور سريعة الاستجابة:

 <picture> <source srcset="img/sample-480w.webp, img/sample-960w.webp 2x" type="image/webp"> <source srcset="img/sample-480w.jpg, img/sample-960w.webp 2x" type="image/jpeg"> <img src="img/sample-480w.jpg" alt=" !"> </picture>

ومع الأخذ في الاعتبار حقيقة أنه من الممكن الآن إنشاء صور في مرحلة تجميع التطبيق ، اتضح أن جميع الصور سيكون لها نفس مجموعة التنسيقات والدقة ، مما يعني أنه يمكننا توحيد هذا المنطق وإخفائه خلف بعض المكونات ، على سبيل المثال <lazy-img src="img/sample.jpg"> .

تصغير النمط

قم فقط بتنزيل الأنماط التي تستخدم مكوناتك. من الناحية المثالية ، عندما يتم ربط الأنماط بالمكونات ، وتكون مضمنة في المنزل فقط عندما يتم رسم المكون نفسه.

تقليل أسماء الفصول. يكون للطول الهائل من محددات المتداخلة أو BEM في الأنماط تأثير سيء على حجم التطبيق الخاص بك. حاليًا ، مليء بالأدوات التي لا تنشئ أنماطًا مع محددات فريدة: JSS ، و Styled Components ، و CSS Modules.

التقليل في المنزل

نحن جميعًا على دراية بلغة html ، لكن قلة منهم اعتقدت أن هذا مجرد تجريد بسيط على شجرة من الكائنات شديدة التعقيد. سلسلة الميراث لعنصر div هي كما يلي:

HTMLDivElement -> HTMLElement -> Element -> Node -> EventTarget

ولكل كائن في هذه السلسلة 10 إلى 100 خاصية وطرق تستهلك الكثير من الذاكرة. ويجب أخذ كل هذه الثروة في الاعتبار بواسطة محرك DOM لبناء الصورة التي نراها. لذلك ، حاول ألا تستخدم العناصر الزائدة في المنزل.

تصغير HTML. احذف كل ما تستخدمه لتنسيق HTML في وقت الكتابة. الحقيقة هي أن المساحات المستخدمة عند كتابة التعليمات البرمجية في المتصفح تتحول أيضًا إلى كائنات في المنزل:

TextNode -> Node -> EventTarget

حذف التعليقات. كما أنها عنصر من عناصر المنزل وتستهلك الكثير من الموارد:

Comment -> CharacterData -> Node -> EventTarget

استخدام محركات القوالب jsx يمكن أن يكون ممارسة جيدة. والحقيقة هي أنه عند تجميعه ، يتحول إلى رمز js أصلي لا يولد مسافات وتعليقات ولا يخطئ أبدًا في فتح وإغلاق العلامات.

الممارسة السيئة ، حتى أنني أقول كابوساً ، هو facebook.com . فيما يلي أجزاء HTML:

مقتطف صفحة Html

 <!--  1 --> <div class=""> <div class="_42ef"> <div class="_25-w"> <div class="_17pg"> <div class="_1rwk"> <form class=" _129h"> <div class=" _3d2q _65tb _7c_r _4w79"> <div class="_5rp7"> <div class="_1p1t"> <div class="_1p1v" id="placeholder-77m1n" style="white-space: pre-wrap;">  ... </div> </div> </div> </div> <ul class="_1obb"> ...li... </ul> </form> </div> </div> </div> </div> </div> <!--  2 --> <div> <div> <div class="_3nd0"> <div class="_1mwp navigationFocus _395 _4c_p _5bu_ _34nd _21mu _5yk1" role="presentation" style="" id="js_u"> <div class="_5yk2" tabindex="-1"> <div class="_5rp7"> <div class="_1p1t" style=""> <div class="_1p1v" id="placeholder-6t6up" style="white-space: pre-wrap;">    ? </div> </div> <div class="_5rpb"> <div aria-autocomplete="list" aria-controls="js_1" aria-describedby="placeholder-6t6up" aria-multiline="true" class="notranslate _5rpu" contenteditable="true" data-testid="status-attachment-mentions-input" role="textbox" spellcheck="true" style="outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word;"> <div data-contents="true"> <div class="" data-block="true" data-editor="6t6up" data-offset-key="6b02n-0-0"> <div data-offset-key="6b02n-0-0" class="_1mf _1mj"> <span data-offset-key="6b02n-0-0"> <br data-text="true"> </span> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

كما ترون ، يتم استخدام تداخل مكون من عشرة عناصر ، لكن هذا التداخل لا يقوم بأي عمل. الجزء الأول يعرض فقط النص "اكتب تعليق ..." والرموز ، والثاني "ما الجديد؟". نتيجة لهذا الاستخدام غير الرشيد لنظام DOM ، فإن أداء محرك React templating بالكامل يتم إلغاؤه ، ويصبح الموقع أحد أبطأ ما أعرفه.

تطبيق الويب التدريجي

ملف البيان

يسمح لك PWA باستخدام تطبيق الويب الخاص بك كتطبيق أصلي. عندما تقوم بتمكين الدعم على الموقع ، يظهر زر تثبيت موقعك على الجهاز (Windows ، Android ، iOS) في قائمة المتصفح ، وبعد ذلك يبدأ في التصرف كآخر أصلي ويعمل في وضع عدم الاتصال ، وكل هذا يتجاوز متاجر التطبيقات.

تمكين دعم PWA على الموقع في الواقع بسيط للغاية. يكفي تضمين ارتباط إلى ملف البيان في صفحة html. يمكن إنشاء ملف البيان في pwabuilder.com .

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

عامل الخدمة

لا ينتهي تكوين PWA عند توصيل ملف البيان ، فمن الضروري أيضًا توصيل ServiceWorker ، والتي ستكون مسؤولة عن العمل دون اتصال بالإنترنت.

يمكن العثور على رمز مثال هناك على pwabuilder.com :

 // This is the service worker with the Cache-first network const CACHE = "pwabuilder-precache"; const precacheFiles = [ /* Add an array of files to precache for your app */ ]; self.addEventListener("install", function (event) { console.log("[PWA Builder] Install Event processing"); console.log("[PWA Builder] Skip waiting on install"); self.skipWaiting(); event.waitUntil( caches.open(CACHE).then(function (cache) { console.log("[PWA Builder] Caching pages during install"); return cache.addAll(precacheFiles); }) ); }); // Allow sw to control of current page self.addEventListener("activate", function (event) { console.log("[PWA Builder] Claiming clients for current page"); event.waitUntil(self.clients.claim()); }); // If any fetch fails, it will look for the request in the cache and serve it from there first self.addEventListener("fetch", function (event) { if (event.request.method !== "GET") return; event.respondWith( fromCache(event.request).then( function (response) { // The response was found in the cache so we responde with it and update the entry // This is where we call the server to get the newest version of the // file to use the next time we show view event.waitUntil( fetch(event.request).then(function (response) { return updateCache(event.request, response); }) ); return response; }, function () { // The response was not found in the cache so we look for it on the server return fetch(event.request) .then(function (response) { // If request was success, add or update it in the cache event.waitUntil(updateCache(event.request, response.clone())); return response; }) .catch(function (error) { console.log("[PWA Builder] Network request failed and no cache." + error); }); } ) ); }); function fromCache(request) { // Check to see if you have it in the cache // Return response // If not in the cache, then return return caches.open(CACHE).then(function (cache) { return cache.match(request).then(function (matching) { if (!matching || matching.status === 404) { return Promise.reject("no-match"); } return matching; }); }); } function updateCache(request, response) { return caches.open(CACHE).then(function (cache) { return cache.put(request, response); }); }

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

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

إمكانية الوصول

السمة الصحيحة لذوي الاحتياجات الخاصة

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

استخدام ما يكفي من الألوان المتناقضة. وفقا لإحصاءات وزارة الصحة ، 20 ٪ من الناس يعانون من مشاكل في الرؤية. مواقع التباين الضعيفة تعقد حياتهم فقط ، والأشخاص الأصحاء يزيدون من التعب.
ترتيب tabindex. اسمح لك باستخدام الموقع دون الماوس والأجهزة التي تعمل باللمس. الترتيب السليم للتحولات باستخدام لوحة المفاتيح يبسط إلى حد كبير عملية ملء النماذج.
سمة الأغنية على الروابط. يسمح لقارئات الشاشة بقراءة النص داخل السمة.
السمة alt في الصور. على غرار السابق. بالإضافة إلى ذلك ، سيعرض النص إذا تعذر تنزيل الصورة.
لغة المستند. قم بتمييز علامة html بالسمة باستخدام language lang = "code language". سيساعد ذلك الأدوات المساعدة في الإعداد الصحيح للعمل.

كما ترون ، المتطلبات في الواقع قليلة وبسيطة للامتثال لها. لكن لسبب ما ، يتجاهل معظم المطورين هذه القواعد ، حتى عندما يتعلق الأمر بالمواقع المتخصصة للأشخاص ذوي الاحتياجات الخاصة.

أفضل الممارسات

افصل تطبيق الواجهة الأمامية عن تطبيق الخادم

أولاً ، إذا كنت لا تزال تقوم بتقديم html على الخادم ، فتوقف عن القيام بذلك بالفعل.يؤدي نقل عملية التقديم إلى العميل بأمرين من الحجم إلى تقليل الحمل على الخادم ، ونتيجة لذلك ، فإن تكلفة دعم تطبيق الخادم. والعملاء الحصول على تطبيق مع رد فعل فوري لأفعالهم.

ثانياً ، افصل تطبيق SPA الخاص بالعميل عن تطبيق الواجهة الخلفية. لا تضبط تطبيق الخادم وتطبيقات windows مع تطبيق android وتطبيقات iOS. لذلك كان تطبيق الويب منذ فترة طويلة تطبيقًا قائمًا بذاته يمكنه العمل بدون خادم وحتى دون اتصال بالإنترنت. الخطأ الأكثر شيوعًا الذي أراه هو عندما يعمل إطار خلفي مثل Spring أو Asp.Net في توزيع الإحصائيات ، بما في ذلك تطبيق SPA المجمّع. لقد حان الوقت للتوقف عن القيام بذلك ووضع الإحصائيات و SPA في خدمة ميكروية منفصلة وإخفائها خلف خادم ويب متخصص لتوزيع الإحصائيات ، على سبيل المثال nginx.

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

تكوين الخادم الوكيل ، HTTP / 2 ، gzip ، ذاكرة التخزين المؤقت

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

SSL. SSL , , , Nginx. Nginx Asp.Net Core , .
GZIP . .
Cache . Get, Head , .
.

- , , nginx nginxconfig.io .

SEO

html

, . Lighthouse .

, . , .

, , .

تدقيق Chrome 500: الجزء 1. الهبوط

الأداء

اختيار الخادم

تهيئة التطبيق

استخدام شاشة البداية

تهيئة التطبيق

كسول التحميل وتقديم

حزمة التقليل

تقليل الرمز

تصغير الصورة

تصغير النمط

التقليل في المنزل

تطبيق الويب التدريجي

ملف البيان

عامل الخدمة

إمكانية الوصول

السمة الصحيحة لذوي الاحتياجات الخاصة

أفضل الممارسات

افصل تطبيق الواجهة الأمامية عن تطبيق الخادم

تكوين الخادم الوكيل ، HTTP / 2 ، gzip ، ذاكرة التخزين المؤقت

SEO

html

More articles: