من دربارهی اینکه چگونه میتوانیم وبسایتهای خودمان را برای سرعت بهینه سازی کنیم، بسیار فکر میکنم. دنیا در حال شلوغ شدن است و هیچکس دوست ندارد منتظر بارگذاری یک وبسایت باشد.
موارد بسیار کمی وجود دارد که یک کاربر میتواند انجام دهد تا یک وبسایت سریعتر عمل کند. اما برای توسعه دهندگانی مثل ما، امکانات بی پایانی برای انجام دادن وجود دارد. بهینه سازی واقعی با کد شروع میشود و با چیزهایی در سمت سرور مانند میزبانی، CDNها، ذخیرهسازی و موارد دیگر به پایان میرسد.
در اینجا بهترین روشهای ممکنی که برای بهینه سازی یک وبسایت یاد گرفتم و اجرا کردم را برای شما به اشتراک میگذارم.
این یک عکس از نتیجهی کارم است.
من بابت اشتراک میزبانی ابری هر ماه ۵ دلار پرداخت میکنم. در حال حاضر دامنه را پنهان کردهام، چون به طور موقت میزبان آن است.
چرا سرعت مهم است
مشغلهی مردم زیاد شده است و آنها وقت گرانبهای خود را در حال انتظار بارگذاری وبسایت هدر نمیدهند.
از آوریل سال ۲۰۱۰ تا الان، سرعت بارگذاری وبسایت یکی از مهمترین عوامل در SEO بوده است.
نکتهی جالب دیگر در مورد سرعت بارگذاری این است که بر روی برند شما تاثیر میگذارد. من به راحتی میتوانم ۳ یا ۴ وبسایت فوقالعاده سریع را که بلافاصله پس از کلیک کردن بارگذاری میشدند را به خاطر بیاورم.
فرض کنید در حال بازدید از یک سایت تولیدی هستید و بارگذاری آن ۱۰ ثانیه طول میکشد. آیا شما ۱۰ ثانیهی دیگر در صفحهی صورتحساب به هدر خواهید داد؟ این اتفاق چه تاثیری بر اعتماد شما میگذارد؟ آیا به وبسایتی که زمان زیادی برای بارگذاری نیاز دارد، اعتماد خواهید کرد؟
قبل از اینکه مثل یک توسعه دهنده رفتار کنید، مثل یک کاربر فکر کنید.
وبسایتهای خوب سریعتر بارگذاری میشوند و کاربران صفحهی وب را در یک چشم به هم زدن دریافت میکنند.
ابزارهای مختلف تست سرعت
حالا میدانید که چرا باید وبسایتهای خودمان را بهینه سازی کنیم تا سریعتر بارگذاری شود. در ادامه یک مرور اجمالی بر ابزارهایی که در عملکرد بنچمارکینگ (معیارسنجی) محبوب هستند، میاندازیم.
مرورگر شما
بله، مرورگر شما دارای یک ابزار قدرتمند است که به شما این امکان را میدهد تا سرعت بارگذاری وبسایت خودتان را بدانید. من معمولا از آن استفاده میکنم تا اطلاعات دقیقی از تعداد فایلها (اسکریپتها و استایلشیتها) که در هر درخواست صفحهی وب بارگذاری میشود، دریافت کنم.
ابزارهای توسعه دهندهی مرورگر خود را باز کنید (کلیک راست کنید و بر روی Inspect کلیک کنید) و سپس به Network Tab بروید.
صفحهی وب را بارگذاری مجدد کرده و Cache را غیرفعال کنید و پس از انجام این کارها، شما آمار دقیق سرعت بارگذاری را مشاهده خواهید کرد.
اما این روش محدودیت دارد، زیرا فقط سرعت بارگذاری را از محل شما آزمایش میکند و ما میدانیم که سرعت در نقاط مختلف جهان متغیر است.
ابزار Pingdom
این ابزار راهحلی برای تست سرعت جهانی است: چندین مکان را برای تست سرعت بارگذاری وبسایت خود انتخاب کنید.
همچنین گزارش مفصلی با توصیههایی ارائه میکند که میتوانید برای بهینه سازی بیشتر استفاده کنید.
Page Speed Insights
Page Speed insights این باور را ایجاد کرد که باید نمرهی SEO صد باشد. اگرچه این کاملا درست نیست، زیرا برخی از وبسایتهای مشهور دارای نمرهی کمتر از ۷۰ هستند.
این وبسایت از Lighthouse به عنوان ابزار تجزیه و تحلیل استفاده میکند و این بهطور مستقیم با SEO مرتبط نیست.
Lighthouse یک ابزار متنباز برای تجزیه و تحلیل عملکرد وبسایت است. این ابزار وبسایت را برای عملکرد، SEO، قابلیت دسترسی، برنامههای وب پیشرفته و ... بازرسی میکند.
اگر شما یک وبسایت را به صورت Local توسعه میدهید، Lighthouse نیز به عنوان یک افزونهی مرورگر یا پکیج NPM در دسترس است.
این جزییات بهینه سازی مهمی را ارائه میدهد که سایر ابزارها نمیتوانند ﺁنها را گزارش دهند. برای کاهش اندازهی صفحهی وب و بهینه سازی سرعت بارگذاری وبسایت بسیار مفید است.
GTmetrix
من GTmetrix را خیلی دقیقتر از سایر سرویسها میدانم. این ابزار دیدگاه دقیقی دربارهي سرعت بارگذاری وبسایتتان به شما ارائه میدهد. همچنین گزارش کاملی از بهترین شیوههایی که میتوانند عملکرد وبسایت شما را بهبود ببخشند، ارائه میدهد.
بهترین راههای بهینه سازی سرعت بارگذاری وبسایت
اکنون به قسمتی رسیدیم که میتوانیم بر روی بهینه سازی کار کنیم. تمام این مراحل در بهبود عملکرد هر وبسایت بسیار مفید هستند.
فقط به خاطر داشته باشید که انجام همهی مراحل برای هر کسی لازم نیست. ممکن است در هنگام بهینه سازی اتفاقات خیلی زیادی مثل خراب شدن سایتتان رخ دهد.
از پکیجها و اسکریپتهای اضافی در هر زمان که ممکن باشد، اجتناب کنید
هنگامی که توسعهی وب را شروع کردم، ترجیح دادم NPM را برای هر یک از مشکلاتم نصب کنم. ولی من خیلی تازهکار بودم. خیلی زود متوجه شدم که باید هزینهی نصب پکیجهای جدید را برای هر مشکلی که با ﺁن روبرو میشوم بپردازم.
استفاده از پکیجهای NPM برای توسعهی سریع خوب است، اما هر پکیج جدیدی دارای قابلیتهای بیشتری است که شاید هرگز نیازی به ﺁنها نداشته باشید.
مشکل واقعی در بروزرسانی پروژه نهفته است. بنابراین، مدیریت بسیاری از پکیجها مانند کابوس است.
به جای اینکه یک پکیج NPM را پیدا کنید تا مشکلاتتان را برای شما حل کند، بهتر است که مشکلات اساسی را توسط خودتان برطرف کنید.
در اینجا یک افزونهی مفید VS Code وجود دارد که به شما اجازه میدهد تا حجم پکیج Import شده را بدانید.
همین مورد دربارهی jQuery هم صدق میکند. در یک دورهی زمانی باید برای هر یک از برنامهها یک کتابخانهی جاوااسکریپت میداشتید. اما امروزه Vanilla JS با قدرت کار میکند.
اگر از jQuery استفاده نکنید، در حدود ۳۰ کیلوبایت بارگذاری اضافی در صفحهی وب ذخیره خواهد شد.
این وبسایت میتواند برای پیدا کردن جایگزین jQuery مفید باشد: مجموعهای فوقالعاده از جایگزینهای jQuery.
من فقط با حذف jQuery از تم Ghost CMS حدود ۱۰۰ میلی ثانیه صرفهجویی کردم. مراحل زیادی را برای جایگزینی jQuery با Vanilla JS طی کردم، اما نتیجهی کار فوقالعاده بود.
CSS استفاده نشده را حذف کنید
فریمورکهای CSS در توسعهی سریع برنامههای وب بسیار مفید هستند. با این حال، آنها اجزا و سبکهای بسیاری دارند که ما هرگز در پروژههای خود استفاده نمیکنیم.
PurgeCSS در این مواقع بسیار مفید است، زیرا CSS استفاده نشده را از استایلشیت حذف میکند. استفاده از آن ساده نیست، اما ارزش وقت گذاشتن را دارد.
همچنین گاهیاوقات PurgeCSS، CSS قابل استفاده در پروژهی شما را حذف میکند. بنابراین توصیه میکنم پس از استفاده از آن، وبسایت را بهطور صحیح تایید کرده و تست کنید.
به عنوان نمونه، تم تاریک وبسایت مرا از بین برد، زیرا PurgeCSS متغیرهای CSSی که در آن زمان غیرقابل استفاده بودند را حذف کرده بود.
CSS و جاوااسکریپت را Minify کنید
قبل از اینکه فایلهای CSS و جاوااسکریپت را در سرورهای تولیدی فشردهسازی کنید، باید آنها را Minify کنید.
Minify کردن CSS و جاوااسکریپت به معنای از بین بردن کدهای نظرات، فضای خالی و tabها از فایل است. این کار تقریبا ۵۰ درصد از حجم فایل را کاهش میدهد و صفحات وب شما را قادر میسازد تا خیلی سریعتر بارگذاری شوند.
در ادامه شاهد دو مورد از مینیفایرهای CSS و جاوااسکریپت هستید که میتوانید به صورت آنلاین از آنها استفاده کنید.
- مینیفایر آنلاین جاوا اسکریپت
با این حال، این یک راهحل یک طرفه نبود. در ابتدای کار خیلی چیزها را مثل حالت شب و بسیاری دیگر از عملکردهای ایجاد شده توسط جاوااسکریپت را از بین برد، زیرا PurgeCSS موارد غیر قابل استفاده را حذف میکرد.
من مجبور شدم آن سبکها را از پلاگین PurgeCSS بررسی و حذف کنم.
فشردهسازی و تغییر اندازهی تصاویر
تصاویر عوامل مهمی هستند که بر سرعت بارگذاری هر وبسایت تاثیر میگذارند. بسیاری از وبسایتها حتی در صورت عدم نیاز به تصاویر با وضوح بالا از آنّها استفاده میکنند.
همیشه به خاطر داشته باشید که قبل از بارگذاری تصاویر در وب، آنها را برش داده و فشردهسازی کنید. میتوانید قبل از استفاده از آنها در وبسایت خود از ابزارهای فشردهسازی آنلاین مانند Tiny PNG استفاده کنید.
شما میتوانید با استفاده از فشردهسازی تصاویر حجم آنها را تا۶۰ الی ۷۰ درصد کاهش دهید.
تصاویر Lazy Load
همانطور که گفتم، تصاویر از عوامل مهم سرعت بارگذاری وبسایت هستند. این بدان معناست که شما باید هنگام بارگذاری آنها، گامهای درستی را برای بهینه سازی تصاویر بردارید.
ابتدا میتوانید تصاویر خارج از صفحه نمایش را نادیده بگیرید. به این معنی است که تصاویر زمانی بارگذاری شوند که کاربر صفحه را اسکرول میکند یا به بخش مربوطه هدایت میشود، در غیر این صورت تصویری نباید بارگذاری شود.
lazy load در بهینه سازی وبسایت شما برای بارگذاری سریع بسیار کارآمد است.
انجام این کار واقعا مفید است، چون گاهی اوقات کاربر نیازی به اسکرول کامل تا انتهای صفحه و خواندن تمام مطالب وبسایت شما را ندارد. پس باید تصاویر را هنگامی بارگذاری کرد که کاربر به سمت آن اسکرول میکند.
شما باید lazy load را با دقت پیادهسازی کنید و مطمئن شوید که محتوای fallback در جاوااسکریپت به عنوان یک گزینهی جایگزین در جای خود قرار دارد.
شما میتوانید روش پیادهسازی lazy load را در این مقالهی راکت مشاهده کنید.
Defer کردن بارگذاری جاوااسکریپت
شما باید تمام اسکریپتهای سنگین را در انتهای صفحه قرار دهید.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Script Demo</title>
</head>
<body>
<header>Some Beautiful Header that Rocks</header>
<article> Some awesome Content ... </article>
<section>Some more content...</section>
<!-- This is Where all the heavy scripts and stylesheets should be present. -->
<script src="js/scripts.js" defer></script>
</body>
</html>
انجام این کار مهم است، زیرا کاربران میتوانند محتوای اتصالات کندتر را بخوانند، در حالی که اسکریپتهای سنگین در پسزمینه بارگذاری میشوند.
این یکی از رایجترین مشکلات برجسته شده توسط دیدگاههای سرعت گوگل است. با اجرای صحیح این مرحله میتوانید به راحتی نمرهی خود را بهبود بخشید.
ویژگی Defer کردن در این سناریو بسیار مفید واقع میشود، زیرا اجرای اسکریپت را فقط پس از بارگذاری سند مجاز میداند.
یک ارائه دهندهی هاستینگ (سرویس میزبانی) خوب انتخاب کنید
شما نمیتوانید از هر یک از ارائه دهندگان ضعیف هاستینگ، انتظار یک سرعت خوب برای بارگذاری وبسایت را داشته باشید. اگر توانایی پرداخت میزبانی ابری یا VPS را دارید، به دنبال این دو گزینه بروید.
اگر تعداد بازدید کنندگان شما زیاد نباشد، ارائه دهندگان هاستینگ با کیفیت پایین بر روی سرعت وبسایت شما تاثیر نمیگذارد. با این حال، با افزایش تعداد بازدید کنندگان، آنها قادر به ادارهی چنین حجم ترافیکی نیستند. پس بهتر است که از ابتدا فکر همه چیز را بکنید.
از CDN استفاده کنید
اگر وبسایت شما از سراسر جهان بازدید کننده دارد، CDNها به شما کمک خواهند کرد تا داراییهای خود را به سرعت تحویل دهید.
وقتی یک شبکهی CDN ایجاد میشود سرورهایی در نقاط مختلف جهان و در کشورهای مختلف با طول جغرافیایی مشخص و تعیین شدهای کانفیگ و مستقر میشوند، در نهایت با دریافت دادهها از سرور اصلی و ذخیره آن به صورت Cache شده بر اساس موقعیت جغرافیایی بازدیدکننده که بر اساس ISP مخابراتی کاربر شناسایی میشود، دادهها را از نزدیکترین CDN به کاربر تحویل خواهند داد تا کاربر با سرعت بیشتری به این دادهها دسترسی داشته باشد.
Caching (ذخیرهسازی در حافظهی پنهان)
Caching بهترین راهحل ممکن برای سریعتر کردن سرعت بارگذاری وبسایت است.
Caching در سمت سرور، تحویل سریعتر دادهها را امکانپذیر میسازد و در سمت مشتری سرعت بارگذاری خیلی سریع را فراهم میکند.
منابع مختلفی مانند اسکریپتها، استایلشیتها و برخی فایلهای متداول دیگر وجود دارند که با هر بارگذاری صفحه استفاده میشوند. ما میتوانیم آنها را به صورت Local ذخیره کنیم تا دفعهی دیگر به جای سرور از Cache استفاده کند.
Caching در سمت سرور هر بار از انجام عملیاتهای اضافی Database جلوگیری میکند و باعث صرفهجویی در زمان و هزینه میشود.
فقط به خاطر داشته باشید که اگر دادههای داینامیک زیادی دارید، Caching در سمت سرور مناسب نیست.
شما باید در هنگام Caching دقت کنید، اگر این کار به درستی اجرا نشود، ممکن است کاربر در هر بار بازدید از سایت، همان محتوای قدیمی را مشاهده کند.
فشردهسازی Gzip
فشردهسازی Gzip یکی از رایجترین توصیههای تست سرعت Pingdom است. Gzip روشی برای فشردهسازی فایلها برای تحویل سریعتر به کاربران شماست. این عملیات به صورت پیش فرض توسط بسیاری از ارائه دهندگان هاستینگ فعال شده است.
اگر شما از هاست ابری استفاده میکنید، فعال کردن فشردهسازی Gzip نه تنها سرعت بارگذاری وبسایت شما را کاهش میدهد، بلکه باعث میشود استفاده از پهنای باند سرورها هم کاهش یابد.
در اینجا کدی برای افزودن در فایلهای پیکربندی وجود دارد تا فشردهسازی Gzip در سرور Nginx فعال شود:
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types application/javascript application/rss+xml application/vnd.ms-fontobject
application/x-font application/x-font-opentype application/x-font-otf application/
x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml
application/xml font/opentype font/otf font/ttf image/svg+xml image/x-icon text/css text/
javascript text/plain text/xml;
در ادامه کدی برای افزودن فایل .htaccess برای فعالسازی Gzip در سرور Apache وجود دارد.
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>
AMP برای موبایل
من در جایی خواندم که AMP میتواند بر فروش شما تاثیر بگذارد. اما همانطور که در ابتدای این مقاله بیان کردم، برای اینکه وبسایت را سریعتر کنید نیازی به اجرای تمام این مراحل ندارید. فقط عاقلانه انتخاب کنید.
اگر مانند یک وبلاگ ساده یک پلتفرم انتشاراتی اجرا میکنید، باید به دنبال AMP بروید، زیرا انجام این کار به نفع شما خواهد بود.
همچنین از تبلیغات حمایت میکند تا این کار کمترین تاثیر را بر درﺁمد شما داشته باشد، اما مزایای آن عالیست. AMP دارای سریعترین سرعت بارگذاری در تلفنهای همراه است.
در ادامه یک کد بسیار اساسی از AMP را مشاهده خواهید کرد.
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps
(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-
keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start
{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to
{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@
keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-
boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:
none}</style></noscript>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
بهینهسازیهای خاص وردپرس
پلاگین کمتر
پلاگینها میتوانند هم قدرت و هم نفرینی برای وردپرس باشند. هر دو به تعداد و کیفیت پلاگینهایی که در سایت خود استفاده میکنید، بستگی دارند.
تعداد پلاگینها مستقیما بر روی سرعت بارگذاری وبسایت شما تاثیر میگذارد. من همیشه توصیه میکنم که فقط از پلاگینهای ضروری استفاده کرده و از بقیه اجتناب کنید.
از پلاگین Autoptimize استفاده کنید
این یک پلاگین ساده است که اکثر مشکلات را با استفاده از استایلشیتها و فایلهای جاوااسکریپت برطرف میکند. من بلافاصله بعد از نصب این پلاگین بیشتر از ۲۰ امتیاز در دیدگاه سرعت گوگل کسب کردم.
این پلاگین Cacheها، Deferها و minifyهای فایل جاوااسکریپت و CSS را فشردهسازی میکند که باعث افزایش سرعت در بارگذاری صفحه میشود.
آیا واقعا به وردپرس احتیاج دارید؟
من میدانم که این موضوع نباید تحت بهینهسازیهای وردپرس باشد. اما مهم است که از خود بپرسید، آیا واقعا به وردپرس احتیاج دارید؟
من عاشق وردپرس هستم، چون هم جا افتاده و کامل است و هم برای مبتدیان بهترین انتخاب میباشد. اما بعضی اوقات فکر میکنم برای کارهای ساده خیلی سنگین است.
اگر به یک پلتفرم انتشار ساده و بدون یکپارچگی نیاز دارید، این گزینهها مناسب هستند.
- Ghost CMS
- Netlify CMS (محبوب شدن با تولیدکنندگان سایت استاتیک)
- Gatsby،Hugo،Jekyll (تولیدکنندگان سایت استاتیک)
بیش از اندازه بهینه سازی نکنید
بهینه سازی خوب است، اما شما نباید در انجام تمام مراحل سختگیری کنید و وسواس داشته باشید. همانطور که قبلا هم اشاره کردم، احتمال آنکه بخشی از سایت شما با انجام یکی از این مراحل خراب شود زیاد است.
تمام مراحل را یادداشت کنید و نکتهسنجی کنید تا متوجه شوید که کدام مرحله مناسب سایت شماست. در پایان، بهینه سازی بیش از حد معمولا بد است. سرعت واقعا ضروری است اما از طرف دیگر تجربهی کاربری نیز بسیار اهمیت دارد.
یک وبسایت خوب سرعت شگفتانگیز را با UI و UX عالی حفظ میکند.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید