راهنمای بهینه سازی وبسایت برای افراد مبتدی

من یک مبتدی هستم و توانستم در رتبه‌بندی بهینه سازی گوگل ۹۹ از ۱۰۰ را بدست آورم. اگر من می‌توانم این کار را انجام دهم، شما هم می‌توانید. اگر شما هم مثل من باشید، یقیناً مدارک و اثبات را دوست دارید. من به تازگی در حال بهینه سازی وبسایت hasslefreebrats بودم، در اینجا نتایج مربوط به سرعت صفحه را بیان خواهم کرد:

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

تصاویر

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

احتمالاً این موضوع از ابتدا آشکار است، اما برای من اینگونه نبوده بنابراین شاید برای شما هم مشخص نباشد. من از سرویس Optimizilla برای فشرده سازی تصاویر خود استفاده کردم. استفاده از این وبسایت بسیار آسان است. ابتدا شما تصاویر خود را در آن آپلود می‌کنید، سپس سطح فشرده سازی دلخواه خود را انتخاب کرده و تصویر فشرده شده را دانلود می‌کنید. من دیدم که اندازه برخی از منابع من تا ۷۰ درصد کاهش پیدا کرد، این سبب سریع‌تر شدن زمان بارگیری می‌شود.

Optimizilla تنها گزینه مورد نیاز شما برای فشرده سازی تصاویر نیست. شما می‌توانید از نرم‌افزارهای دیگری مثل ImageOptim (برای مک) و FileOptimizer (برای ویندوز) استفاده کنید. اگر ترجیح می‌دهید از ابزار برای فشرده سازی استفاده کنید، افزونه‌های Gulp و WebPack کارهای مشابهی را انجام می‌دهند. تا زمانی‌که به کار کردن ادامه دهید، نحوه‌ی انجام دادن آن‌ها اهمیتی نخواهد داشت. دستاوردهای عملکرد شما ارزش حداقل تلاش را دارند.

بسته به نوع استفاده‌ی شما، بررسی کردن فرمت فایل‌ها نیز می‌تواند ارزشمند باشد. به طور کلی jpg از png کوچک‌تر است. نیاز به وضوح و شفافیت، جزو اصلی‌ترین تفاوت‌ها در استفاده از این دو مورد است. اگر به شفافیت نیاز داشته باشم، از png استفاده می‌کنم. در غیر اینصورت باید از jpg استفاده کرد. گوگل نیز یک فرمت جدید به نام webp را معرفی کرده است که بسیار خوب می‌باشد. اما چون هنوز این فرمت در تمام مرورگرها پشتیبانی نشده، من در استفاده از آن شک دارم. 

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

ویدیو  

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

شما می‌توانید ویدیوهای خود را در یوتیوب میزبانی کرده و سپس از ابزار youtube-dl برای دانلود آن‌ها از یوتیوب استفاده کنید. این در حالی است که شما می‌توانید این ویدیوها را مطابق با نیازهای وبسایت خود تنظیم کنید. همچنین می‌توانید از راه‌حل‌های دیگری مانند Brightcove، Sprout و Wistia نیز استفاده کنید.

Gzip

در ابتدا وقتی وبسایت خود را راه‌اندازی کردم، اصلا نمی‌دانستم که فشرده سازی gzip چیست. اجازه دهید این مورد را به صورت خلاصه بیان کنم: gzip یک فرمت فشرده سازی فایل است که اکثر مرورگرها آن را درک می‌کنند. این کار می‌تواند بدون متوجه شدن کاربر در پس‌زمینه اجرا شود. بسته به مکانی که از برنامه خود میزبانی می‌کنید، فشرده سازی gzip می‌تواند به سادگی چرخاندن یک سوئیچ باشد تا نشان دهد که شما می‌خواهید سرور هنگام ارسال آن‌ها را به حالت gzip درآورد. وبسایت من در Heroku میزبانی شده و متاسفانه این فشرده سازی در آن ارائه داده نمی‌شود. 

بسته‌هایی برای اضافه کردن فشرده سازی به صورت صریح در کد سرور شما وجود دارد که به شما این امکان را می‌دهد تا مزایای gzip را در ازای چند خط کد بدست آورید. با استفاده از این میان‌افزار فشرده سازی، توانستم اندازه بسته‌های جاوااسکریپت و CSS خود را به میزان ۷۵ درصد کاهش دهم.

بهتر است سرویس میزبانی خود را بررسی کنید تا مطمئن شوید آیا گزینه gzip را ارائه می‌دهند یا خیر. 

کوچک‌سازی

این فرآیند در مورد حذف کردن کاراکترهای غیرضروری از کدها بدون تاثیرگذاری بر عملکرد آن است. این کار به شما اجازه می‌دهد تا سایز فایل‌های خود را کاهش دهید. این کار برای خنثی کردن کدهای شما نیز مفید است و باعث می‌شود تا تشخیص نقاط ضعف امنیتی توسط هکرها سخت‌تر شود. امروزه کوچک‌سازی معمولاً به عنوان بخشی از فرآیند ساخت انجام می‌شود. شما می‌توانید برای این کار از ابزارهایی مثل Webpack و Gulp استفاده کنید. البته استفاده از این ابزارها به کمی دانش احتیاج دارد. اگر به دنبال گزینه‌های ساده‌تری هستید، گوگل HTML-Minifier را برای HTML، CSSNano را برای CSS و UglifyJS را برای جاوااسکریپت پیشنهاد می‌کند.

ذخیره‌سازی مرورگر

هنگامی که یک مشتری دوباره از وبسایت شما بازدید می‌کند، ذخیره کردن فایل‌های استاتیک در حافظه نهان مرورگر روشی بسیار کارآمد برای افزایش سرعت وبسایت شما است. بعضی از منابع من به دلیل عدم وجود هِدر در HTTP ارسالی از سرور، به صورت مناسب ذخیره نمی‌شدند.

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

res.append("Cache-Control", "max-age=604800000");

res.status(200).json(response);

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

شبکه‌ی توزیع محتوا

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

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

برخی از CDNهای معروف شامل CloudFront و CloudFlare هستند.

موارد متفرقه

در اینجا چند نکته‌ی دیگر بیان شده تا بتوانید اطلاعات بیشتری را بدست آورید:

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

- اگر برنامه شما به جاوااسکریپت برای ارائه HTML بستگی داشته باشد، احتمالاً بهتر است تگ‌های script خود را در قسمت پایین بخش فایل HTML قرار دهید. با این وجود این می‌تواند بر روی تعامل شما تاثیر بگذارد، پس این تکنیک را برای تمام مواقع توصیه نمی‌کنم.

نتیجه‌گیری

وقتی موضوع بحث در مورد بهینه سازی وبسایت باشد، این تنها بخشی از ماجرا خواهد بود. بسته به میزان ترافیک دریافتی و خدماتی ارائه داده شده توسط شما، می‌توانید در بسیاری از بخش‌ها عملکردی خیره‌کننده داشته باشید. شاید شما به سرورهای بیشتری نیاز دارید، شاید به یک سرور با حافظه رم بیشتر احتیاج داشته باشید؛ کسی چه می‌داند؟ 

در مورد سرعت بخشیدن به سایت شما هیچ انتخابی نمی‌تواند برای تمام کارها ایده‌آل باشد. شما در نهایت باید بر اساس اندازه‌گیری‌ها بهترین تصمیم را برای وضعیت خود بگیرید. زمان خود را با بهینه سازی کردن موارد غیرضروری هدر ندهید. عملکرد سایت خود را برای یافتن مشکلات بررسی کنید، سپس با آن مشکلات خاص مقابله کنید.

منبع