افزایش سرعت سایت

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

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

روش های بهینه سازی Front end بعد از طراحی سایت

1. پاک کردن سند HTML

HTML که مخفف کلمه " hypertext markup language" است ستون یک وبسایت محسوب میشود. HTML به شما امکان می دهد صفحات وب را با عناوین، زیرعنوان ها، لیست ها و سایر ویژگی های مفید برای سازماندهی متن قالب بندی کنید. با جدیدترین به روزرسانی در HTML5، می توانید گرافیک جذابی نیز ایجاد کنید.

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

• قرارگیری مناسب CSS

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

>head>

    <link href='https://yourwebsite.com/css/style.css' rel='stylesheet' type='text/css'>

head>

این استراتژی، سرعت بارگذاری وب سایت شما را بهبود نخواهد بخشید، اما بازدیدکنندگان وبسایتتان را از انتظار در صفحه های خالی یا دیدن فلش متن بدون استایل (FOUT) بازمی دارد. اگر بیشتر عناصر بصری صفحه وب شما قبلاً بارگیری شده باشند، به احتمال زیاد بازدیدکنندگان منتظر بارگذاری کل صفحه خواهند بود، بنابراین سرعت سایت شما بهبود می یابد.

• جاگذاری صحیح جاوا اسکریپت

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

علاوه بر این هنگام استفاده از JavaScript همیشه باید بارگذاری اسکریپت async را ترجیح دهید. این امر از مسدود شدن روند ارائه HTML به وسیله تگ های <script> پیشگیری میکند. 

با وجود اینکه HTML یکی از با ارزش ترین ابزارهای موجود در اختیار طراحان وب است، اما اغلب با نشان های (attributes) CSS و JavaScript استفاده می شود که می توانند صفحه وب شما را کند کنند. نشان های (attributes) CSS و JavaScript می توانند صفحات وب شما را به سمت بهتر شدن، تغییر دهند اما از آن ها باید به طور مناسب استفاده کنید. یک روش خوب با CSS و JavaScript جلوگیری از جاسازی کد است. وقتی کد را تعبیه می کنید، CSS را در یک تگ استایل قرار می دهید و از JavaScript در تگ های اسکریپت استفاده می کنید. این کار میزان کد HTML که باید با هر بار تازه سازی صفحه وب خود بارگذاری شود، را افزایش میدهد.

2. بهینه کردن عملکرد CSS

برای تبدیل محتوای مبتنی بر HTML شما به یک سند حرفه ای، می توانید از CSS استفاده کنید. بسیاری از گزینه های CSS به درخواست های HTTP نیاز دارند، بنابراین باید سعی کنید بدون از بین بردن ویژگی های اساسی، فایل های CSS با حجم زیاد را به حداقل برسانید. اگر بنر، پلاگین و لینک طرح شما در پرونده های جداگانه CSS قرار دارند، این امر به مرورگرهای بازدید کننده شما نیاز دارد تا پرونده های باحجم زیادی را به طور هم زمان بارگیری کنند. اگرچه اکنون به لطف HTTP / 2 کمتر مشکلی ایجاد شده است، اما اگر پرونده ها از منابع خارجی بارگیری شوند، این مساله قطعاً می تواند زمان بیشتری را صرف بارگذاری کند.

تگ لینک بهترین گزینه برای شما میتواند باشد و همچنین باعث بهبود عملکرد  فرانت اند وب سایت شما می شود. علاوه بر این، درخواست های ورق های استایل خارجی (external style sheets) همراه با تگ لینک، دانلودهای موازی را مسدود نمی کنند.

3. کاهش دادن درخواست های HTTP خارجی

در بسیاری از موارد قسمت عمده ای از زمان بارگذاری وب سایت، از طریق درخواست های HTTP خارجی حاصل می شود. سرعت بارگیری یک منبع خارجی بسته به زیرساخت ارائه دهنده میزبان، موقعیت مکانی و غیره متفاوت است. اولین هدف شما برای کاهش درخواست های HTTP خارجی باید بررسی وب سایت شما با دیدگاه حداقلی باشد. هر یک از مولفه های صفحات وب خود را مطالعه کرده و ویژگی هایی را که تجربه بازدیدکنندگان شما را بهبود نمی بخشد حذف کنید. این ویژگی ها میتوانند شامل تصاویرغیرضروری، جاوا اسکریپت غیرضروری، CSS بیش از اندازه و پلاگین های غیرضروری باشند. بعد از حذف کردن این موارد و مرتب کردن، وزن محتوای باقیمانده را کاهش دهید.

4. کم کردن CSS ، JavaScript و HTML

تکنیک های کوچک سازی میتواند در حذف کردن کاراکترهای غیرضروری در یک فایل، به شما کمک کند. زمانی که در حال نوشتن کد در یک ویرایشگر هستید، احتمالا از یادداشت استفاده میکنید. این روش ها مطمئناً کد شما را منظم و قابل خواندن نگه می دارند، اما همچنین بایت های اضافی به سند شما اضافه می کنند. با استفاده از ابزار minification به راحتی می توانید بایت های موجود در پرونده های CSS، JS و HTML خود را کوتاه کنید.

5. فعال کردن پیش فرض (Prefetching)

پیش فرض میتواند تجربه مرور بازدید کنندگان شما را بهبود بخشد. 3  نوع اصلی پیش پیش فرض وجود دارند که شامل پیش فرض لینک، پیش فرض DNS و پیش فرض prerendering هستند. با پیش فرض، URL، CSS ، تصاویر و JavaScript برای هر لینک جمع میشوند حتی قبل از اینکه شما صفحه وب فعلی خود را ترک کنید. این تضمین می کند که بازدیدکنندگان می توانند از لینک ها برای حرکت در بین صفحات با حداقل زمان بارگیری استفاده کنند.

خوشبختانه فعال کردن پیش فرض آسان است. بسته به نوع پیش فرضی که می خواهید فعال کنید، شما میتوانید به سادگی تگ rel = "prefetch" ، rel = "dns-prefetch" یا rel = "prerender" را به نشان های (attributes) لینک خود در وبسایت HTML خودتان اضافه کنید.

6. افزایش سرعت با CDN و حافظه پنهان

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

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

7. فشرده کردن پرونده ها

زمانی که بسیاری از سرویس های CDN فایل های شما را فشرده می کنند، اگر از CDN استفاده نمی کنید برای بهبود افرایش سرعت سایت خود از روش فشرده سازی فایل در سرور مبدا استفاده کنید. فشرده سازی فایل باعث ساده و آسان شدن مدیریت محتوای سایت شما می شود. یکی از متداول ترین روشهای فشرده سازی فایل ، Gzip است. این یک روش عالی برای کم کردن حجم اسناد، فایل های صوتی، تصاویر PNG و سایر پرونده های حجیم است که قبلاً فشرده نشده اند.

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

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

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

9. به کار بردن یک فریم ورک با حداقل ابزارها

تا زمانی که ساخت و طراحی سایت خود را صرفاً با دانش برنامه نویسی خود ایجاد نکرده باشید، می توانید با استفاده از یک فریم ورک front end متناسب، از بسیاری از اشتباهات بهینه سازی جلوگیری کنید. اگرچه برخی از فریم ورک های بزرگتر و معروف تر دارای یکسری ویژگی ها و گزینه های اضافی هستند؛ اما ممکن است پروژه وب شما به همه آنها نیازی نداشته باشد.

به همین دلیل مهم است که تعیین کنید پروژه شما به چه ویژگی هایی نیاز دارد و با یک فریم ورک شروع شود که می تواند این ویژگی ها را در عین سبک بودن ارائه دهد. برخی از فریم ورک هایی که اخیراً طراحی شده اند از کدهای مختصر HTML ، CSS و JavaScript استفاده می کنند.

بهینه سازی Front end  به نظر کار سختی می آید، اما شما میتوانید به طور قابل توجهی سرعت بارگذاری وب سایتتان را به وسیله راه  کارهای پیشنهاد شده، افزیش دهید. فراموش نکنید هرچه سرعت بارگذاری وب سایت بیشتر باشد، کاربران بیشتری را جذب خواهد کرد و این موضوع به نفع شما خواهد بود. تمام این نکات به این دلیل است که به عنوان یک متقاضی طراحی سایت در هر حرفه‌ای مانند طراحی سایت فروشگاهی، تبلیغاتی، آموزشی و ... ، اطلاعاتی برای بهینه سازی سایت خود به دست خواهید آوردو همچنین هنگام انتخاب شرکت برای این کار تمام این موارد را با تیم طراحی سایت عنوان کرده که به بهترین نحو کار شما انجام گردد. شما میتوانید طراحی سایت ارزان را انجام داده ولی تمام این نکات رعایت شوند.