انتخاب دامنه مناسب
انتخاب دامنه مناسب – قسمت دوم
آگوست 8, 2020
آموزش رفع خطای minimize request size در gtmetrix
آگوست 23, 2020

آموزش رفع خطای inline small javascript در gtmetrix

آموزش رفع خطای inline small javascript در gtmetrix

یکی از خطاهایی که هنگام تست سرعت سایت با  Gtmetrix با آن مواجه می شویم به نام خطای  inline small javascript که از سری خطاهای page speed است.

 

 Inline  small  javascriptچیست ؟

Inline  small  javascript : یعنی فراخوانی فایل های جاوا اسکریپت کوچک از داخل سایت ، اگر فایل های javascript  شما بیش ازحد کوچک باشند ، بهتر است محتوای آن را کپی کنید و در بخش head سایت خود قرار دهید.

قبل از اینکه خطای Inline  small  javascript را به شما معرفی کنیم ابتدا باید  ببینیم کهinline small چیست ؟ سه روش برای کد نویسی js در html می توانیم است که احتمالا با آن ها آشنا هستید.

Inline : دراین روش کد ها درون خطی هستند و دقیقا داخل فایل html قرار دارند.

Internal : در این روش کدها در یک فایل جدا با فرمت javascript. قرار دارند که بعد از فراخوانی در سند html لود می شوند.

External : در این روش کدها در یک منبع خارجی که جدا از دامنه و هاست هستند قرار دارند و فقط از طریق این منابع می توانیم آن ها را لود کنیم.

استفاده از Inline  small  javascript :

به عنوان مثال اگر شما برای یک  قالب از سه روشی که گفتیم استفاده کنید  و یک رنگ یا فونت دلخواهی را انتخاب کنید ، در سند html اولویت با کد استایل inline است. اگر این حالت وجود نداشت در مرحله بعد حالت internal و در آخر حالت external در اولویت است.

مرورگرها درهر سایتی لود فایل های javascript که از منابع خارجی لود می شوند را تا زمانی که صفحه به صورت کامل از سمت خود سرور لود نشود را در نظر نمیگیرند. بعد از اینکه صفحه بر اساس فایلهای خود سرور لود شد شروع به لود فایلهای خارجی می کند. و در این صورت زمانی در این بین اتلاف می شود اگر چه دراین زمان هرچند خیلی کوتاه است،ولی باعث ایجاد وقفه ای در لود سایت می شود و زمان لود سایت را کاهش می دهد وتعدا درخواست های http  را بالا می برد پس برای رفع این خطا کافیست استایل ها و کدهای javascript را که از منابع خارجی لود می شوند را مستقیم در سرور سایت قرار دهیم.

این مقاله رو هم بخونید
آموزش رفع خطای Avoid bad requests درGTmetrix

 

مرورگرها درهر سایتی لود فایل های javascript که از منابع خارجی لود می شوند را تا زمانی که صفحه به صورت کامل از سمت خود سرور لود نشود را در نظر نمیگیرند. بعد از اینکه صفحه بر اساس فایلهای خود سرور لود شد شروع به لود فایلهای خارجی می کند. و در این صورت زمانی در این بین اتلاف می شود اگر چه دراین زمان هرچند خیلی کوتاه است،ولی باعث ایجاد وقفه ای در لود سایت می شود و زمان لود سایت را کاهش می دهد وتعدا درخواست های http  را بالا می برد پس برای رفع این خطا کافیست استایل ها و کدهایjavascript    را که از منابع خارجی لود می شوند را مستقیم در سرور سایت قرار دهیم.

 

حال چگونه خطای inline small javascript را رفع کنیم ؟

پس برای رفع خطای inline small javascript وبهینه سازی لود سایت و زمان بازشدن صفحه ، درصورتی که کدهای javascript دارای حجم کمی باشند ، می توانید آن ها را به صورت مستقیم در سند html وارد کنید و یا با دیگر فایلهای javascript موجود ادغام کنید.

دو روش برای رفع این خطا وجود دارد که آنها را مورد بررسی قرار می دهیم

قراردادن کد javascript در قسمت html :

برای مثال فایلی در داخل صفحات سایت با نامsmall.js فراخوانی می شود که کلاس های خاصی برای نمایش نوعی محتوا قرارداده شده است:


<html>
<head>
<script type=”text/javascript” src=”small.js”></script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>

این فایل small.js  که درخط سوم مشاهده می کنید محتوای آن بصورت زیر است :


/* contents of a small JavaScript file */



چنین فایلی با این مقدار کدنویسی فقط تعدادی درخواست http اضافه روی سرور یا سرورخارجی ایجاد می کند. پس بهتراست برای این فایل هایی که حجم زیادی دارند آن ها را درفایل های استایل ادغام کنیم یا درقسمت head بخشی را که مربوط به نمایش محتوا است را بین تگ <script> قراردهیم.


<html>
<head>
<script type=”text/javascript”>
/* contents of a small JavaScript file */
</script>
</head>
<body>
<div class=”blue yellow big bold”>
Hello, world!
</div>
</body>
</html>

بعد از این مراحل بالا را انجام دادید خطای inline small javascript  درgtmetrix رفع می شود وباعث کاهش تعداد درخواست  httpمی شود و سرعت لود سایت نیز افزایش پیدا می کند.

 

چنین فایلی با این مقدار کدنویسی فقط تعدادی درخواست http اضافه روی سرور یا سرورخارجی ایجاد می کند. پس بهتراست برای این فایل هایی که حجم زیادی دارند آن ها را درفایل های استایل ادغام کنیم یا درقسمت head بخشی را که مربوط به نمایش محتوا است را بین تگ <script> قراردهیم.

آموزش رفع خطایinline small javascript

 

این مقاله رو هم بخونید
آموزش رفع خطایenable keep Aliveدر gtmetrix 

استفاده از پلاگین برای رفع خطایinline small javascript  :

اگرتعداد خطاها یعنی تعداد فایل های javascript زیادی در سند html شما فراخوانی می شود، روش ادغام کاربرد خوبی دارد.

برای ادغام کردن فایل ها می توانیم از پلاگین های وردپرس استفاده کنیم.

w3 total cache

js script optimizer

wp super minify

wp minify fix

combine js

مطالب قبلی :

آموزش رفع خطایinline small css در gtmetrix

آموزش رفع خطایenable keep Aliveدر gtmetrix

آموزش رفع خطای Enable gzip compression در GTmetrix

 

Aida Parvaresh
Aida Parvaresh
آیداپرورش هستم،علاقمند به تکنولوژی و تولید محتوا،مدتیه که با تیم خوب هفت وب همکاری دارم.

2 Comments

  1. […] آموزش رفع خطای inline small javascript در gtmetrix […]

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *