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

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

اگر چه در مقاله ی سرعت سایت به بسیاری از مسائلی که در سرعت سایت تاثیر دارند اشاره کردیم و در واقع نگاه جامعی داشتیم، اما به دلیل اینکه برخی از وب سایت ها برای سرعت سایت اهمیتی قائل نیستند، در این مقاله به سایز صفحه به صورت جداگانه می پردازیم. به مسئله سایز صفحه تا جایی توجه نمی شود که گاهی صفحاتی با حجم 50MB!!! هم در وب سایت ها مشاهده می شود و این مسئله نشان از بی توجهی کامل به بهینه سازی سایز صفحه است. برای لود چنین صفحه ای، با سرعت های معمولی رایج شرکت های اینترنتی، چیزی حدود 50 ثانیه باید صبر کرد و این در حالی است که گوگل پیشنهاد می کند سرعت بارگذاری صفحات بهتر است کمتر از 2 ثانیه باشد!!!!!!.

عملا منظور ما از بیان این جملات این است که گاهی با رعایت چند نکته ساده می شود به راحتی سایز صفحات را بهینه کرد و در نتیجه سرعت لود صفحه بسیار بالا برود. به عنوان مثال با بهینه سازی یک مورد ساده یعنی تصاویر می توانید سایز صفحه را تا حد خوبی بهینه کنید و مثلا با بهینه سازی صفحه ای که مثلا 5 عکس در آن است، می توانید سایز آن را از مثلا 2MB به چیزی حدود 400KB کاهش دهید.  

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

سایز صفحه چیست؟

سایز صفحه (Page Size) که همچنین در برخی منابع به وزن صفحه (Page Weight) نیز مشهور است، شامل همه ی فایل هایی است که یک صفحه وب سایت، از آن ها تشکیل می شود. این فایل ها شامل تصاویر، فایل های صوتی، فایل های HTML، فایل های CSS، فایل های JS و … است. به عنوان مثال سایز صفحه ای با چند تصویر به حجم 500KB، یک فایل CSS ای با حجم 50KB و … چیزی حدود 550KB است.

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

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

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

در ادامه به مواردی که بتوانید سایز صفحه را بررسی کنید و بهینه کنید، خواهیم پرداخت.

روش های بهینه سازی سایز صفحه

وقتی صحبت از سایز صفحه می شود، سایز عناصر صفحه مهم می شود. در ادامه به مواردی می پردازیم که با انجام آن ها می توانید سایز صفحه را بهینه کنید.

کوچک کردن کدها

کوچک سازی کدها به معنی بررسی کد و حذف موارد غیر ضروری مانند فضاهای خالی و … است به طوری که کد کوچک شده دقیقا مانند کد اصلی عمل می کند ولی فضای کمتری می گیرد.

همانطور که می دانید می توانید به سه صورت از css و js استفاده کنید که یا به صورت CSS خارجی است یا به صورت CSS داخلی است و یا به صورت CSS درون خطی است. به هر صورتی که از آن ها استفاده می شود، لازم است که این کدها به بهینه ترین شکل ممکن نوشته شوند.  

کدهای غیر ضروری می تواند سایز صفحه را افزایش دهد و بنابراین می تواند در سرعت صفحه تاثیر گذار باشد. هنگام نوشتن کدهای CSS و JS مطمئن شوید که این کد ها تا جایی که می شود، بهینه نوشته شوند. همچنین بهتر است علاوه بر اینکه در کد نویسی به صورت بهینه نوشته شده باشند، تا حد کافی کوچک و فشرده نیز بشوند.

اگر از سایت های وردپرسی استفاده می کنید می توانید این کار را با پلاگین هایی نظیر fastest cache، Rocket انجام دهید. توجه داشته باشید که هنگام فشرده سازی آنها تغییری در کد اصلی بوجود نیاید و اگر بوجود آمد می توانید از ابزارهای دیگری استفاده کنید.

بهینه سازی ساختار درختی DOM

ساختار درختی DOM بزرگ می‌تواند عملکرد صفحه شما را به شیوه‌های متفاوت پایین آورد. این می تواند سرعت لود صفحه را بالا ببرد، بر عملکرد حافظه می تواند تاثیر بگذارد، می تواند در کارایی شبکه تاثیر منفی بگذارد و … که همه ی این ها می تواند تاثیر نامناسبی بر تجربه کاربری داشته باشد و همچنین سرعت را پایین بیاورد.

بهینه سازی اندازه درخت DOM به این صورت است که در فرآیند توسعه، شما باید بهینه سازی اندازه درخت DOM را مد نظر داشته باشید و بهینه بنویسید.

بهینه سازی تصاویر و ویدیو و …

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

بهینه سازی حجم تصاویر

با توجه به اینکه تصاویر با کیفیت، معمولاً حجم بالایی دارند و باعث کند شدن سایت می شوند، لازم است حجم تصاویر را بهینه کرد.  برای تعیین حجم مناسب تصاویر لازم است کیفیت آن کم نشود که در فتوشاپ به راحتی این کار را می توانید انجام دهید. برای این کار، بعد از آنکه کار ویرایش تصویرتان تمام شد، می توانید در نرم افزار فتوشاپ گزینه file را بزنید سپس export و بعد از آن save for web را بزنید و با بالا و پایین بردن کیفیت حجم تصاویر را چیزی در حدود زیر 100 کیلو بایت نگه دارید. با انجام این کار تصاویر بدون اینکه افت کیفیتی چشم گیری داشته باشند کاملا برای وب سایت بهینه شده اند و حجم بسیار کمتری دارند.

بهینه سازی اندازه تصاویر

بهتر است برای همه تصاویر سایت خود، سه اندازه بزرگ، متوسط و کوچک درنظر بگیریم و همیشه از این سه اندازه استفاده کنیم. در انتخاب اندازه، فقط نیاز است عرض تصاویر را ثابت در نظر بگیریم. با تنظیم عرض، ارتفاع به طور خودکار تنظیم خواهد شد. برای تعیین اندازه تصاویر می توانید پس از اضافه کردن عکس به نرم افزار فتوشاپ، اندازه ی آن را از قسمت Image size تغییر دهید.

ابزارهای بررسی سایز صفحه

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

Pingdom

Gtmetrix

Google Page Speed Insights

و …

با استفاده از این ابزارها می توانید سایز صفحات مختلف و صفحات مهم را بررسی کنید و در صورتی اقدامات لازم در جهت بهبود آن ها را انجام دهید.

سایز صفحه چیست؟

سایز صفحه (Page Size) که همچنین در برخی منابع به وزن صفحه (Page Weight) نیز مشهور است، شامل همه ی فایل هایی است که یک صفحه وب سایت، از آن ها تشکیل می شود. این فایل ها شامل تصاویر، فایل های صوتی، فایل های HTML، فایل های CSS، فایل های JS و … است. به عنوان مثال سایز صفحه ای با چند تصویر به حجم 500KB، یک فایل CSS ای با حجم 50KB و … چیزی حدود 550KB است.

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

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

برچسب :