ابزار تست سرعت پينگدام : راهنماي نهايي براي ۲۰۱۹
ابزار تست سرعت پينگدام: راهنماي نهايي براي ۲۰۱۹
امروز ميخواهيم به Ù†Øوه استÙاده Ùˆ درك بهتر داده از ابزار تست سرعت سايت Ù…Øبوب پينگدام بپردازيم. ميتوانيد با استÙاده از ابزار تست سرعت پينگدام كاري را براي سايت وردپرس خود انجام دهيد كه ما تØليل آبشاري ميناميم. اين ميتواند به شما كمك كند كه به سرعت مشكلات عملكردي را بشناسيد Ùˆ همچنين شناسايي هيچ مشكلي از قلم نياÙتد.
بسياري اوقات ميبينيم كه كاربران دادههاي ابزار تست سرعت پينگدام را اشتباه تÙسير ميكنند Ùˆ اين گاهي منجر ميشود كه وبسايت را به Øالتي Øتي بدتر از Øالت قبلي تنظيم كنند. به ياد داشته باشيد كه ابزارهايي مانند اين تنها قرار است به عنوان راهنما مورد استÙاده قرار بگيرند Ùˆ Û±Û°Û° درصد دقيق نيستند. موضوع مهم اين است كه تداوم داشته باشيد Ùˆ در تمام تستهاي خود، از يك ابزار مشابه استÙاده كنيد.
پينگدام
پينگدام شركتي است كه خارج از سوئد تاسيس شده (Øال مالكيت آن با SolarWinds است) كه طيÙÙŠ از خدمات را ارائه ميدهد. خدماتي مانند نظارت سايت در زمان Ùعاليت آن، نظارت سرعت صÙØه، نظارت تراكنشها، نظارت بر سرورها Ùˆ تØليل بازديدكنندگان (نظارت آني كاربر). اØتمالا يكي از چيزهايي كه آنها بهخاطرش خوب شناخته ميشوند، ابزار تست سرعت رايگان سايتشان است كه به عنوان يكي از Ù…Øبوبترين ابزار تست عملكرد در جامعه وردپرس شناخته ميشود.
چرا اينقدر Ù…Øبوب است؟ يكي از دلايل اين است كه اØتمالا از Ù„Øاظ استÙاده، سادهترين ابزار تست سرعت است! هر كسي در زمينه عملكرد وب متخصص نيست Ùˆ به همين جهت براي كاربر عادي وردپرس، بعضي از ديگر ابزاري كه وجود دارند ممكن است بسيار گيج كننده باشند. بعضي وقتها هر Ú†Ù‡ سادگي بيشتر باشد بهتر است. به هرØال براي شما دو چيز اهميت دارد: سايت شما چهقدر سريع است Ùˆ چطور ميتوانيد آن را سريعتر كنيد.
پينگدام در Øال Øاضر اين امكان را به شما ميدهد كه سرعت هر سايتي را از Û· Ù…ØÙ„ مختل٠(Ûµ قاره) تست كنيد.
اين Ù…Øلها به طور استراتژيك در دنيا پخش شدهاند:
- آسيا- ژاپن- توكيو
- اروپا- آلمان- ÙرانكÙورت
- اروپا- بريتانيا- لندن
- آمريكاي شمالي- ايالات متØده آمريكا- واشنگتن دي. سي.
- آمريكاي شمالي- ايالات متØده آمريكا- سن Ùرانسيسكو
- اقيانوسيه- استراليا- سيدني
- آمريكاي جنوبي- برزيل- سائوپائولو
نكته: متوجه شدهايم كه بعضي اوقات تمام Ù…Øلهاي تست در دسترس نيستند. اين به اØتمال زياد به اين دليل است كه يا به دليل نگهداري در دسترس نبوده يا به دليل Øجم بالاي تلاشها جهت اجراي تست، بيش از Øد شلوغ شده است. اگر يك Ù…ØÙ„ تست كه قبلا از آن استÙاده ميكرديد، ديگر در دسترس نيست، يك يا دو ساعت بعد دوباره Ú†Ùƒ كنيد. به اØتمال زياد دوباره در دسترس قرار ميگيرد.
Ù…ØÙ„ تستي كه انتخاب ميكنيد در واقع بسيار مهم است زيرا به Ù…ØÙ„ Ùيزيكي كه سايت شما واقعا در آن هاست شده ارتباط دارد. در اينجا موضوع كوچكي به نام تاخير شبكه Ù…Ø·Ø±Ø Ù…ÙŠØ´ÙˆØ¯. اما در ادامه بيشتر به جزئيات اين موضوع خواهيم پرداخت.
تØليل آبشاري با ابزار تست سرعت پينگدام
يك صÙØÙ‡ وبي از داراييهاي مختلÙÙŠ مانند HTMLØŒ جاوا اسكريپت، CSSØŒ عكسها Ùˆ ويدئوها تشكيل شده است. تمام اينها درخواستهايي ايجاد ميكنند تا شما چيزي را كه در وبسايت ميبينيد، ببينيد. به طور معمول هر Ú†Ù‡ درخواستهاي بيشتري داشته باشيد، سايت شما كندتر بارگذاري ميشود. اين موضوع هميشه درست نيست، اما در اكثر مواقع صØت دارد.
در ادامه بخشهاي مختل٠پينگدام را دستهبندي كردهايم Ùˆ معناي اطلاعات را در ارتباط با عملكرد كلي سايت Ùˆ Ù†Øوه اجراي تØليل آبشاري، با جزئيات بيشتري Ø´Ø±Ø Ù…ÙŠØ¯Ù‡ÙŠÙ….
خلاصهاي از پينگدام
وقتي سايت وردپرس خود را از طرييق پينگدام اجرا ميكنيد، يك نمره عملكرد، يك زمان كل بارگذاري، اندازه صÙØÙ‡ كل Ùˆ تعداد درخواستهاي شما در سايت را تعيين ميكند. ما در مثال خود از perfmatters.io استÙاده ميكنيم كه يك سايت تجارت الكترونيك است كه دانلودهاي آسان ديجيتال را اجرا ميكند (EDD) .
همانطور كه ميبينيد ما تست اول خود را اجرا كرديم Ùˆ در پينگدام نمره Û¸Û¸ از Û±Û°Û° را به دست آورديم در Øالي كه زمان كل بارگذاري ÛµÛ´Û± ms بود. اين به ما اندازه كل داراييهاي تركيبي Ùˆ تعداد درخواستها را ميدهد.
-تست سرعت پينگدام پيش از DNS و كشينگ
سپس يك تست اضاÙÙ‡ اجرا كرديم Ùˆ اين بار زمان كل بارگذاري سايت با همان تعداد اندازه صÙØÙ‡ Ùˆ تعداد درخواست Û³Û¹Û² ms بود. موضوع چيست؟ اگر چند بار در پينگدام سايت خود را تست كنيد، متوجه اين مسئله ميشويد. سايتهاي بزرگتر Øتي اختلاÙهاي بيشتري را تجربه ميكنند.
سه دليل اصلي براي اين امر وجود دارد: كشينگ DNSØŒ كشينگ CDN Ùˆ كشينگ وردپرس. براي همين است كه بايد چند بار تست را انجام دهيد. قطعا Ùراخوانهاي خارجي به منابع ثالث Ùˆ API ها بر اين تست تاثير ميگذارند. دلايل بيشتر اين امر را در تØليل آبشاري ما بخوانيد.
-تست سرعت پينگدام پس از DNS
آيا ميخواهيد يك نمره پينگدام بهتر از وبسايت وردپرس خود به دست بياوريد؟ بسته به سايت و پيكربندي شما، ممكن است كسب نمره بينقص ۱۰۰ از ۱۰۰ هميشه ممكن نباشد، به خصوص براي آنهايي كه سايتهاي تجارت الكترونيك يا پيكسلهاي بازاريابي دارند. اما تنها اختصاص دادن زماني براي بهبود نمره، نقطه شروع خوبي است. چيزي كه واقعا مهم است، سرعت كلي است.
بعضي اوقات تجربه كاربري ممكن است بعضي Øيلههاي عملكرد وبي كه در وب ميخوانيد را از بين ببرد. شما نميتوانيد تجربه كاربري را Ùراموش كنيد! اما خيالتان راØت باشد. ما در ادامه نكاتي را با شما به اشتراك ميگذاريم كه با استÙاده از آنها سايت مذكور در مثال را به جايي كه الان در آن هست، رسانديم. پس به خواندن ادامه دهيد.
بهبود عملكرد صÙØÙ‡
بخش تØليل عملكرد كه Øالا «Ø¨Ù‡Ø¨ÙˆØ¯ عملكرد صÙØÙ‡» نام دارد، در سال Û²Û°Û±Û¸ بهروز رساني شد Ùˆ آنها برخي موارد قديمي را ØØ°Ù Ùˆ موارد جديدي اضاÙÙ‡ كردند. اين موضوع اØتمالا به دليل گزارشهايي مبني بر مرتبط نبودن آن موارد است. وقتي صØبت از بهينهسازي عملكرد وب ميشود، هميشه همه چيز در Øال تغيير است Ùˆ اگر اÙراد تنها به دنبال نمره بالا در پينگدام باشند، ممكن است دچار مشكل شوند.
اما ما تمام اين بخش را در پست خود (بعضي از قديميها Ùˆ بعضي از جديدها) ميآوريم زيرا درك Ù†Øوه Ù…Øاسبه اين نمرات امر مهمي است. اين Ù…Øاسبات اساسا بر مبناي قوانين تØليل سرعت صÙØÙ‡ Ú¯ÙˆÚ¯Ù„ هستند. به طور كلي اگر اين موارد را در سايت خود بهبود دهيد، اØتمالا در زمان كل بارگذاري خود، كاهشي را خواهيد ديد.
اينها مواردي از دستهبنديهايي هستند كه بخش بهبود عملكرد صÙØÙ‡ از آنها ساخته شده است:
- استÙاده از يك شبكه انتقال Ù…Øتوا (CDN)
- اجتناب از خطاي HTTP 404
- به Øداقل رساندن تغيير مسيرها
- تعيين تاريخ انقضا در هدرها
- Øذ٠رشته درخواستها از منابع ايستا
- استÙاده از دامنههاي بدون كوكي
- موازيسازي دانلودها بين نام هاستها
- تعيين زمان Ùايلهاي كش شده
- تعيين كاراكتر نوع Ùايل نشان داده شده
Øال بياييد به بعضي از اين موارد دقيق شويم Ùˆ ببينيم امروزه كدام يك همچنان مرتبط هستد.
استÙاده از يك شبكه انتقال Ù…Øتوا
يكي از مهمترين خدماتي كه بايد امروزه در سايت وردپرس خود اجرا كنيد يك شبكه انتقال Ù…Øتوا است. اينها شبكهاي از سرورها هستند (كه به عنوان POPs هم شناخته ميشوند) كه در سرتاسر جهان جاي گرÙتهاند. آنها طراØÙŠ شدهاند تا كپيهايي از Ù…Øتواي ايستاي (گاهي هم پويا) سايت وردپرس شما مانند عكسها، جاوا اسكريپت، CSS Ùˆ استريمهاي ويدئويي را هاست كرده Ùˆ انتقال دهند.
اگر امكانش را داريد بهتر است هاستينگ خود CDN را Ù„Øاظ كنيد. مزيتهاي CDN شامل تقويت عملكرد (TTFB Ùˆ تاخير شبكه كمتر)ØŒ پهناي باند Ùˆ هزينههاي هاستينگ كمتر Ùˆ Øتي مزيتهايي در سئو ميشوند.
مهم: ابزار جديدا بهروز شده پينگدام در Øال Øاضر باگي دارد كه هر Ùراهمكننده CDN را به دقت تشخيص ميدهد.
بعضي از Ùراهمكنندههاي CDN ثالث كه ما پيشنهاد ميكنيم شامل اين موارد ميشوند:
- KeyCDN
- Cloudflare
- StackPath
- CDN77
ما در تستهاي سرعت CDN خود، درياÙتيم كه در بعضي موارد، يك CDN ميتواند زمان بارگذاري صÙØÙ‡ را تا ÛµÛ° درصد كاهش دهد.
از خطاي (HTTP 404 (not found اجتناب كنيد
نام اين بخش قبلا «Ø§Ø² درخواستهاي بد اجتناب كنيد» بود. اين مورد هميشه مرتبط است. همانطور كه از نامش پيداست، درخواستي است كه به طور كامل اجرا نميشود. اين معمولا زماني رخ ميدهد كه به صورت دستي به يك دارايي يا عكسي ارجاع ميدهيد كه پاك شده است Ùˆ منجر به خطاي Û´Û°Û´ ميشود. اين به عنوان يك دايره نارنجي رنگ در پينگدام ظاهر شده Ùˆ استاتوس هدر Û´Û°Û´ را نمايش ميدهد.
هميشه اطمينان Øاصل كنيد كه تمام درخواستهاي سايت شما موÙقيتآميز هستند. به اين طريق مطمئن ميشويد كه هيچ درخواستي وجود ندارد كه به دارايي ميرود كه ديگر وجود ندارد.
تغيير مسيرها را به Øداقل برسانيد
تغيير مسيرهاي زياد موضوعي است كه بايد Øواستان به آن باشد. تغيير مسيرهاي سادهاي مانند تغيير مسير ۳۰۱، HTTP به HTTPSØŒ يا www به سايت بدون www (يا برعكس) مشكلي ندارند. در بعضي مواقع اين موارد در سايت شما لازم هستند. اما هر يك هزينهاي براي سايت شما به همراه دارند. Ùˆ اگر همينطور تغيير مسيرها را پشت هم بچينيد، مهم است كه بدانيد Ú†Ù‡ تاثيري بر سايت شما خواهند گذاشت. اين در تغيير مسيرهاي صÙØات Ùˆ پستها، عكسها Ùˆ همه چيز صادق است.
تغيير مسير در پينگدام به صورت يك دايره آبي نمايش داده ميشود و در استاتوس هدر، ۳۰۱ يا ۳۰۲ نوشته ميشود.
تغيير مسيرها چهقدر در سايت شما تاثير دارند؟ بياييد يك تست در آغاز انجام دهيم. ابتدا در صÙØÙ‡ تماس با ما: https://perfmatters.io/contact/ يك تست سرعت انجام ميدهيم. همانطور كه در پايين ميبينيد، زمان كل بارگذاري سايت Û´Û±Û· ms است.
سپس آدرس را تغيير كوچكي ميدهيم (http://www.perfmatters.io/contact) Ùˆ يك تست سرعت ديگر انجام ميدهيم تا تاثير تغيير مسيرهاي چندگانه را ببينيم. همانطور كه ميبينيد، Øال همان صÙØÙ‡ Û¶Û¹Ûµ ثانيه طول ميكشد تا بارگذاري شود. اين يك اÙزايش Û¶Û¶ درصدي است!
تعيين تاريخ انقضا در هدرها
اين مورد پيش از اين Ù†Ùوذ كشينگ در مرورگر ناميده ميشد. به زبان ساده، هر اسكريپت در سايت وردپرس شما بايد يك هدر كش HTTP داشته باشد كه به آن ضميمه شده باشد. اين زمان انقضاي كش Ùايل را مشخص ميكند. براي تصØÙŠØ Ø§ÙŠÙ† موضوع، اطمينان Øاصل كنيد كه هاست وردپرس شما هدرهاي كنترل كش Ùˆ تنظيمات انقضاي هدر درست را دارد. مراØÙ„ Ù†Øوه اضاÙÙ‡ كردن دستي هدرهاي كشينگ به سرور را بررسي كنيد.
موضوع ديگر اين است كه وقتي اسكريپتهاي ثالث را بارگذاري ميكنيد، براي اÙزودن هدرهاي كشينگ دسترسي نداريد. همانطور كه به سرورهاي وب آنها دسترسي نداريد. دلايل متداول اين موضوع مانند Ùيسبوك Ùˆ توييتر شامل اسكريپت Ú¯ÙˆÚ¯Ù„ آناليتيكس Ùˆ پيكسلهاي بازاريابي ميشود. براي رÙع اين اشكال ميتوانيد اسكريپت Ú¯ÙˆÚ¯Ù„ آناليتيكس را با اÙزونهاي مانند Perfmatters به صورت Ù…Øلي هاست كنيد (هر چند اين مورد به صورت رسمي مورد پشتيباني نيست). همچنين WP Rocket اخيرا گزينهاي دارد كه ميتوانيد پيكسل بازاريابي Ùيسبوك خود را به صورت Ù…Øلي هاست كنيد.
جابهجايي Ù…Øلي اسكريپتها ميتواند در زمينه ميزان تاثير بر عملكرد سايت متÙاوت باشد. يك مزيت اين است كه در آن صورت كنترل كاملي بر Ùايل خواهيد داشت Ùˆ ميتوانيد آن را از CDN خود انجام دهيد. اين همچنين درخواست ثالث DNS را Øذ٠ميكند. اما همچنين مهم است كه به ياد داشته باشيد اين Ùايلها ممكن است در مرورگرهاي ديگران كش شده باشند.
Øذ٠رشته درخواستها از منابع استاتيك
يك مشكل متداول ديگر دستوپنجه نرم كردن با رشته درخواستهاست. Ùايلهاي CSS Ùˆ جاوا اسكريپت معمولا نسخه Ùايلي را در انتهاي آدرسهاي خود دارند، مانند https://domain.com/file.min.css?ver=4.5.3. بعضي سرورها Ùˆ سرورهاي پروكسي نميتوانند رشته درخواستها را كشينگ كنند. پس با Øذ٠آنها گاهي ميتوانيد كشينگ خود را بهبود دهيد.
اÙزونههاي وردپرسي مانند Øذ٠رشته درخواستها از منابع ايستا يا Perfmatters وجود دارند كه ميتوانند اين كار را به صورت خودكار براي شما انجام دهند. يا ميتوانيد آن را به صورت دستي با كد انجام دهيد.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<span class="token keyword">function</span> <span class="token function">remove_query_strings</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">is_admin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">add_filter</span><span class="token punctuation">(</span><span class="token string">'script_loader_src'</span><span class="token punctuation">,</span> <span class="token string">'remove_query_strings_split'</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">add_filter</span><span class="token punctuation">(</span><span class="token string">'style_loader_src'</span><span class="token punctuation">,</span> <span class="token string">'remove_query_strings_split'</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">remove_query_strings_split</span><span class="token punctuation">(</span><span class="token variable">$src</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token variable">$output</span> <span class="token operator">=</span> <span class= + نوشته شده: 1397/12/8 ساعت: ۰۶ توسط:arg89 :
چگونه با وردپرس در Google PageSpeed Insights امتياز Û±Û°Û°/Û±Û°Û° بگيريم؟غير عادي نيست كه مشتريان يك شركت از توسعهدهندهي وردپرس خود بخواهند تا امتياز Google PageSpeed Insights آنها را اÙزايش دهد. Ú¯ÙˆÚ¯Ù„ بازاريابي خوبي براي اين ابزار انجام ميدهد Ùˆ بيشتر مصرÙكنندگان متوجه نميشوند كه امتياز كامل، پايان همه چيز نيست. گاهي اوقات اين قضيه خيلي آدم را اذيت ميكند. با همهي اينها، امروز ميخواهيم چند نكته Ùˆ استراتژي را با شما در ميان بگذاريم كه ميتواند به شما كمك كند تا با وبسايت وردپرس خود از ابزار Google PageSpeed Insights امتياز Û±Û°Û°/Û±Û°Û° بگيريد.
ابزار Google PageSpeed Insights چقدر مهم است؟ابزار Google PageSpeed Insights يك ابزار سنجش عملكرد وب توسط Ú¯ÙˆÚ¯Ù„ است Ùˆ به شما كمك ميكند تا به سادگي با پيروي از بهترين روشهاي توسعهي وب، راهكارهايي را براي سريعتر شدن Ùˆ موبايل-Ùرندلي شدن سايت خود شناسايي كنيد. اما نكتهي بسيار مهمي كه بايد به خاطر داشته باشيد اين است كه نبايد هميشه براي رسيدن به امتياز Û±Û°Û°/Û±Û°Û° وسواس به خرج دهيد. اصلاً ممكن است كه بسته به ساختار Ùˆ Ù†Øوهي تنظيمات وبسايت وردپرس شما، چنين كاري در همهي Øالات ممكن نباشد. با وجود اين همه پوستهي چندمنظوره Ùˆ سايتهاي Øاوي اسكريپتهاي خارجي، به سادگي قادر نخواهيد بود تا زمان خود را صر٠به دست آوردن امتياز كامل كنيد؛ كه البته اين قضيه كاملاً قابل قبول است. توصيهي ما اين است كه بيشتر به سرعت سايت خود نگاه كنيد تا اين امتيازات. امتياز ابزارهايي مثل PingdomØŒ GTMetrix Ùˆ Google PageSpeed Insights ميتواند شما را به گمراهي بكشاند. به خصوص اين كه بعضي از آنها هنوز Øتي از HTTP/2 نيز پشتيباني نميكنند. آنچه كه واقعاً اهميت دارد اين است كه از بارگيري سريع سايت خود Ùˆ همچنين از عملكرد ادراكشدهي آن اطمينان يابيد. عملكرد ادراكشده، اØساس كاربر از سرعت بارگيري سايت شماست. آيا Ú¯ÙˆÚ¯Ù„ در سئو Ùˆ Ùاكتور رتبهبندي سرعت صÙØÙ‡ از PageSpeed Insights استÙاده ميكند يا مقدار خام سرعت پاسخگويي؟اين سوال جالبي بود كه توسط يك سئوكار در FDP Group Leeds Ù…Ø·Ø±Ø Ø´Ø¯ Ùˆ در Search Engine Roundtable نيز مورد بØØ« قرار گرÙت. گري ايليس (Gary Illyes) تØليلگر تمايلات وبمسترها در Ú¯ÙˆÚ¯Ù„ به اين شكل پاسخ داد كه «Ø¨Ù‡ نظرم هر دو تأثيرگذار است». يكي از دلايل عمدهي آن اين است كه اغلب اگر وبسايت كندي داشته باشيد، به اØتمال خيلي زياد هشدارهاي زيادي هم در Google PageSpeed Insights خواهيد داشت. بسياري از توصيههاي اين ابزار رابطهي نزديكي با زمان پاسخگويي شما دارد. لزوماً رابطهي Û±Û°Û°% مستقيمي بين آنها برقرار نيست، اما آنچه كه گري به اØتمال زياد قصد دارد بگويد اين است كه اگر وبسايت كندي داريد، بله، اØتمالاً روي رتبهبندي شما تأثيرگذار است. كسب امتياز Û±Û°Û°/Û±Û°Û° روي هاست اشتراكيبه نظرمان رسيد كه جالب مي شود اگر كمي پوستهي Û²Û°Û±Û· را در وردپرس Û´Ù«Û· بررسي كنيم. اين اولين پوستهي پيشÙرض در وردپرس است كه به جاي وبلاگهاي معمولي، براي كسبوكارها ساخته شده است Ùˆ اين خيلي هيجانانگيز است! پس امروز ميخواهيم به شما نشان دهيم كه چگونه امتياز كامل Û±Û°Û°/Û±Û°Û° را هم روي دسكتاپ Ùˆ هم روي موبايل بگيريد. ما ابزارها Ùˆ خدمات متداولي را كه خيلي از سايتهاي وردپرس استÙاده ميكنند، نصب كردهايم؛ چيزهايي مثل Ú¯ÙˆÚ¯Ù„ آناليتيكس، AkismetØŒ سئو ياهست، Ùˆ غيره. ما آزمايشهاي خودمان را هم روي يك هاست اشتراكي ارزان Ùˆ هم روي سايتي كه از Google Cloud استÙاده مي كند انجام داده ايم تا به شما نشان دهيم كه چقدر تÙاوت بين Ù…Øيطهاي ميزباني بهينهي Google Cloud Ùˆ اشتراكي وجود دارد. اگرچه اين سايت خيلي كوچك است، اما مبناي خوبي براي درك Ù†Øوهي كار Google PageSpeed Insights است. امتياز Û±Û°Û°/Û±Û°Û° در Google PageSpeed Insights با هاست اشتراكيسايت آزمايشي ما، يك سايت با وردپرس Û´Ù«Û· Ùˆ با پوستهي Û²Û°Û±Û· است كه بر روي يك هاست اشتراكي ارزان Ùˆ Ù…Øبوب (آپاچي) قرار گرÙته است. SSL Ùعال است Ùˆ پلاگينهاي زير نصب هستند.
به علاوه Ú¯ÙˆÚ¯Ù„ آناليتيكس نيز در بخش Ùايل header.php اجرا ميشود. تنها تغييري كه ايجاد كردهايم، اضاÙÙ‡ كردن يك تصوير برجسته به پست پيشÙرض «Hello world!» است. ما اين سايت را به Google PageSpeed Insights داديم Ùˆ بدون هيچ كار اضاÙهاي، امتياز Û±Û°Û°/Û¶Û¹ براي دسكتاپ Ùˆ Û±Û°Û°/ÛµÛ¸ براي موبايل به دست آمد. پس Øتماً لازم است چيزهايي را بهبود دهيم. اجازه بدهيد تا هر يك را بررسي كنيم تا ببينيم چگونه ميتوانيم آن را Ø§ØµÙ„Ø§Ø ÙƒÙ†ÙŠÙ….
|
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts 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/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule> |
Øواستان باشد كه اين كد را در زير Ù…Øتواي Ùعلي Ùايل .htaccess خود اضاÙÙ‡ كنيد؛ مانند شكل زير:
اگر از NGINX استÙاده ميكنيد، به سادگي كد زير را به Ùايل nginx.conf خود اضاÙÙ‡ كنيد.
|
1 2 3 4 5 |
gzip on; gzip_disable "MSIE [1-6].(?!.*SV1)"; gzip_vary on; gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;
|
ابزاري مثل Check Gzip Compression ميتواند ميزان صرÙهجويي بايت را Øاصل از Ùعال كردن Ùشردهسازي GzipØŒ نشان دهد. تصوير زير مثالي از ميزان صرÙهجويي ما در سايت آزمايشي است.
اگر سايت خود را دوباره به Google PageSpeed Insights بدهيم، ميبينيم كه هشدار Ùشردهسازي Gzip Øذ٠شده Ùˆ امتياز دسكتاپ ما از Û±Û°Û°/Û¶Û¹ به Û±Û°Û°/Û¸Û° Ùˆ امتياز موبايل از Û±Û°Û°/ÛµÛ¸ به Û±Û°Û°/Û¶Û· اÙزايش ياÙته است.
بهينهسازي تصاوير
توصيهي بعدي Google PageSpeed Insights كه بايد به آن عمل كنيم، هشدار بهينه كردن تصاوير است.پست پيشÙرض «Hello world!» تصويري درون خود دارد كه موجب اين پيغام خطا شده است.
اين هشدار بسيار مهم Ùˆ Ù…Ùيد است. بر اساس HTTP Archive در نوامبر ۲۰۱۶، Û¶Ûµ% وزن كلي صÙØات را تصاوير تشكيل ميدهند. بهينهسازي تصاوير يكي از سادهترين راههاي بهبود عملكرد وبسايت وردپرس شماست.
دو راه براي Ø§ØµÙ„Ø§Ø Ø§ÙŠÙ† مشكل داريد. اولي، استÙاده از يك پلاگين بهينهسازي تصوير است. در Øقيقت يك پلاگين ميتواند تمامي Ù…Øتواي رسانهاي وردپرس شما را پيمايش كرده Ùˆ به يك باره آنها را بهينه كند. به علاوه، هنگام بارگذاري نيز Ùايلها را به صورت خودكار بهينه خواهد كرد. راهنماي كاملي دربارهي بهينهسازي تصاوير در وردپرس وجود دارد. چند مورد از Ù…Øبوبترين پلاگينهاي بهينهسازي تصوير عبارتند از:
اين پلاگينها مشكل را برطر٠ميكنند. علاوه بر اينها، ميتوانيد تصاوير را پيش از بارگذاري در ابزاري مانند Adobe PhotoshopØŒ GimpØŒ يا Affinity Photo Ùشردهسازي كنيد. در شكل زير، تصويري را كه باعث نمايش اين هشدار ميشود، مشاهده ميكنيد. ميتوانيم آن را از قبل با كوچك كردن Ùˆ پايين آوردن كيÙيت، Ùشرده كنيم. بهتر است كه تصاوير خود را تا Øد امكان كوچك كنيد. اين تصوير در ابتدا Û²Ù«Û³Û² MB بوده، اما بعد از كوچك كردن Ùˆ Ùشردهسازي، به Û¹Û¹Ù«Û³Û¸ KB كاهش ياÙته است. به خاطر داشته باشيد كه هميشه بهتر است تصاوير را در اندازهي لازم بارگذاري كنيد Ùˆ براي تغيير اندازهي آنها به CSS اتكا نكنيد. اين كار سايت شما را كند ميكند.
اگر سايت خود را دوباره در Google PageSpeed Insights بررسي كنيم، ميبينيم كه هشدار بهينهسازي تصاوير Øذ٠شده Ùˆ اين كار امتياز دسكتاپ ما را از Û±Û°Û°/Û¸Û° به Û±Û°Û°/Û¸Û¸ Ùˆ امتياز موبايل را از Û±Û°Û°/Û¶Û· به Û±Û°Û°/Û·Û³ اÙزايش داده است. داريم پيشرÙت ميكنيم!
Øذ٠جاوااسكريپت Ùˆ CSS بلوكهكنندهي نمايش در Ù…Øتواي بالاي صÙØÙ‡
توصيهي بعدي Google PageSpeed Insights كه بايد به آن عمل كنيم، هشدار Øذ٠جاوااسكريپت Ùˆ CSS بلوكهكنندهي نمايش در Ù…Øتواي بالاي صÙØÙ‡ است.
زماني كه يك صÙØÙ‡ توسط مرورگر بارگيري ميشود، معمولاً منابع جاوااسكريپت Ùˆ CSS تا بارگيري كامل Ùˆ پردازش توسط مرورگر، از نمايش صÙØÙ‡ جلوگيري ميكنند. بعضي از منابع لازم است كه قبل از نمايش هر چيزي بر روي صÙØه، بارگيري Ùˆ پردازش شوند. با اين وجود، بسياري از منابع CSS Ùˆ جاوااسكريپت به صورت شرطي هستند – يعني تنها در شرايط خاصي اعمال ميشوند – يا شايد هم به سادگي براي نمايش Ù…Øتواي بالاي صÙØÙ‡ نياز نباشند. براي ايجاد سريعترين تجربهي ممكن براي كاربران خود، بايد تلاش كنيد تا تمامي منابع بلوكهكنندهي نمايش را كه براي Ù…Øتواي بالاي صÙØÙ‡ نياز نيستند، Øذ٠كنيد.
گوگل در مورد جاوااسكريپت بلوكهكنندهي نمايش، سه توصيه دارد:
- اگر جاوااسكريپت زيادي نداريد، ميتوانيد آن را درون خطي (inline) كنيد تا از اين هشدار خلاص شويد. ميتوانيد جاوااسكريپت را با پلاگين Autoptimize درون خطي كنيد. به هر Øال اين روش Ùقط براي وبسايتهاي بسيار كوچك جواب ميدهد. بيشتر سايتهاي وردپرس آن قدر كد جاوااسكريپت دارند كه انجام دادن اين كار، اتÙاقاً ممكن است سايت شما را كندتر كند.
- دومين راه، بارگيري ناهمزمان جاوااسكريپت است. در Øقيقت جاوااسكريپت asyncØŒ Ùايل را در هنگام تجزيهي parse) HTML) بارگيري كرده Ùˆ Ùقط در صورت تكميل بارگيري Ùايل، تجزيهكنندهي HTML را براي اجراي خود متوق٠ميسازد.
- سومين راه، تعويق جاوااسكريپت است. مشخصهي defer همچنين Ùايل را در طول تجزيهي HTML دانلود ميكند، اما تنها بعد از تكميل تجزيه آن را اجرا ميكند. به علاوه تمامي اسكريپتهاي Øاوي اين مشخصه به ترتيب Øضور در صÙØÙ‡ اجرا خواهند شد. در مورد تÙاوتهاي ناهمزماني Ùˆ تعويق بيشتر بخوانيد.
در اين مثال ميخواهيم كدهاي جاوااسكريپت خود را Async كنيم. به اين منظور از يك پلاگين رايگان به نام Async JavaScript استÙاده ميكنيم. شما ميتوانيد اين پلاگين را از طريق آرشيو وردپرس دانلود كنيد يا آن را مستقيماً در داشبورد وردپرس خودتان در قسمت «Ù¾Ù„اگينها > اÙزودن پلاگين جديد» جستوجو كنيد. اين پلاگين در هنگام نگارش اين مطلب، بيشتر از Û¹Ù«Û°Û°Û° نصب Ùعال دارد Ùˆ امتياز Û²/Û´ از Ûµ ستاره را به خود اختصاص داده است. اساساً اين پلاگين مشخصهي «async» يا «defer» را به تمامي كدهاي جاوااسكريپت كه با استÙاده از تابع wp_enqueue_script وردپرس بارگيري ميشوند، اضاÙÙ‡ ميكند. توسعهدهندهي اين پلاگين يك نسخهي پولي هم ارائه داده كه در آن ميتوانيد اسكريپتهاي مورد نظر خود را براي async يا defer انتخاب كنيد.
مثال Async
|
1 |
<script src="file1.js" async></script> |
مثال Defer
|
1 |
<script src="file1.js" defer></script> |
بعد از نصب، با مراجعه به بخش تنظيمات، به سادگي جاوااسكريپت Async را Ùعال كنيد.
Ùˆ Øذ٠اسكريپت براي سايتهاي بزرگتر ميتواند Ù…Ùيد باشد. البته ميتوانيد نسخهي پولي اين پلاگين را نيز خريداري كنيد. اگرچه ما در اين مثال به اين امكانات نياز نداريم، اما اگر سايت شما كدهاي جاوااسكريپت زيادي دارد، تنظيم همهي آنها به async يا defer به اØتمال زياد، جايي مشكلي پديد ميآورد. در اين موارد بايد بررسي كنيد كه روي كدام كدها ميتوانيد اين كار را انجام دهيد.
اگر نميخواهيد براي اين كار از يك پلاگين استÙاده كنيد، راههاي ديگري هم هست. مثلاً ميتوانيد كد زير را به Ùايل functions.php خود اضاÙÙ‡ كنيد.
اضاÙÙ‡ كردن كد زير به functions.php
|
1 2 3 4 5 6 |
/*function to add async to all scripts*/ function js_async_attr($tag){ # Add async to all remaining scripts return str_replace( ' src', ' async="async" src', $tag ); } add_filter( 'script_loader_tag', 'js_async_attr', 10 ); |
اÙزودن async يا defer بدون پلاگين:
- Async با استÙاده از WordPress Enqueue
- اÙزودن مشخصههاي defer Ùˆ async به جاوااسكريپت بلوكهكنندهي نمايش در وردپرس
بار ديگر سايت خود را در Google PageSpeed Insights بررسي ميكنيم Ùˆ ميبينيم كه مشكل Render-blocking جاوااسكريپت ØŒ تصØÙŠØ Ø´Ø¯Ù‡ Ùˆ Ùقط هشدار بهينهسازي تØويل (Optimize CSS delivery warning) باقي مانده است.
همانطوري كه ميبينيد، اولين چيزي كه بايد بهينه كنيم، Ùونتهاي Ú¯ÙˆÚ¯Ù„ هستند (fonts.googleapis.com) . به طور پيشÙرض CSS بلوكهكنندهي نمايش (render-blocking) است Ùˆ اين شامل CSS Ùونتهاي وب هم ميشود. براي تصØÙŠØ Ø§ÙŠÙ† مورد، پلاگين رايگان Disable Google Fonts را نصب ميكنيم. همين اواخر، ميلان دينيچ (Milan Dinić) سازندهي اين پلاگين، Ùونت Twenty Seventeen Libre Franklin را نيز اضاÙÙ‡ كرد. ÙˆØ§Ø¶Ø Ø§Ø³Øª كه بعد از نصب پلاگين، Ùونتهاي Ú¯ÙˆÚ¯Ù„ در سايت شما نمايش داده نخواهد شد. پس بايستي به سايت Ùونتهاي Ú¯ÙˆÚ¯Ù„ رÙته Ùˆ كد جاسازي (embed) را به صورت دستي درياÙت كنيد. ما وزنهاي پيشÙرض پوستهي Û²Û°Û±Û· را انتخاب ميكنيم.
|
1 2 3 4 |
<link href="https://fonts.googleapis.com/css?family=collection-drawer-emphasized-code">Libre+Franklin:300,300i,400,400i,600,600i,800,800i" rel="stylesheet">
<img class="size-full wp-image-737 aligncenter" src="https://parmisoft.com/wp-content/uploads/2018/10/google-fonts-embed-e1541923663699.jpg" alt="Ùونت Ú¯ÙˆÚ¯Ù„ embed" width="700" height="694" /> |
سپس بايد اين كد را به Ùايل footer.phpØŒ درست قبل از تگ اضاÙÙ‡ كنيد. نكته اين كه اين روش، منجر به پديدهي FOUT ميشود؛ يعني اين كه تا قبل از اعمال Ùونتهاي مد نظر شما، نوشتههاي بدون سبك (style) براي مدت كوتاهي نمايش داده ميشوند. اما از طر٠ديگر، مشكل بلوكهكنندگي را نيز برطر٠ميكند. بايستي در مورد سايت خودتان تصميم بگيريد كه آيا FOUT يك تجربهي كاربري قابل قبول براي بازديدكنندگان شما هست يا خير. علاوه بر آن، ميتوانيد از Web Font Loader Ú¯ÙˆÚ¯Ù„ استÙاده كنيد.
اگر بار ديگر سايت خود را در Google PageSpeed Insights بررسي كنيم، خواهيم ديد كه در هشدار بهينهسازي تØويل CSSØŒ Ùقط يك چيز باقي مانده است Ùˆ آن Ùايل style.css است.
پلاگين Autoptimize
يكي از سادهترين راهها براي تصØÙŠØ Ø§ÙŠÙ† ايراد، استÙاده از يك پلاگين رايگان وردپرس با عنوان Autoptimize است كه توسط Ùرانك گوسنس (Frank Goossens) توسعه ياÙته است.
اين پلاگين خيلي سبك است Ùˆ صرÙاً Û±Û·Û¶ KB است. در هنگام نگارش اين مقاله، اين پلاگين Û´Û°Û°Ù«Û°Û°Û° نصب Ùعال دارد Ùˆ امتياز Ûµ/Û´ از Ûµ ستاره را به خود اختصاص داده است. اين پلاگين در تلÙيق اسكريپتها، كوچك كردن (minification)ØŒ Ù‡ÙدÙرهاي expires Ùˆ انتقال استايلها به هدر Ùˆ اسكريپتها به Ùوتر، به شما كمك ميكند. اين پلاگين كاملاً با پلاگين Async JavaScript كه قبلاً استÙاده شد، سازگار است.
بعد از نصب پلاگين، به بخش تنظيمات رÙته Ùˆ گزينهي «Optimize CSS Code» (بهينهسازي كد CSS) را انتخاب كنيد. سپس به بخش تنظيمات پيشرÙته برويد Ùˆ گزينههاي «Aggregate inline CSS» (تجميع CSSهاي درون خطي) Ùˆ «Inline All CSS» (درون خطي كردن تمام CSSها) را نيز Ùعال كنيد. توجه داشته باشيد كه بسته به پوستهي مورد استÙادهي شما، ممكن است اين روش توصيه نشود. در Øقيقت، درون خطي كردن ميتواند براي سايتهاي بزرگ، بد باشد Ùˆ در اين مواقع بهتر است كه به سادگي، اين هشدار به خصوص را در Google PageSpeed Insights ناديده بگيريد. به ياد داشته باشيد كه با HTTP/2ØŒ گاهي اوقات الØاق ميتواند باعث كند شدن سايت شما شود.
براي مطالعه ادامه متن به ابزار Google PageSpeed Insights در بلاگ پارميساÙت مراجعه كنيد.
برچسب: