طراحي سايت و توليد نرم افزارهاي تحت وب

ابزار Google PageSpeed Insights يك ابزار سنجش عملكرد وب توسط گوگل است و به شما كمك مي‌كند تا به سادگي با پيروي از بهترين روش‌هاي توسعه‌ي وب، راهكارهايي را براي سريع‌تر شدن و موبايل-فرندلي شدن سايت خود شناسايي كنيد. اما نكته‌ي بسيار مهمي كه بايد به خاطر داشته باشيد اين است كه نبايد هميشه براي رسيدن به امتياز ۱۰۰/۱۰۰ وسواس به خرج دهيد. اصلاً ممكن است كه بسته به ساختار و نحوه‌ي تنظيمات وب‌سايت وردپرس شما، چنين كاري در همه‌ي حالات ممكن نباشد. با وجود اين همه پوسته‌ي چندمنظوره و سايت‌هاي حاوي اسكريپت‌هاي خارجي، به سادگي قادر نخواهيد بود تا زمان خود را صرف به دست آوردن امتياز كامل كنيد؛ كه البته اين قضيه كاملاً قابل قبول است.

توصيه‌ي ما اين است كه بيشتر به سرعت سايت خود نگاه كنيد تا اين امتيازات. امتياز ابزارهايي مثل Pingdom، GTMetrix و Google PageSpeed Insights مي‌تواند شما را به گمراهي بكشاند. به خصوص اين كه بعضي از آن‌ها هنوز حتي از HTTP/2 نيز پشتيباني نمي‌كنند. آنچه كه واقعاً اهميت دارد اين است كه از بارگيري سريع سايت خود و همچنين از عملكرد ادراك‌شده‌ي آن اطمينان يابيد. عملكرد ادراك‌شده، احساس كاربر از سرعت بارگيري سايت شماست.

اين سوال جالبي بود كه توسط يك سئوكار در FDP Group Leeds مطرح شد و در Search Engine Roundtable نيز مورد بحث قرار گرفت. گري ايليس (Gary Illyes) تحليل‌گر تمايلات وب‌مسترها در گوگل به اين شكل پاسخ داد كه «به نظرم هر دو تأثيرگذار است».

يكي از دلايل عمده‌ي آن اين است كه اغلب اگر وب‌سايت كندي داشته باشيد، به احتمال خيلي زياد هشدارهاي زيادي هم در Google PageSpeed Insights خواهيد داشت. بسياري از توصيه‌هاي اين ابزار رابطه‌ي نزديكي با زمان پاسخ‌گويي شما دارد. لزوماً رابطه‌ي ۱۰۰% مستقيمي بين آن‌ها برقرار نيست، اما آنچه كه گري به احتمال زياد قصد دارد بگويد اين است كه اگر وب‌سايت كندي داريد، بله، احتمالاً روي رتبه‌بندي شما تأثيرگذار است.

به نظرمان رسيد كه جالب مي شود اگر كمي پوسته‌ي ۲۰۱۷ را در وردپرس ۴٫۷ بررسي كنيم. اين اولين پوسته‌ي پيش‌فرض در وردپرس است كه به جاي وبلاگ‌هاي معمولي، براي كسب‌وكارها ساخته شده است و اين خيلي هيجان‌انگيز است! پس امروز مي‌خواهيم به شما نشان دهيم كه چگونه امتياز كامل ۱۰۰/۱۰۰ را هم روي دسكتاپ و هم روي موبايل بگيريد. ما ابزارها و خدمات متداولي را كه خيلي از سايت‌هاي وردپرس استفاده مي‌كنند، نصب كرده‌ايم؛ چيزهايي مثل گوگل آناليتيكس، Akismet، سئو ياهست، و غيره. ما آزمايش‌هاي خودمان را هم روي يك هاست اشتراكي ارزان و هم روي سايتي كه از Google Cloud استفاده مي كند انجام داده ايم تا به شما نشان دهيم كه چقدر تفاوت بين محيط‌هاي ميزباني بهينه‌ي Google Cloud و اشتراكي وجود دارد.

اگرچه اين سايت خيلي كوچك است، اما مبناي خوبي براي درك نحوه‌ي كار Google PageSpeed Insights است.

سايت آزمايشي ما، يك سايت با وردپرس ۴٫۷ و با پوسته‌ي ۲۰۱۷  است كه بر روي يك هاست اشتراكي ارزان و محبوب (آپاچي) قرار گرفته است. SSL فعال است و پلاگين‌هاي زير نصب هستند.

به علاوه گوگل آناليتيكس نيز در بخش فايل header.php  اجرا مي‌شود. تنها تغييري كه ايجاد كرده‌ايم، اضافه كردن يك تصوير برجسته به پست پيش‌فرض «Hello world!» است. ما اين سايت را به Google PageSpeed Insights داديم و بدون هيچ كار اضافه‌اي، امتياز ۱۰۰/۶۹ براي دسكتاپ و ۱۰۰/۵۸ براي موبايل به دست آمد. پس حتماً لازم است چيزهايي را بهبود دهيم. اجازه بدهيد تا هر يك را بررسي كنيم تا ببينيم چگونه مي‌توانيم آن را اصلاح كنيم.

كار خود را با دسكتاپ شروع مي‌كنيم، چون خيلي از اصلاحات براي موبايل هم به كار مي‌آيند. اولين توصيه‌ي Google PageSpeed Insights كه بايد به آن عمل كنيم، هشدار فعال كردن فشرده‌سازي است.

براي حل اين مشكل بر طبق سفارش گوگل بايد فشرده‌سازي Gzip را فعال كنيم.

تمام مرورگرهاي مدرن، از فشرده‌سازي Gzip پشتيباني كرده و براي تمامي درخواست‌ها به صورت خودكار درباره‌ي آن مذاكره مي‌كنند. فعال كردن فشرده‌سازي Gzip مي‌تواند حجم پاسخ انتقالي را به ميزان ۹۰% كاهش دهد، كه به نوبه‌ي خود موجب كاهش چشمگير زمان بارگيري آن منبع، كاهش مصرف داده‌ي سرويس‌گيرنده و بهبود زمان اولين نمايش صفحات شما مي‌شود.

دو راه براي اين كار وجود دارد. اولين و ساده‌ترين راه، استفاده از يك پلاگين كش با قابليت فعال كردن Gzip است. مثلاً WP Rocket قواعد فشرده‌سازي Gzip را با استفاده از ماژول mod_deflate به صورت خودكار در فايل .htaccess اضافه مي‌كند. W3 Total Cache هم در بخش عملكرد خود امكان فعال كردن اين فشرده‌سازي را ارائه مي‌دهد.

دومين راه فعال كردن فشرده‌سازي Gzip، ويرايش فايل .htaccess است. بيشتر هاست‌هاي اشتراكي از آپاچي استفاده مي‌كنند كه در آن مي‌توانيد به سادگي كد زير را به فايل .htaccess خود اضافه كنيد. فايل .htaccess را مي‌توانيد از طريق FTP در ريشه‌ي سايت وردپرس خود بيابيد.

حواستان باشد كه اين كد را در زير محتواي فعلي فايل .htaccess خود اضافه كنيد؛ مانند شكل زير:

اگر از NGINX استفاده مي‌كنيد، به سادگي كد زير را به فايل nginx.conf خود اضافه كنيد.

ابزاري مثل 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 بررسي كنيم، مي‌بينيم كه هشدار بهينه‌سازي تصاوير حذف شده و اين كار امتياز دسكتاپ ما را از ۱۰۰/۸۰ به ۱۰۰/۸۸ و امتياز موبايل را از ۱۰۰/۶۷ به ۱۰۰/۷۳ افزايش داده است. داريم پيشرفت مي‌كنيم!

توصيه‌ي بعدي Google PageSpeed Insights كه بايد به آن عمل كنيم، هشدار حذف جاوااسكريپت و CSS بلوكه‌كننده‌ي نمايش در محتواي بالاي صفحه است.

زماني كه يك صفحه توسط مرورگر بارگيري مي‌شود، معمولاً منابع جاوااسكريپت و CSS تا بارگيري كامل و پردازش توسط مرورگر، از نمايش صفحه جلوگيري مي‌كنند. بعضي از منابع لازم است كه قبل از نمايش هر چيزي بر روي صفحه، بارگيري و پردازش شوند. با اين وجود، بسياري از منابع CSS و جاوااسكريپت به صورت شرطي هستند – يعني تنها در شرايط خاصي اعمال مي‌شوند – يا شايد هم به سادگي براي نمايش محتواي بالاي صفحه نياز نباشند. براي ايجاد سريع‌ترين تجربه‌ي ممكن براي كاربران خود، بايد تلاش كنيد تا تمامي منابع بلوكه‌كننده‌ي نمايش را كه براي محتواي بالاي صفحه نياز نيستند، حذف كنيد.

در اين مثال مي‌خواهيم كدهاي جاوااسكريپت خود را Async كنيم. به اين منظور از يك پلاگين رايگان به نام Async JavaScript استفاده مي‌كنيم. شما مي‌توانيد اين پلاگين را از طريق آرشيو وردپرس دانلود كنيد يا آن را مستقيماً در داشبورد وردپرس خودتان در قسمت «پلاگين‌ها > افزودن پلاگين جديد» جست‌وجو كنيد. اين پلاگين در هنگام نگارش اين مطلب، بيشتر از ۹٫۰۰۰ نصب فعال دارد و امتياز ۲/۴ از ۵ ستاره را به خود اختصاص داده است. اساساً اين پلاگين مشخصه‌ي «async» يا «defer» را به تمامي كدهاي جاوااسكريپت كه با استفاده از تابع wp_enqueue_script وردپرس بارگيري مي‌شوند، اضافه مي‌كند. توسعه‌دهنده‌ي اين پلاگين يك نسخه‌ي پولي هم ارائه داده كه در آن مي‌توانيد اسكريپت‌هاي مورد نظر خود را براي async يا defer انتخاب كنيد.

مثال Defer

بعد از نصب، با مراجعه به بخش تنظيمات، به سادگي جاوااسكريپت Async را فعال كنيد.

و حذف اسكريپت براي سايت‌هاي بزرگ‌تر مي­تواند مفيد باشد. البته مي‌توانيد نسخه‌ي پولي اين پلاگين را نيز خريداري كنيد. اگرچه ما در اين مثال به اين امكانات نياز نداريم، اما اگر سايت شما كدهاي جاوااسكريپت زيادي دارد، تنظيم همه‌ي آن‌ها به async يا defer به احتمال زياد، جايي مشكلي پديد مي‌آورد. در اين موارد بايد بررسي كنيد كه روي كدام كدها مي‌توانيد اين كار را انجام دهيد.

اگر نمي‌خواهيد براي اين كار از يك پلاگين استفاده كنيد، راه‌هاي ديگري هم هست. مثلاً مي‌توانيد كد زير را به فايل functions.php خود اضافه كنيد.

افزودن async يا defer بدون پلاگين:

بار ديگر سايت خود را در 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) را به صورت دستي دريافت كنيد. ما وزن‌هاي پيش‌فرض پوسته‌ي ۲۰۱۷ را انتخاب مي‌كنيم.

سپس بايد اين كد را به فايل footer.php، درست قبل از تگ اضافه كنيد. نكته اين كه اين روش، منجر به پديده‌ي FOUT مي‌شود؛ يعني اين كه تا قبل از اعمال فونت‌هاي مد نظر شما، نوشته‌هاي بدون سبك (style) براي مدت كوتاهي نمايش داده مي‌شوند. اما از طرف ديگر، مشكل بلوكه‌كنندگي را نيز برطرف مي‌كند. بايستي در مورد سايت خودتان تصميم بگيريد كه آيا FOUT يك تجربه‌ي كاربري قابل قبول براي بازديدكنندگان شما هست يا خير. علاوه بر آن، مي‌توانيد از Web Font Loader گوگل استفاده كنيد.

اگر بار ديگر سايت خود را در Google PageSpeed Insights بررسي كنيم، خواهيم ديد كه در هشدار بهينه‌سازي تحويل CSS، فقط يك چيز باقي مانده است و آن فايل style.css است.

يكي از ساده‌ترين راه‌ها براي تصحيح اين ايراد، استفاده از يك پلاگين رايگان وردپرس با عنوان 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 در بلاگ پارميسافت مراجعه كنيد.