حل مشكلة التخلص من عناصر css التى تحظر عرض المحتوى فى الجزء العلوى

[WRONG WAY]

http://b.top4top.net/p_3420gfcf1.png
أهلا و مرحبا بكم أعضاء و زوار معهد بسمة مصرية (http://www.egybasma.com/forum/) الكرام ,,
*-.-**-.-**-.-**-.-*
حل مشكلة - التخلص من عناصر CSS التى تحظر عرض المحتوى فى الجزء العلوى .
How To Fix Eliminate render-blocking CSS in above-the-fold content (http://www.egybasma.com/forum/showthread.php?t=2246)
كثرت الأسئلة حول هذه الجملة فى الآونة الاخيرة وخصوصا بعد تحديث Mobilegeddon الذى استهدف المواقع المتوافقة مع الهواتف الذكية والاجهزة الكفية لرفع ترتيبها في نتائج بحث الجوال .
*-.-**-.-**-.-**-.-*
فالمشكلة لا تكمن فى ان يكون التصميم متوافق مع جميع شاشات العرض بل فى سرعة الموقع ايضاً بل سرعة تحميل صفحات الموقع بالتحديد ,,
وفى هذا الشرح سنتعرف على كيفية التخلص من عناصر الـ CSS التى تحظر المحتوى فى الجزء العلوى .
ولنفترض انك تستخدم مكتبة ايقونات Font Awesome ,, على سبيل المثال فى موقعك فـ ان جوجل سيرى ان ملف الـ CSS الخاص بتعريف الايقونات فى منطقة الـ Head يحظر المحتوى فى الجزء العلوى اثناء الاختبار .
<link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css" type="text/css" media="screen" />
توجد الكثير من الحلول على الانترنت منها اضافة الملف فى الفوتر والبعض الاخر يجزم بان اضافتها بعد نهاية وسم الـ Body سيحل المشكلة ولكن جميع هذه الحلول تنتهى بالفشل وعدم التوافق مع المعايير القياسية فـ من غير المسموح اضافة السمة link فى منطقة غير الـ Head !
كل هذه الحلول بلا جدوى فالحل النهائى هو عن طريق استدعاء الملف بعد تحميل الصفحة !
ويمكن عمل ذلك باستخدام الـ Media Types والتبديل بين print و screen بواسطة onload Event .
وهذا مثال بسيط على ما تم شرحه بالاعلى .
*-.-**-.-**-.-**-.-*
* قبل التطبيق :-

http://d.top4top.net/p_3445ywfn1.png

*-.-**-.-**-.-**-.-*
* بعد التطبيق :-

http://c.top4top.net/p_344nnb0w1.png

*-.-**-.-**-.-**-.-*
اذن كيف نقوم بتطبيق هذا الشرح !

بداية سنقوم بالذهاب الى كود استدعاء المكتبة فى منطقة الـ Head والذى سيكون بالشكل التالى ,,
<link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css" type="text/css" media="screen" />
وسنقوم بتعديل بسيط على الكود بتغيير الـ Media Types بدلا من screen الى print واضافة onload Event للكود ,, ليصبح بالشكل التالى ,,
<link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css" type="text/css" media="print" onload="if(media!='screen')media='screen'" />
*-.-**-.-**-.-**-.-*
والى هنا اكون قد انتهيت من شرح اليوم ,, على ان القاكم فى شرح قادم بـ إذن الله تعالى ,,
دمتم بود ,,
تحياتى للجميع ,,
http://c.top4top.net/p_3429vifo2.png

[FOR SAT]

شرح رااائع
عاشت ايدك