نحوه افزایش بارگذاری صفحه خلاص شدن از شر درخواست های غیر ضروری در کد قالب

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

الگوریتم های رتبه بندی گوگل سرعت بارگذاری صفحه را در نظر می گیرند

9 آوریل 2010 گوگل سالرسما اعلام کرد که الگوریتم های آنها سرعت بارگذاری صفحه را در نظر می گیرند. شایعات مدت ها قبل از این منتشر شده بود - زمانی که شرکت شروع به تاکید بر سرعت با محصولات کروم خود کرد ( مرورگر سریع) و SPDY ( پروتکل سریعانتقال محتوای وب) و ترویج سریع کانال های باند پهن. در این مقاله سعی می کنیم توضیح دهیم که گوگل چگونه سرعت را تعیین می کند و چگونه می توانید سرعت بارگذاری صفحه خود را تست کنید و آن را بهبود بخشید.

ما بر این باوریم که سرعت بارگذاری صفحه افزودنی عالی به بقیه لیست عوامل تعیین کننده رتبه صفحه در گوگل است و دو دلیل اصلی برای این وجود دارد:

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

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

گوگل چگونه سرعت را تعیین می کند؟

دو روش اصلی برای تجزیه و تحلیل بارگذاری صفحه:

1. پاسخ به ربات گوگل. GoogleBot یک برنامه عامل است که پیوندها را در سراسر وب می‌خزد، صفحات و محتوا را دسته‌بندی می‌کند و همه آن‌ها را برای Google ارسال می‌کند که داده‌ها را با استفاده از الگوریتم خود پردازش می‌کند. ربات گوگل به سادگی اطلاعات را جمع آوری می کند، آن را تجزیه و تحلیل یا ارزیابی نمی کند. با این حال، محدودیت‌هایی برای خزیدن کامل یک صفحه خاص دارد، زیرا خزیدن در میان میلیاردها صفحه زمان زیادی می‌برد. این یکی از دلایلی است که توصیه می شود کد "تمیز" داشته باشید، محتوای خوب را در بالای صفحه قرار دهید و کدهای تکراری (مانند CSS) را در فایل های جداگانه قرار دهید.

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

ابزار اندازه گیری سرعت صفحه

بسیاری وجود دارد ابزار رایگانو پلاگین هایی برای اندازه گیری عملکرد سایت. در اینجا تعدادی از بهترین ها، به نظر ما، آورده شده است:

1. اگر در گوگل وبمستر اکانت دارید (و باید یکی داشته باشید)، می توانید از یک ابزار ویژه در قسمت Labs استفاده کنید. او به شما اجازه می دهد که دریافت کنید ایده کلیدر مورد سرعت بارگیری صفحات شما نسبت به صفحات سایر سایت ها در آمار.

2. Page Speed ​​یک افزونه برای مرورگرهای Firebug/Firefox است که میزان بارگیری صفحه را تعیین می‌کند و توصیه‌هایی برای رفع آن می‌دهد.

3. YSlow یکی دیگر از افزونه های Firebug/Firefox است که سرعت را تجزیه و تحلیل می کند و توصیه هایی را ارائه می دهد.

این تغییر الگوریتم برای شما چه معنایی دارد؟

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

6 روش برای بهبود سرعت و رتبه بارگذاری صفحه

1. تصاویر را بهینه کنید: تصاویر بزرگ را می توان سریعتر برش داد، فشرده کرد و دانلود کرد.
2. به جای تصاویر پس زمینه، فقط از رنگ ها استفاده کنید: این سریعتر بارگذاری می شود.
3. از کش استفاده کنید: ذخیره سازی برای کاربران راحت است، زیرا تصاویر و سایر فایل های ثابت تنها در اولین بازدید بارگیری می شوند و در بازدیدهای بعدی دیگر نیازی به این کار نیست.
4. بارگذاری جاوا اسکریپت خارجی و فراخوانی ها: بدترین کاری که می توانید انجام دهید این است که بازدیدکنندگان خود را وادار کنید تا تمام محتوا به یکباره بارگذاری شود. در صورت امکان، مطمئن شوید که محتوای شما ابتدا بارگیری می شود و محتوای خارجی بعد از آن بارگیری می شود.
5. استفاده از فایل های جداگانه برای کدهای تکراری: فایل های جداگانه بیشتر با جداول استفاده می شوند سبک های CSSو به شما این امکان را می دهد که کد html صفحه را ساده کنید (خطوط کمتری از کد)، و همچنین یک فایل مرکزی و آسان برای ایجاد تغییرات در بخش های مهم کد (به عنوان مثال، شیوه نامه ها) ارائه دهید.
6. به جای استفاده از استایل های CSS استفاده کنید جداول HTML: قبل از بارگذاری خود جدول، مرورگرهای وب (IE، فایرفاکس و غیره) منتظر می مانند تا تمام محتوای آن بارگذاری شود. CSS این فرآیند را سریعتر می کند (و به روز رسانی آسان تر).

1. یکی از ابزارهای بالا را انتخاب و نصب کنید.
2. تست سرعت بارگذاری برای صفحه اصلی و چندین صفحه دیگر از انواع مختلف.
3. تعیین کنید کدام مؤلفه ها را می توان بهبود بخشید. این موضوع را با کادر فنی و مدیر وب سایت خود در میان بگذارید.
4. برای مقایسه، تست های مشابه را با صفحات رقبا اجرا کنید.

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

سلام، خوانندگان عزیز! اخیراً نظری دریافت کردم که در آن سؤالی از من پرسیده شد: راز بارگذاری سریع سایت چیست؟ تصمیم گرفتم با یک نظر پاسخ ندهم (برای نوشتن خیلی زیاد)، اما بلافاصله یک پست مفید در مورد این موضوع برای همه بنویسم. یعنی امروز در مورد عامل مهمی صحبت خواهیم کرد.

به نظر شما چرا یک وب سایت باید سریع بارگذاری شود؟ بیایید منطقی فکر کنیم. ما برای مردم می نویسیم، مردم باید پست های ما را بخوانند و دانش کسب کنند. وب سایت یا وبلاگ ما بستری برای ارسال دانش است! دسترسی به آنها باید باز و سریع باشد. اگر سایت شما در 15-20 ثانیه بارگذاری شود چه؟ آیا کاربر تصمیم می گیرد که روی آن بماند؟ پاسخ روشن است - نه!

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

همانطور که قبلاً گفتم: باید در زمان صرفه جویی کنید. در یک جهت جریان دارد و قابل بازگشت نیست! شما می توانید پول خود را پس بگیرید یا هر چیز دیگری، اما زمانی وجود ندارد! من در مورد چه چیزی صحبت می کنم؟ و به این واقعیت که باید هم به وقت خود و هم به وقت دیگران احترام بگذارید! شما فقط باید چند مرحله اساسی را انجام دهید و وب سایت / وبلاگ شما بسیار سریعتر باز می شود و با این کار بیش از یک بازدید کننده دریافت خواهید کرد.

سرعت بارگذاری وب سایت - عامل مهمهنگام راه اندازی سایت ما باید به هر طریق ممکن سعی کنیم زمان انتظار بازدیدکنندگان را کاهش دهیم. به همین ترتیب، موتورهای جستجو به سرعت "نگاه می کنند" و اگر کم باشد (بارگذاری سایت زمان زیادی می برد) احترام کمتری وجود دارد. و اگر احترام کمتری وجود داشته باشد، از TOP دور خواهید بود.

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

بررسی سرعت بارگذاری سایت

1) Page Speed ​​​​Online - یک سرویس آنلاین بررسی سرعت سایت از Google. این سرویس علاوه بر بررسی سرعت، لیستی از توصیه‌ها را برای افزایش سرعت و بهینه‌سازی سایت ارائه می‌دهد. یک چیز بسیار مفید!

2) ابزار Pingdom - سرویس آنلاینبررسی سرعت، که شایسته کمان کم است. اولین باری که تصمیم گرفتم سرعت وبلاگم را تست کنم، از آن استفاده کردم. همچنین توصیه ها و توصیه های مختلفی می کند.

3) سومین سرویسی است که به نظر من شایسته توجه است. در اینجا، سرعت متوسط ​​با ایجاد پرس و جو تعیین می شود.

4) WebWait - به ظاهر ساده، اما بسیار خدمات راحت. آدرس سایت خود را در یک پنجره خاص وارد کنید، کمی صبر کنید و نتیجه شما آماده است. به نظر من این سرویس دقیق ترین زمان را تعیین می کند.

اینها خدماتی است که برای بررسی سرعت بارگذاری سایت به شما پیشنهاد می کنم. آیا سایت خود را بررسی کرده اید؟ اکنون زمان آن است که به موضوع اصلی بروید - شتاب وب سایت.

چگونه سرعت بارگذاری وب سایت را افزایش دهیم؟

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

بله، البته، به این دلیل است، اما نه تنها. سرعت نیز تحت تأثیر قرار می گیرد کدهای مختلف، اسکریپت ها، کش و موارد مشابه. بنابراین، لازم است همه اینها را به بهترین شکل ممکن بهینه کنید؛ همه چیز باید حرفه ای باشد. چطور است؟ - تو پرسیدی. ساده است، حالا من به شما آموزش می دهم!

1. بهینه سازی تصویر

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

یعنی باید اندازه و وزن تصویر را تغییر دهید. اگر به تصویری با ابعاد 300×225 در وب سایت خود نیاز دارید، اما تصویر شما 600×450 است، آن را با استفاده از هر یک تغییر دهید. ویرایشگر گرافیکی، مثلا فتوشاپ ().

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

شما همچنین باید ابعاد را در کد تصویر مشخص کنید، حتی اگر همانطور که هست (in اندازه استاندارد)، لازم است.

2. بهینه سازی اسکریپت ها و کدها

همانطور که قبلاً گفتم، سرعت تحت تأثیر اسکریپت ها و کدهای مختلف قرار می گیرد. اما نه همه، بلکه فقط آنهایی که با خطا یا حتی اشتباه نوشته شده اند.

من در زمینه برنامه نویسی وب استاد نیستم، بنابراین متأسفانه نمی توانم به شما در مورد کارهایی که باید از A تا Z انجام دهید توصیه کنم. اما من می توانم نکاتی را که خودم استفاده کرده ام و استفاده می کنم ارائه دهم.

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

می توانید CSS را با پیوند کوتاه کرده و کوتاه کنید جاوا اسکریپتاینجا . فقط لینک ها را دنبال کنید، مسیر فایل های خود را مشخص کنید، سپس روی دکمه خاصی کلیک کنید، فایل به دست آمده را در رایانه خود ذخیره کنید و آن را برای مثال از طریق ftp در سایت آپلود کنید.

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

3. فشرده سازی صفحه Gzip را فعال کنید

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

برای فعال کردن فشرده سازی Gzip، باید موارد زیر را در فایل htaccess. بنویسید:

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0 no-gzip BrowserMatch bMSIE !no-gzip!gzip-only-text/html mod_gzip_on بله mod_gzip_item_include file \.js$ mod_gzip_item_include file \.css$

یک بار دیگر تکرار می کنم، بعد از فعال کردن فشرده سازی gzip، سرعت به طور قابل توجهی افزایش می یابد! بنابراین، نباید از این نکته بگذرید.

4. کش مرورگر

بسیاری از شما می دانید کش مرورگر چیست. و برای کسانی که نمی دانند، اجازه دهید توضیح دهم - این چیزی در حافظه موقت است که در آن تمام اقداماتی که در مرورگر انجام داده اید ذخیره می شود.

بنابراین می توان از کش برای افزایش سرعت سایت استفاده کرد. یعنی برای کسی که قبلاً یک بار از سایت شما بازدید کرده است، سرعت بالاتر خواهد بود. همه چیز "پرواز خواهد کرد". اما برای کسانی که برای اولین بار وارد سیستم شده اند، این روش کار نخواهد کرد. و وقتی دوباره وارد سیستم شود، همه چیز شروع به کار می کند.

برای شروع کار، باید موارد زیر را در htaccess وارد کنید:

ExpiresActive در ExpiresByType برنامه/جاوا اسکریپت "دسترسی به اضافه 1 سال" ExpiresByType متن/جاوا اسکریپت "دسترسی به اضافه 1 سال" ExpiresByType متن/css "دسترسی به اضافه 1 سال" ExpiresByType تصویر/گیف "دسترسی به اضافه 1 سال" ExpiresByType image/jpegy year" ExpiresByType image/png "دسترسی به اضافه 1 سال" مجموعه سرصفحه Cache-control: private مجموعه هدر Cache-control: public BrowserMatch "MSIE" force-no-vary BrowserMatch "Mozilla/4.(2)" force-no-vary

همه چیز آنقدرها هم که به نظر می رسد سخت نیست. مگه نه؟ با این کار می خواستم بگویم که ما اکنون می دانیم که چگونه سرعت بارگذاری یک وب سایت را بررسی و سرعت بخشیم روسیه، منطقه تومسک، تومسک، +7 952 160 36 17

سلام بچه ها!

امروز یکی از مهمترین موضوعاتکه در بهینه سازی داخلیسایت. مواد بزرگ، اما کاربردی و مفید است. لحظات سخت را با درس های ویدیویی حمایت کردم.

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

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

قبل از افزایش سرعت سایت می خواهم چند کلمه در مورد اهمیت این عمل و راه های بررسی سرعت بارگذاری بگویم.

مدتهاست که مشخص شده است که سرعت بارگذاری منابع یکی از عوامل رتبه بندی در نتایج جستجو است. اگر کاملاً 2 صفحه یکسان بگیرید، اما یکی سریعتر بارگیری شود، در نتایج جستجو موقعیت های بالاتری خواهد داشت. اما این بدان معنا نیست که اولی در موقعیت 30 و دومی در موقعیت 1 قرار خواهد گرفت. نه، فقط یک سایت بارگذاری سریعتر رتبه کمی بهتر خواهد داشت.

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

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

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

من فقط سرعت بارگذاری یکی از مقالاتم را بررسی کردم. بر اساس نتایج 5 بررسی، میانگین نتیجه 0.82 ثانیه را دریافت کردم.

البته، دستیابی به مقدار کمی دشوار است و این به عوامل زیادی بستگی دارد:

• مقدار محتوا در صفحه؛
• تعداد اسکریپت های بارگذاری شده؛
• اندازه گرافیک در صفحه و در کل سایت؛
• تعداد پلاگین ها

بنابراین، باید سعی کنید تأثیر همه این عوامل را کاهش دهید. این همان چیزی است که در ادامه شروع به صحبت در مورد آن می کنیم. بیایید به سراغ اولین و شاید ساده ترین روش برویم.

بهینه سازی گرافیک

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

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

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

هنگام انتشار مطالب به این نکته توجه کنید. من یک بار بدون افت کیفیت مقاله ای در مورد آن نوشتم. مطالب برای شما بسیار مفید خواهد بود.

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

زمان بارگذاری را کاهش می دهد؛

راحتی مصرف محتوا را افزایش می دهد.

اگر نمی توانید بدون تصاویر رنگارنگ زندگی کنید، مقاله ای در مورد کاهش اندازه تصاویر (لینک بالا) می تواند کمک کند.

ذخیره سازی

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

برای انجام کش در یک وب سایت (برای وردپرس)، باید افزونه Hyper Cache را نصب کنید. دستورالعمل کاملادامه مطلب آنجا همه چیز را جویدم.

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

من از آنها استفاده نمی کنم. کش کردن با استفاده از افزونه Hyper Cache بیش از حد کافی است.

بهینه سازی بارگذاری اسکریپت

اگر سایت شما کاملاً کاربردی است (دکمه های اجتماعی مختلف، اسلایدرها، شمارنده های ترافیک و غیره)، پس دارای اسکریپت های زیادی است.

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

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

همچنین می توانید اسکریپت ها را در آن قرار دهید فایل جداگانه، در فایل footer.php نیست. و سپس این فایل را در انتهای فایل زیرزمین بارگذاری کنید. این بهترین راه برای بارگذاری اسکریپت ها در سایت است.

من در عمل به شما نشان خواهم داد که چگونه همه این کارها را انجام دهید. من با یک فیلم آموزشی شروع می کنم.

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

من قسمتی را که به آن نیاز داریم با یک قاب قرمز برجسته کرده ام. همانطور که مشاهده می کنید در تگ های باز و پایانی اسکریپت قرار دارد که با کادرهای آبی رنگ مشخص شده اند. من تگ بسته شدن را با یک قاب سیاه برجسته کردم تا نشان دهم خود اسکریپت در کجا قرار دارد.

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

حالا بیایید پس انداز کنیم این فایلبا فرمت js و آن را یک نام مناسب صدا کنید. من آن را "footer-scripts.js" می نامم تا به وضوح بفهمم که این یک فایل اسکریپت است که در پاورقی سایت نمایش داده می شود.

حالا می توانید این فایل را در سایت آپلود کنید تا اسکریپت ها کار کنند. برای این کار باید یک خط کد قرار دهید که مسیر این فایل را مشخص می کند. قبل از تگ بسته شدن باید کد را در فایل footer.php قرار دهید.

این خط کد من است.

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

مسیر فایل در این خط برای سایت های وردپرسی مناسب است. اگر وب سایتی با موتور متفاوت یا فقط یک صفحه HTML دارید، باید مسیر را متناسب با شما تغییر دهید.

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

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

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

اگر نیاز دارید که نه یک اسکریپت، بلکه چندین اسکریپت را در یک فایل قرار دهید، به سادگی آن را به سمت پایین فرو رفته و قرار دهید کد جدید. اما بهتر است هر اسکریپت را امضا کنید تا بعداً گیج نشوید. برای مثال می توانید فایل من را دانلود کنید تا به آن مراجعه کنید.

و یک نکته دیگر همه اسکریپت ها در فوتر سایت کار نمی کنند. برخی فقط زمانی کار می کنند که در هدر، یعنی در فایل Header.php بین تگ ها قرار گیرند. مثلا، دکمه اجتماعی"من دوست دارم" از Vkontakte در زیرزمین کار نمی کند اگر کد آن را از آن بگیرید شبکه اجتماعی. در این مورد، باید اسکریپت را در هدر قرار دهید.

خلاص شدن از درخواست های غیر ضروریدر کد قالب

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

ما به فایل header.php و هر چیزی که بین تگ ها داخل آن است نیاز داریم. کدهای پی اچ پی که درخواست تولید می کنند و اطلاعات اولیه را نمایش می دهند بین این تگ ها ذخیره می شوند. با کمک آموزش تصویری که در زیر آماده کرده ام، درک کل موضوع آسان تر خواهد بود.

حالا نسخه متنی.

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

همانطور که می بینید، این کد PHP است. اگر به کد منبع (ctrl+u) هر صفحه در سایت نگاه کنیم، می بینیم که این کد PHP دیگر وجود ندارد، اما کد HTML با کدگذاری مشخص شده وجود خواهد داشت.

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

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

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

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

غیرفعال کردن بازبینی ها

با آموزش تصویری دوباره شما را عذاب می دهم.

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

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

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

در ریشه موتور یک پوشه WP-includes وجود دارد که حاوی فایل default-constants.php است. باید آن را باز کنید و محتوای زیر را در آن پیدا کنید.

if (!defined("AUTOSAVE_INTERVAL")) define("AUTOSAVE_INTERVAL", 60); /** * @since 2.9.0 */if (!defined("EMPTY_TRASH_DAYS")) define("EMPTY_TRASH_DAYS"، 30); if (!defined("WP_POST_REVISIONS")) define("WP_POST_REVISIONS"، true);

define ("AUTOSAVE_INTERVAL" , 60 ) ; * @از 2.9.0 define ("EMPTY_TRASH_DAYS" , 30 ) ; if (! تعریف شده است ("WP_POST_REVISIONS" ) ) define ("WP_POST_REVISIONS" , true ) ;

در زمان نوشتن این مقاله، همه اینها از خط 277 شروع می شود. همه این کدها مسئول ایمنی سوابق ما هستند. از 3 قسمت تشکیل شده است که هر کدام با if شروع می شود.

قسمت اول مسئول فاصله برای است ایجاد خودکارتجدید نظرها مقدار پیش فرض 60 ثانیه است، به این معنی که هر دقیقه یک کپی از ضبط ایجاد می شود. تصور کنید که بیش از یک ساعت برای نوشتن یک مقاله وقت می گذارید. می توان ارزش داده شدهبه عنوان مثال به 10-20 دقیقه افزایش دهید. این تنظیمفقط زمانی کار می کند که ویرایش ها فعال باشند.

if (!defined("AUTOSAVE_INTERVAL")) define("AUTOSAVE_INTERVAL", 600);

if (! تعریف شده است ("AUTOSAVE_INTERVAL" ) ) define ("AUTOSAVE_INTERVAL" , 600 ) ;

مقدار در ثانیه تنظیم می شود.

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

if (!defined("EMPTY_TRASH_DAYS")) define("EMPTY_TRASH_DAYS"، 0);

if (! تعریف شده ("EMPTY_TRASH_DAYS" ) ) define ("EMPTY_TRASH_DAYS" , 0 ) ;

بخش سوم مسئولیت کار حسابرسی را بر عهده دارد. آنها به طور پیش فرض فعال هستند. اگر می خواهید آن را غیرفعال کنید، باید مقدار واقعی را به false یا 0 تنظیم کنید.

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

امروز می خواهم سعی کنم همه چیزهایی را که قبلاً در مورد بهینه سازی سرعت نوشته ام را سیستماتیک کنم و همچنین نکات قابل توجهی را اضافه کنم که با استفاده از فشرده سازی استاتیک Gzip به جای پویا ، کمی بار روی سرور میزبان را کاهش می دهد.

چگونه سرعت بارگذاری وب سایت را به سرعت افزایش دهیم

وقتی برای اولین بار صفحه سرعت را برای صفحه اصلی وبلاگم راه اندازی کردم، این تصویر غم انگیز را دیدم:

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

اما علاوه بر Page Speed، می توانید به وضوح سرعت بارگذاری یک سایت را ارزیابی کنید و تمام آبجکت های بارگذاری شده در Pingdom و موارد مشابه را مشاهده کنید.

در ابتدا، تقریبا 90 شی (ccs، js، تصاویر) بارگذاری شد و هر یک از آنها نیاز به یک درخواست http جداگانه داشتند. اما با تجزیه و تحلیل تمام اشیاء بارگیری شده با استفاده از خدمات آنلاین فوق و همچنین پیروی از توصیه های Page Speed ​​، موفق شدم تعداد آنها را به سه دوجین کاهش دهم که نمی تواند بر سرعت کلی تأثیر بگذارد:

خوب، حالا بیایید همه روش ها را به ترتیب به خاطر بسپاریم. و احتمالاً بهینه‌سازی باید به ترتیبی شروع شود که مناطق مشکل‌دار در پنجره سرعت صفحه نمایش داده می‌شوند، زیرا اینها مؤثرترین و کم‌مشکل‌ترین مراحل برای پیاده‌سازی خواهند بود - چیزی که "ارزان و شاد" نامیده می‌شود.

به همین دلیل اولین کار (ccs, js, images) را در مرورگرهای بازدیدکنندگان (یعنی شما خوانندگان عزیز) انجام دادم.

بله، بله، با کمک تنظیمات وبسرور، شما می توانید رفتار مرورگر بازدیدکنندگان را کنترل کنید. در این حالت، اولی به دومی می گوید که در طی آن اشیاء ثابت باید در حافظه پنهان ذخیره شوند تا دوباره آنها را از سرور درخواست نکند.

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

متأسفانه، روش‌های کنترلی که من از طریق .htaccess توضیح دادم، همیشه کار نمی‌کنند دلایل مختلف(عدم وجود ماژول لازم و غیره)، بنابراین می توانید در مورد این موضوع با میزبان خود تماس بگیرید، زیرا او نیز به این موضوع علاقه مند خواهد شد، زیرا تنظیمات کش بهینه در مرورگرهای کاربر باعث کاهش بار روی منبع شما در میزبانی آن می شود.

گام موثر بعدی برای بهبود سرعت بارگذاری می‌تواند ترکیب فایل‌های سبک CSS یا اسکریپت‌های JS باشد. در مورد و که من فهمیدم بخوانید.

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

اما علاوه بر ترکیب سبک‌ها و اسکریپت‌های CSS خارجی (این کار برای کاهش انجام می‌شود تعداد کلاشیاء دانلود شده، که تعداد درخواست‌های http به سرور را کاهش می‌دهند)، همین فایل‌های سبک و اسکریپت را می‌توان به طور موثری با استفاده از Gzip فشرده کرد (در واقع، این همان Zip است که شما به طور فعال در رایانه خود استفاده می‌کنید).

می‌توانید فایل‌های CSS و Js را چندین بار با استفاده از Gzip فشرده کنید، اما می‌توانید با بهینه‌سازی کد آن‌ها، حجم این فایل‌ها را حتی بیشتر کاهش دهید.

بنابراین، شما باید تمام فایل‌های Css و Js خارجی که در بارگذاری صفحات دخیل هستند را در رایانه خود بارگیری کنید (بعد از اینکه آنها را ترکیب کردید، کار دشواری نخواهد بود) و از هر یک از آنها یکی ایجاد کنید. کپی آرشیویبا پسوند .gz. شما می توانید این کار را با استفاده از برنامه رایگان 7zip. در ادامه با یک مثال به شما نشان می دهم، زیرا در اینجا نظریه پردازی بی فایده است.

بیایید فایل سبک اصلی وبلاگ من، style.css را به عنوان مثال در نظر بگیریم. بعد از اینکه با استفاده از برنامه 7zip Gzip کردم، یک آرشیو style.css.gz خواهم داشت.

اما چون برخی از مرورگرها نمی خواهند یک فایل سبک با پسوند .gz اضافه کنند، سپس پایان .gz را از آن حذف می کنیم و دوباره به style.css پایان می دهیم، اما در واقع یک آرشیو است (هنوز اشتباه نشده است؟).

اما به سادگی جایگزین کردن فایل style.css اصلی روی سرور (هنوز در Gzip فشرده نشده است) با آرشیوی که به تازگی ایجاد کردیم، اما هنوز style.css نام دارد، کافی نخواهد بود.

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

اما ما باید آن را متفاوت از style.css بنامیم. برای انجام این کار، می توانید نام آن را به عنوان مثال به این صورت تغییر دهید: style.nogzip.css. اکنون در سرور در پوشه با موضوع وردپرس دو فایل استایل دارم:

style.css - بایگانی با پسوند .gz قطع شده است

style.nogzip.css یک فایل سبک غیر فشرده معمولی است که باید برای مرورگرهایی که از فشرده سازی پشتیبانی نمی کنند ارائه شود.

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

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

RewriteEngine در RewriteCond %(HTTP:Accept-encoding) !gzip RewriteCond %(HTTP_USER_AGENT) Konqueror RewriteRule ^(.*)\.(css|js)$1.nogzip.$2 سرصفحه ضمیمه Vary User-Condingtent gzip Header set Cache-control: private Header unset Content-Encoding

اگر در حال تغییر نام هستید فایل های اصلیسبک ها و اسکریپت ها از نام هایی غیر از style.nogzip.css استفاده می کردند، سپس در خط کد مربوطه باید ماسک $1.nogzip.$2 را با ماسک خود جایگزین کنید. به طور کلی، این همه است.

اکنون سرور هر بار Css و Js را فشرده نمی‌کند، بلکه فوراً نسخه‌ای را که از قبل فشرده کرده‌اید برای مرورگرها ارسال می‌کند و در مورد مرورگری که Gzip را نمی‌فهمد، نسخه اصلی یک فایل مانند style.nogzip را ارسال می‌کند. css.

افزایش جزئی در سرعت بارگذاری سایت و کاهش بار روی منبع شما در هاست وجود خواهد داشت. اما یکی دو روز بعد یک خجالت داشتم. ظاهرا و منظره مدیر وردپرسبه طور چشمگیری تغییر کرد - سبک از بین رفت.

اما با انجام دستکاری هایی که در بالا توضیح داده شد با فایل سبک استفاده شده در پنل مدیریت، مشکل به سرعت حل شد. در مورد من، رنگها-classic.css از پوشه بود:

/wp-admin/css

بعد، من می‌خواستم از فشرده‌سازی استاتیک Gzip برای فایل‌های Html استفاده کنم، این فایل‌ها نیز توسط سرور در حال فشرده‌سازی هستند و بار اضافی ایجاد می‌کنند. در اینجا من یک راه حل نسبتا ساده پیدا کردم که برای وردپرس اعمال شد. واقعیت این است که من استفاده کرده ام.

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

اما پس از کمی جستجو برای اطلاعات در مورد موضوع Gzip فشرده سازی HTMLدر صفحات، نظرم را در مورد این تنظیمات فشرده سازی در افزونه Hyper Cache تغییر دادم.

به نظر می‌رسد با علامت زدن این کادر «فعال کردن فشرده‌سازی»، پیش فشرده‌سازی صفحات وبلاگ ذخیره‌شده را با استفاده از الگوریتم Gzip فعال می‌کنیم.

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

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

من هنوز این مؤلفه‌ها را آزمایش نکرده‌ام، اما به محض اینکه به آن رسیدم، قطعاً در مورد آنها خواهم نوشت. در حال حاضر، من فقط پیوندهایی به این مؤلفه ها برای جوملا ارائه می دهم: jFinalizer و WEBO Site SpeedUp.

بهینه سازی گرافیک و کاهش تعداد درخواست ها

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

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

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

به طور کلی، پس از صرف نیم ساعت، توانستم تصاویر PNG را به طور متوسط ​​حدود 7 درصد و 5 درصد فشرده سازی کنم.

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

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

اما سهم اصلی درخواست ها همیشه به بارگذاری گرافیک می رسد. میتونه باشه تصاویر پس زمینه، که در فایل استایل یا تصاویری که مستقیماً در کد Html صفحه مشخص شده اند ذکر شده است.

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

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

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

شما می توانید این را در وردپرس با استفاده از افزونه معجزه Really Static پیاده سازی کنید. درست است، نسخه او هنوز به سطح یک نرسیده است، اما بررسی های کار او بسیار مثبت است. در واقع، این یک آنالوگ کامل از اسکریپت معروف Maxsite Cache است که به عنوان مثال، میخائیل شاکین در وبلاگ خود از آن استفاده می کند.

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

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

موفق باشی! به زودی شما را در صفحات سایت وبلاگ می بینیم

با رفتن به ");"> می توانید ویدیوهای بیشتری را تماشا کنید

ممکن است علاقه مند باشید

فشرده سازی Gzip برای سرعت بخشیدن به بارگذاری سایت - نحوه فعال کردن آن برای Js، Html و Css با استفاده از فایل htaccess.
ایجاد جن CSS V ژنراتور آنلاین Sprites Me برای کاهش تعداد درخواست ها به سرور
اندازه گیری و افزایش سرعت سایت در GTmetrix و همچنین راه اندازی بارگذاری کتابخانه jQuery از Google CDN
چگونه یک وب سایت سریع داشته باشیم - بهینه سازی (فشرده سازی) تصاویر و اسکریپت ها و همچنین کاهش تعداد درخواست های Http
بهینه سازی و فشرده سازی CSS در سرعت صفحه - نحوه غیرفعال کردن فایل های خارجیاستایل ها را با هم ترکیب کنید تا سرعت بارگذاری را افزایش دهید

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

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

در این مقاله و چک لیست سعی می کنم به یک CMS خاص گره نخورم، بلکه طوری بنویسم که راه حل ها برای هر سایتی مناسب باشد.

توجه شما را جلب می کنم: اگر سایت خود را فقط در سرویس Google PageSpeed ​​Insights بررسی کنید، در فرآیند مطالعه چک لیست متوجه خواهید شد که تعداد زیادی از پارامترها در آنجا پنهان شده اند و علیرغم وجود واقعیت این است که آنها همچنان بر سرعت بارگذاری سایت تأثیر می گذارند.

مرحله 1. "چارچوب" را برای بهینه سازی سرعت سایت تعریف کنید

منظور من از "Site Speed ​​Optimization Framework" مقدار CSS، JS، رسانه و سایر فایل هایی است که در سایت شما بارگذاری می شود.

پس از تعریف "چارچوب"، آخرین موردی که باید به آن برویم را خواهیم دانست. و سرویس ایجاد شده توسط جاناتان فیلدینگ به ما کمک می کند داده ها را پیدا کنیم - www.performancebudget.io.

نگاه کن ویدیوی کوتاهدر کار با این سایت، جایی که من به وضوح نشان دادم که برای تعیین "چارچوب بهینه سازی سرعت سایت" چه چیزی را باید انتخاب کنید:

مرحله 2. پیدا کنید سرعت واقعیسایت

همانطور که در بالا نوشتم، Google PageSpeed ​​Insights است ابزار خوببرای بررسی بهینه سازی سرعت سایت، اما هنوز هم فقط توصیه های سطحی می دهد. می‌توانید ابتدا با این ابزار بررسی کنید و سپس به سراغ آمارهای دقیق‌تر ارائه‌شده توسط خدمات زیر بروید:

• WebPagetest
• GTmetrix

هنگام تست استفاده از این سرویس ها مراقب باشید، زیرا ممکن است زمان بارگذاری متفاوت باشد زیرا سرور سایت شما و سروری که تست روی آن اجرا می شود از یکدیگر دور هستند.

سرویس WebPagetest به شما امکان می دهد سرور و مرورگر آزمایشی را انتخاب کنید. این سرویسدر قالب نمودار نشان می دهد که کدام منابع (CSS، JS) به عنوان درصد در سایت شما فراوان هستند. چیزی که من را بیشتر خوشحال می کند این است آمار دقیقدر صورت درخواست در قالب نمودار. همچنین اطلاعاتی در مورد اینکه فشرده سازی GZIP روی کدام فایل ها اعمال می شود وجود دارد و بلافاصله مشخص می شود که آیا همه چیز به درستی در تنظیمات htaccess. مشخص شده است یا خیر.

اما سرویس GTmetrix به شما امکان می دهد تا برنامه دانلود فایل را مشاهده کنید و علاوه بر این، همه چیز نکات دقیقی را برای بهینه سازی هر تفاوت ظریف در سایت نشان می دهد. و در اینجا همه چیز به نقاط بهینه سازی دقیق تر تقسیم می شود.

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

و فقط اکنون می توانید از چک لیست زیر نهایت استفاده را ببرید. من در این چک لیست فقط آن دسته از روش های بهینه سازی را در نظر می گیرم که از نظر پولی نیاز به سرمایه گذاری اضافی از شما ندارند، بلکه تنها نیاز به میل و کمی پشتکار برای گذراندن و بهینه سازی هر مورد دارند.

(چک لیست) خود بهینه سازیسرعت سایت 1. بهینه سازی تصویر

از تصاویری با وضوح دقیق مورد نیاز در صفحه استفاده کنید.

اغلب موقعیت هایی وجود دارد که از تصاویر با وضوح بالا استفاده می شود (مثلاً 800x600px)، اما فقط از یک تصویر کوچک در صفحه استفاده می شود (مثلاً 300x225px). به خصوص رایج است این خطاهنگام ایجاد گالری فقط از وضوح تصویری که در موقعیت خاص خود لازم است استفاده کنید.

تمام نمادها (اگر SVG، سپس در یک SVG sprite) در یک تصویر (اسپرایت) ترکیب کنید.

این باعث کاهش تعداد درخواست ها به سرور می شود. اکنون راه حل های آنلاین وجود دارد: css.spritegen.com، iconizr. راه‌حل‌هایی برای سازندگان نیز وجود دارد (برای Gulp - gulp-svg-sprites، برای Grunt - grunt-svg-sprite، برای Webpack - Webpack SVG sprite loader).

بهینه سازی تصاویر: PNG، JPG، SVG.

راه حل های آنلاین در اینجا وجود دارد: TinyPNG، Kraken.io. راه حل های خودکار برای کلکسیونرها نیز چنین هستند: Gulp - gulp-imagemin، gulp-pngquant. غرغر - grunt-contrib-imagemin; Webpack - افزونه imagemin-webpack.

به تعویق انداختن تصاویر بدون بارگذاری تنبل یا jQuery - https://varvy.com/pagespeed/defer-images.html

2. تعداد درخواست ها را کاهش دهید

از SVG sprites و PNG sprites استفاده کنید.

من در مورد این در بلوک "بهینه سازی تصویر" که در بالا قرار دارد نوشتم.

همه چیز را با هم ترکیب کنید فایل های CSSبه یکی.

همانطور که قبلاً گفتم، این باعث کاهش تعداد درخواست ها به سرور می شود. پلاگین برای سازندگان (برای Gulp - gulp-concat-css، برای Grunt - grunt-concat-css، برای Webpack - css-concat-loader).

در صورت امکان تمام فایل های JS را در یک فایل ترکیب کنید.

پلاگین برای سازندگان (برای Gulp - gulp-concat-js، برای Grunt - grunt-contrib-concat، برای Webpack - webpack-uglify-js-plugin).

تا حد امکان تعداد پرس و جوهای پایگاه داده را کاهش دهید.

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

3. CSS و JS را بهینه کنید

ما تمام فایل های CSS را فشرده می کنیم.

راه حل های آنلاین: کمپرسور CSS، CSS Minifier gulp-clean-css. Grunt - grunt-contrib-cssmin; Webpack - clean-css-loader.

ما تمام فایل های JS را فشرده می کنیم.

خدمات آنلاین: JavaScript Compression Tool، JS Minifier. پلاگین برای سازندگان: Gulp - gulp-uglify; Grunt - grunt-contrib-compress ; Webpack - افزونه فهرست شده در پاراگراف قبلی JS را نیز فشرده می کند.