آموزش رفع خطاي Inline small CSS و خطاي Inline small JavaScript
از سري مقالات آموزش كامل سايت gtmetrix به رفع خطاهاي pagespeed سايت جي تي متريكس پرداختيم. در مقاله قبل به آموزش رفع خطاي Enable Keep Alive در سايت GTmetrix پرداختيم. امروز در بخش رفع خطاهاي pagespeed به آموزش رفع خطاي Inline small CSS خواهيم پرداخت. آموزش رفع خطاي Inline small JavaScript و حل مشكل ارور Inline small CSS . در اين مقاله به نحوه ادغام و يكي كردن فايل هاي CSS و JS نيز خواهيم پرداخت. رفع خطاي Inline small CSS و خطاي Inline small JavaScript موجب افزايش سرعت سايت و كاهش زمان بارگذاري سايت شود كه بشدت روي بهبود سئوي سايت تاثير مثبت و خوبي دارد.
در اين مقاله به موضوعات زير خواهيم پرداخت :
1 خلاصه‌ي از خطا Inline small CSS and Inline small JavaScript
2 مقدمه درباره نحوه فراخواني فايل‌هاي CSS و JS
3 درباره مشكل Inline small CSS و Inline small JavaScript
4 راه حل براي رفع ارور Inline Small
4.1 نحوه رفع ارور Inline small CSS
4.2 نحوه رفع ارور Inline small JavaScript
4.3 رفع ارور Inline small CSS و Inline small JS در وردپرس
4.4 Inline Images
خلاصه‌اي از خطاي Inline small CSS and Inline small JavaScript
نام: Inline small CSS
نوع: CSS
اولويت: بالا
ميزان سختي: راحت
ميانگين امتياز: 94%نام: Inline small JavaScript
نوع: JS
اولويت: بالا
ميزان سختي: راحت
ميانگين امتياز: 95%
پيش نياز براي درك بهتر
قبل از هرچيزي بايد بدونيم كه CSS و JS چيست؟
اگر پاسخ اين سوال را ميدانيد به پاراگراف بعدي مراجعه نماييد و مقاله را ادامه دهيد. اگر نميدانيد كه CSS و JS چيست با ما همراه باشيد تا در چند خط بصورت كوتاه و خلاصه بيان كنيم.
HTML چيست؟ كدهاي HTML ميتوانند موارد تشكيل دهنده يك صفحه را دربر بگيرد و بطور كلي ساختار يك صفحه از كدهاي HTML تشكيل شده است. تصاوير و متن ها و … داخل كدهاي HTML قرار مي‌گيرند.
CSS چيست : كدهاي CSS راي استايل دهي به محتواي صفحات است. در واقع با اين كد ها مي‌توانيد رنگ و اندازه و ظاهر محتواي HTML را تغيير دهيد.
JS : جاوا اسكريپت يا javascript در واقع براي پويا شدن سايت است. به كمك اين كدها مي‌توان برخي از فعاليت ها را بصورت اتوماتيك انجام داد.
مثال براي درك بهتر :
فرض كنيم يك ساختمان را كه مي‌خواهند بسازند ابتداي كار بايد اسكلت ساختمان و سپس ديوار و سقف را بسازند. اين موضوع در طراحي سايت همان كدهاي HTML است كه ساختار اصلي سايت را در بر مي‌گيرد. پس از آن بايد ديوار ها نقاشي و نماي ساختمان زده شود و درب ها و چراغ و … اضافه شوند كه در طراحي سايت اين دقيقا همان CSS است ك با آن مي‌توان به كدهاي HTML استايل دهي كرد. حال در مرحله آخر براي ساختمان آيفون تصويري و يا ريموت درب پاركينگ و … نصب مي‌شود كه در طراحي سايت اين عمل را به كمك JS يا جاوا اسكريپت انجام مي‌دهند كه اصطلاحا سايت را پويا مي‌كنند.
تا اين جاي كار فكر ميكنيم كه درك درستي از كدهاي استفاده شده در سايت پيدا كرده ايد. در ادامه با ما باشيد.
نحوه فراخواني فايل هاي CSS و JS
كدهاي CSS
type of css
كدهاي CSS بطور كلي به 3 بخش دسته بندي مي‌شوند. از كدهاي CSS به 3روش : 1- External و 2- internal و 3- inline استفاده مي‌شود. هر كدام از اين روش ها مزايا و معايبي دارد. تگ هاي HTML براي فراخواني كدهاي CSS ابتدا از كدهاي External شروع مي‌كنند و سپس به سراغ كدهاي internal مي‌روند و در آخر هم كدهاي inline را فراخواني مي‌كنند. بر همين اساس اولويت در استايل دهي با كدهاي inline است. بعنوان مثال اگر يك بخشي از متن در كدهاي External به رنگ آبي باشد و دقيقا همون متن در كدهاي internal قرمز باشد و مجددا همان بخش از متن در كدهاي inline به رنگ زرد باشد، HTML در خروجي همان رنگ زرد را فراخواني و نمايش مي‌دهد.
كدهاي JS
كدهاي JS نيز همانند كدهاي CSS به 3روش : 1- External و 2- internal و 3- inline استفاده مي‌شود.
درباره حل مشكل ارور Inline small CSS و Inline small JavaScript
معمولا مرورگرها براي انجام برخي از كارهاي ديگر، قبل از استايل دهي محتوا، فايل هاي External مربوط به كدهاي CSS را مسدود مي‌كنند. طبيعتا اين موضوع باعث تاخير و كاهش سرعت سايت و همچنين افزايش مدت زمان بارگذاري محتواي سايت مي‌شود. حال اگر تعداد اين فايل هاي External CSS زياد باشد قطعا سرعت بارگذاري سايت افزايش ميابد كه مي‌تواند تاثير بدي روي سايت و تجربه كاربري شما داشته باشد. همين موضوع براي Inline small JS صدق ميكند.
هر چند وجود فايل‌هاي External نياز و لازم است و حتما درج خواهد شد اما نبايد به شكلي از آن استفاده كنيم كه باعث ايجاد خطاي Inline Small CSS و همينطور خطاي Inline Small JavaScript شويم.
راه حل براي رفع ارور Inline Small
تمام مطالبي كه دراين بخش به آنها اشاره خواهيم كرد هم براي فايل هاي CSS هستند و هم براي JS.
براي اينكه بتوانيم فايل هاي CSS يا JS را بهينه كنيم و سرعت سايت را افزايش دهيم بهتر است اگر فايل هاي External داراي حجم كمي هستند آنها را با يكديگر اذغام نماييم و يا آنها را مستقيما در سند HTML وارد كنيد.
گوگل در مقاله‌اي با عنوان Inline Small Resources به اهميت استفاده از روش Internal اشاره كرده است. در اين مقاله گوگل بيان ميكند كه استفاده از روش Internal در فايل‌هاي CSS و JS با حجم كم و همينطور استفاده از تصاوير به شكل Inline (روش Base64) باعث كاهش تعداد درخواست‌ها به شكل مستقيم در سند HTML مي‌شود. در ادامه بيشتر درباره اين موضوعات صحبت ميكنيم.
قسمتي از مقاله گوگل:
This rewriter reduces the number of requests made by a web page by inserting the contents of small external CSS, JavaScript and image files directly into the HTML document. This can reduce the time it takes to display content to the user, especially in older browsers.
نحوه رفع ارور Inline small CSS
اگر حجم فايل CSS كه به روش External فراخواني شده بسيار كم و به اندازه چند بايت مي‌باشد بهتر است يا آن را با ديگر فايل‌هاي external CSS ادغام نماييم يا به شكل مستقيم و Internal درون سند HTML استفاده كنيم.
براي مثال به سند HTML زير توجه كنيد:
Hello, world!
در بالا فايل small.css در حال فراخواني است و با محتواي فرضي زير:
.yellow {background-color: yellow;}
.blue {color: blue;}
.big { font-size: 8em; }
.bold { font-weight: bold; }
مي‌توانيد از روش نه چندان جالب بالا براي لود قسمتي از استايل خود استفاده كنيد ولي براي بهينه سازي سايت بايد هوشمندانه و از بهترين روش ممكن بهره ببريد. روش بهينه سازي شده در چنين شرايطي كه يك فايل CSS با حجم كم داريد به شكل زير است:
Hello, world!
چه كار كرديم؟
يك فايل CSS كه محتواي داخل آن كم بود را به صورت internal درج كرديم ولي اگر تعداد زيادي فايل CSS با حجم كم در صفحات شما فراخواني مي‌شوند بهتر است آنها را ادغام كنيد.
اين روش براي سايت‌هايي كه اختصاصي طراحي شده اند مناسب است، البته براي همه نوع سايت كاربرد دارد. چه سايت وردپرس باشد و چه سايت جوملا و … . براي برخي CMSها مثل وردپرس افزونه هايي هست كه در ادامه به آنها خواهيم پرداخت.
نحوه رفع ارور Inline small JavaScript
درباره فايل‌هاي JS هم همانند CSS بايد عمل كرد، سايت GTmetrix بيان ميكند:
Inlining small external JavaScript files can save the overhead of fetching these small files. A good alternative to inline JavaScript is to combine the external JavaScript files.
و اگر توجه كرده باشيد به فايل‌هاي External JS كه حجم بسيار كمي دارند اشاره كرده كه اگر سايت شما داراي فايل‌هاي External JS است و تعداد قابل توجه‌اي دارند بهتر است آنها را ادغام نماييد ولي اگر تعداد كم باشيد مي‌توانيد از راه حلي كه گوگل اشاره كرده استفاده نماييد.
در مقاله گوگل اشاره شده كه اگر محتواي فايل JS كه به روش External فراخواني شده بسيار كم حجم و به اندازه چند بايت مي‌باشد به شكل مستقيم و Internal درون سند HTML استفاده كنيم تا درجهت بهينه سازي سرعت سايت تعداد درخواست‌هاي سمت سرور كاهش يابد.
براي مثال به سند HTML زير توجه كنيد:
Hello, world!
و فايل small.js با محتواي فرضي زير:
/* contents of a small JavaScript file */
روش بهينه سازي شده در شرايطي كه يك فايل JS با حجم كم داريد به شكل زير است:
Hello, world!
رفع ارور Inline small CSS و Inline small JS در وردپرس
تا به اينجاي كار روشي را توضيح داديم كه بصورت دستي صورت ميگرفت و مختص زماني بود كه تعداد كمي خطاي Inline small CSS و Inline small JavaScript داريم. اما اگر تعداد زيادي فايل JS و CSS وجود دارد بهتر است از روش ادغام فايل ها استفاده نماييد. مي‌توانيد براي ادغام كردن فايل‌ها از پلاگين‌هاي وردپرس زير استفاده نماييد.
- w3 total cache
- js- css script optimizer
- wp super minify
- wp minify fix
- combine css
- combine js
اين ارورهاي Inline small CSS JavaScript باعث كاهش تعداد درخواست هاي HTTP هم نيز مي‌شود و شما اگر قصد داريد تعداد درخواست هاي سايت خود را در جهت بهينه سازي، كاهش دهيد حتما مقاله رفع خطاي Make fewer HTTP requests را هم بخوانيد.
Inline Images
Inline Images عكس‌هايي هستند كه بصورت inline و ازطريق كار با base64 آنها را مي‌سازيم. به اين منظور كه عكس‌ها را ميتوانند دربين كدهاي HTML قرار دهيد و براساس كدگذاري برمبناي 64 عكس‌ها بخشي از HTML شوند و بدون بارگذاري شدن نمايش داده مي‌شوند، درعوض مرورگر كد برمبناي 64 را به عكس تبديل ميكند. يكي از محاسن مهم اين كار، كاهش تعداد درخواست است (مثل روش css sprite) كه اين امر نقش موثري در بهينه‌سازي سايت و سرعت آن دارد.
ولي توجه داشته باشيد كه اين روش بهتر است فقط براي عكس‌هايي استفاده شود كه اندازه و حجم بسيار كمي دارند چرا كه وقتي عكس‌ها حجم متوسط به بالايي داشته باشند با روش كدگذاري بر مبناي 64 حجم تصاوير بيشتر از حالت معمول بوده و اگر براي تمام عكس‌ها از اين روش استفاده كنيم به جاي بهينه‌سازي و افزايش سرعت سايت نتيجه‌اي عكس را دريافت خواهيم كرد.
نظر گوگل
گوگل هم در اين پست به اهميت تصاوير به شكل Inline اشاره كرده است و گفته:
When this rewriter is enabled, the contents of small external images are written directly into the HTML document by an inline data: URL
براي مثال به سند HTML زير توجه كنيد:
Image test example
در سند بالا تصوير كوچك با حجم اندك به شكل معمولي در صفحه بارگذاري مي‌شود و حاوي يك درخواست ديگر براي لود شدن در صفحات كاربران است ولي روش زير كه برمبناي base64 است درگير درخواست اضافي بر روي سرور متحمل نميشود:
Image test example
در پست جداگانه‌اي در آينده توضيحات بيشتري درباره تصاوير base64 يا Inline Images خواهيم داد.
اهميت خطاي Inline small CSS و Inline small JavaScript در گوگل:
يكي از مهمترين مواردي كه گوگل به آن اهميت مي‌دهد سرعت سايت است. موضوع سرعت سايت فقط ربوط به موضوعات بالا نميشود و گوگل در ابزار سرچ كنسول گزارشي را با عنوان speed قرار داده است كه تك تك صفحات سايت شما را بررسي ميكند و صفحاتي كه مشكل سرعت دارند را به شما اعلام ميكند.
پايان
سعي شده در اين آموزش‌ها با بالا بردن سرعت سايت كه يكي از فاكتورهاي مهم در افزايش رتبه سايت در گوگل مي‌باشد، كمك شاياني كنيم، در انتهاي اين آموزش بايد توانيد فايل css و js خود را inline كنيد و با هم ادغام كنيد و آنها را يكي كنيد و يا اگر تعداد كمي دارند در سند HTML بياوريد تا باعث رفع خطاي Inline small CSS و همينطور رفع خطاي Inline small JavaScript شويد.
با آموزش هاي بالا سعي برآن داشتيم تا يكي از مهمترين فاكتورهاي اساسي در افزايش سرعت سايت كه رفع خطاي Inline small CSS و رفع خطاي Inline small JavaScript مي‌باشد را توضيح دهيم.
اين جلسه از آموزش رفع خطاهاي gtmetrix هم به پايان رسيد.
عكاسي صنعتي را بهتر بشناسيد
آموزش كامل راه اندازي پروكسي MTProto