چند دستورالعمل برای تعیین صفحه وب و اندازه فایل

حجم  صفحه سایت عامل مهمی در تعیین میزان بهینه سازی سایت شما است. موتورهای جستجو مانند MSN، Yahoo و Google زمان بارگذاری را بیشتر و بیشتر در مورد بهینه سازی موتور جستجو و امتیازات کیفیت PPC در نظر می گیرند، و اندازه فایل مطمئناً بر زمان بارگذاری وب سایت شما تأثیر می گذارد.

با این حال، بسیاری از توسعه دهندگان وب در تعیین اندازه صفحه و اندازه فایل برای اطمینان از بارگیری سریع وب سایت آنها ایده آل هستند، مشکل دارند. در این مقاله، ما به برخی از داده‌هایی که در مورد اندازه متوسط ​​صفحات وب HTML، فایل‌های تصویری و سایر اجزای یک وب‌سایت جمع‌آوری شده‌اند نگاه می‌کنیم. این به توسعه دهندگان وب کمک می کند تا یک دستورالعمل محکم برای اندازه صفحه و اندازه فایل خود تعیین کنند.

داده ها در مورد متوسط ​​صفحه وب و اندازه فایل

داده‌های زیر از گزارشی با عنوان «پرتره یک صفحه وب رایج HTML» که با استفاده از یک موتور رندر HTML که WebSeer نامیده می‌شود جمع‌آوری شده است:

میانگین اندازه HTML (iframes شامل): 25k

متوسط ​​اندازه فایل های تصویری
JPEG: 11.9k
GIF: 2.9k
PNG: 14.5k

میانگین اندازه اسکریپت های خارجی: 11.2k

اندازه متوسط ​​اندازه سبک خارجی: 17k

اندازه متوسط ​​کل صفحه وب، از جمله HTML، فایل های تصویری، فلش، اسکریپت ها و سبک ها: 130k

با در نظر گرفتن این داده‌ها، سازندگان «پرتره یک صفحه وب رایج HTML» هشدار دادند که مؤلفه‌هایی مانند تصاویر CSS، صفحات قاب‌بندی شده (به استثنای فریم‌های داخلی)، اشیاء رسانه‌ای که از برچسب‌های جاسازی استفاده نمی‌کنند، وارد نشده‌اند. در این تحلیل موارد دیگری وجود دارد که باید هنگام در نظر گرفتن استفاده از این داده ها به عنوان دستورالعملی برای ایجاد صفحات وب و فایل های تصویری خود در نظر بگیرید…

فشرده سازی صفحه تفاوت بزرگی ایجاد می کند

فشرده‌سازی و کاهش قیمت GZIP تکنیک‌هایی هستند که می‌توانند برای کمک به بارگذاری سریع‌تر صفحات «سنگین‌تر» در مرورگر کاربر وب استفاده شوند.

فشرده سازی Gzip چیست؟

فشرده سازی Gzip یکی از فعالیت های سمت سرور است که در صورت فعالسازی، میتواند سرعت لود صفحات را برای کاربران کاهش و بهبود دهد. این نوع فشرده سازی، با کم کردن حجم فایل های سایت، در حجم صفحه و لود کلی صفحه، تاثیر بسیار زیادی میگذارد. البته در نظر داشته باشید که امکان فشرده سازی فقط برای فرمت های به خصوصی مثل فایل های HTML، CSS و JavaScript امکان پذیر است. یعنی امکان فشرده سازی تصاویر و ویدئوها وجود ندارد. برخی از وبسایت های بزرگ نیز از فشرده سازی Gzip برای سایت‌مپ (Sitemap) وبسایت خود استفاده می کنند.

این نوع فشرده‌سازی صفحه هنگام اجرای گزارش ذکر شده در بالا روشن نمی‌شد و بنابراین اگر از فشرده‌سازی به درستی استفاده شود، صفحات بزرگ‌تر از 130 هزار همچنان می‌توانند زمان بارگذاری کارآمدی داشته باشند. در واقع، فشرده سازی فایل می تواند اندازه صفحات وب را تا 70 درصد کاهش دهد.

به این ترتیب، نسخه سبک تر صفحه وب را می توان به سرعت به مرورگر کاربر وب تحویل داد و سپس دوباره گسترش داد تا کاربر بتواند تجربه کاملی از تصاویر با کیفیت بالاتر و سایر ویژگی های صفحه وب داشته باشد.

همه اینها بدون اینکه کاربر وب از آنچه اتفاق می‌افتد آگاه باشد انجام می‌شود، بنابراین فشرده‌سازی و کاهش قیمت GZIP می‌تواند راه‌حلی محتاطانه برای جلوگیری از اینکه اندازه صفحات وب شما مانعی برای زمان بارگذاری شما باشد، باشد.

مواردی که باید در مورد اندازه متوسط ​​فایل تصویر در نظر بگیرید

منبع تصویر: filestack.com

بسیاری از اعداد مربوط به فایل های تصویری متوسط ​​به این دلیل است که فایل های تصویری معمولاً توسط توسعه دهندگان وب استفاده می شوند.

برای مثال، تصاویر GIF کمترین اندازه متوسط ​​فایل را داشتند، به احتمال زیاد به دلیل استفاده از آنها برای آیکون های رنگی مسطح و فاصله ها.

دومین اندازه کوچکترین فایل تصویر JPEG بود که عمدتاً برای عکس ها، تصاویر محصول و سایر تصاویری که لحن نرم تری دارند استفاده می شود. در نهایت، تصاویر PNG و SWF بیشترین حجم متوسط ​​فایل را داشتند، اما کارآمدتر در نظر گرفته می‌شوند زیرا PNG کیفیت بالاتری را حفظ می‌کند و با استفاده از فشرده‌سازی فایل، می‌توان آنها را بسیار سریع تحویل داد.

فهرست پسوندهای تصاویر:

گرافیک رستری یا گرافیک پیکسلی یک نوع روش ذخیره سازی و تولید تصاویر دیجیتال می‌‌‌ باشد که در آن تصاویر از مجموعه از واحد های کوچک پیکسلی تشکیل می شود.
تصاویر رَستر که اغلب به آنها تصاویر بیت مپ نیز گفته میشود تصاویری هستند که از هزاران و یا میلیون ها مربع کوچک (پیکسل) ساخته شده اند. برای تشخیص تصاویر رستر یا بیت مپ کافیست از فاصله نزدیک به آنها نگاه کنید یا به عبارتی روی آنها زوم کنید .

اینگونه تصاویر به هنگام زوم (هنگامی که میزان زوم بیش از رزولوشن یا ابعاد اصلی تصویر باشد) کیفیت و وضوح خود را از دست میدهند. همچنین هنگامی که بیشترین میزان زوم را اعمال کنید ، تصویر به شکل مربع هایی تک رنگ در کنار یکدیگر در خواهد آمد. این موضوع در قسمت هایی از لبه های تصویر که کنتراست بیشتری دارد واضح تر به چشم میخورد.
همانطور که میدانید پیکسل ها کوچکترین جز تشکیل دهنده ساختار یک تصویر هستند که هنگام زوم بر روی تصاویر ، به صورت مربع های تک رنگ نمایان می شوند.

مزایای تصاویررستر (پیکسلی) :

پشتیبانی این تصاویر در اکثر برنامه های گرافیکی
استفاده از تصاویر پیکسلی در صنعت تبلیغات و نمایش گرافیک در وب
عدم محدودیت در استفاده از طیف رنگ و رنگهای واقعی

معایب تصاویر رستر (پیکسلی) :

عدم تغییر در سایز و اندازه تصاویر پیکسلی (بدلیل افت کیفیت شدید در عکس)
عدم استفاده تصاویر پیکسلی در صنعت برش
حجم بالای تصاویر پیکسلی

Common Raster Image File Formats
JPG
PNG
GIF
WEBP
TIFF
PSD
RAW
BMP
HEIF
INDD
JPEG 2000
Common Vector Image File Formats تصاویر برداری که با بزرگ شدن تصویر کیفیت تغییر نخواهد کرد
SVG
AI
EPS
PDF

اگرچه فایل‌های CSS و جاوا اسکریپت خارجی به عنوان بخشی از اندازه‌گیری متوسط ​​صفحه وب در نظر گرفته نشدند، اما مشخص شد که میانگین اندازه فشرده نشده آن‌ها 28.7k است.

بسیاری از توسعه‌دهندگان وب از فایل‌های CSS خارجی استفاده می‌کنند تا بتوانند تغییرات طراحی را به نحو مؤثرتری انجام دهند، و بارگذاری فایل‌های CSS همزمان با بارگذاری صفحه HTML که CSS به آن متصل است، انجام می‌شود.

به همین دلیل است که فشرده سازی فایل برای ناب نگه داشتن صفحات HTML و CSS و کمک به بارگذاری سریع آنها مهم است.

چیزی که برای آینده باید در نظر گرفت: نقش فناوری

در زمان نگارش این مقاله، آمار بالا نشان دهنده اندازه متوسط ​​HTML، CSS و فایل های تصویری است و بنابراین راهنمای خوبی برای تعیین اندازه صفحات وب شما ارائه می دهد.

با این حال، با پیشرفته‌تر شدن فناوری‌های مرورگر وب و سرورهای اینترنتی، این احتمال وجود دارد که اندازه فایل‌ها و صفحات وب بزرگ‌تر بتوانند به طور مؤثر ارائه شوند.

بهترین روش برای هر توسعه دهنده وب این است که صفحات وب خود را در مرورگرهای مختلف و با سرعت اینترنت کمتری که در حال حاضر در بازار وجود دارد آزمایش کند. به این ترتیب، آنها می توانند صفحات وب را ایجاد کنند که برای طیف گسترده ای از کاربرانی که در وب سایت آنها قرار می گیرند، به طور موثر بارگذاری شوند.

نتیجه
این داده ها می توانند به عنوان راهنمایی برای ساخت صفحات وب که به سرعت بارگذاری می شوند و در نتیجه به شما در بهینه سازی وب سایت خود برای موتورهای جستجو کمک می کند، استفاده شود.