چند روز پیش که کمی حوصله‌ام سر رفته بود و ۱-۲ ساعت وقت داشتم، تصمیم گرفتم صفحه اول (home، index یا هرچی..) سایت خودم theyahya.com را دوباره بنویسیم. و در انتهای این فرآیند که معمولا کارهای مرتب‌سازی کد و بهینه‌سازی‌ها را انجام می‌دهم. مسلما یکی از ابزارهایی که استفاده می‌کنم سایت gtmetrix است. از آنجایی که همیشه تا حد معقولی از بهینه‌سازی را طبق gtmetrix انجام می‌دهم، که خب روش منطقی هم همین است. ولی اینبار تصمیم گرفتم که به انتهای حد بهینه‌سازی نائل شوم و مصمم شدم که بالاترین رتبه را کسب کنم!‌ که خب نتیجه‌ای رضایت‌بخشی حاصل شد و تصمیم گرفتم که در مورد این فرآیند اینجا هم بنویسم و تقریبا تمام مراحل را در گیت‌هاب هم کامیت کردم و از مرحله هم یک release دادم که مرور کد کاملا راحت‌تر شود.

ساختار معقول یک صفحه‌ی ساده معمولا چنین چیزی هست:

├── avatar.jpg
├── bg.png
├── index.html
├── style.less
└── style.min.css

و نتیجه‌ی حاصل شده از این ساختار در تست gtmetrix هم چیزی‌ست شبیه تصویر پایین:

 

و اگر نگاهی به waterfall بیاندازیم، و بخواهیم سریع برویم سراغ مشکلات اصلی! همانطور که در تصویر زیر پیداست، ۳ فایل مشخص شده مربوط به فونت‌هایی‌ست که از fonts.google.com گرفته می‌شوند.

 

که نتیجه‌ی کد:

@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400');

است که ابتدای فایل styleام نوشته‌ام تا بتوانم از فونت Cormorant Garamond استفاده کنم. خط بالا در واقع یک css است که فایل‌های font را لود می‌کند. حالا ما می‌توانیم بجای ایمپورت کردم این css، خود آن را (محتویات آن را ) کپی کرده و به ابتدای styleمان اضافه کنیم. ولی ما پا را از این هم فراتر می‌گذاریم و نسخه‌ی latin با وزن ۳۰۰ را دانلود می‌کنیم.  که نتیجه فایلی با نام iEjm9hVxcattz37Y8gZwVbq2HNNMYxbOC04F0CNdzo8.woff2 است. حالا با دستور زیر در ابونتو آن را به کد base64 تبدیل می‌کنیم:

base64 iEjm9hVxcattz37Y8gZwVbq2HNNMYxbOC04F0CNdzo8.woff2

نکته: سایت‌هایی نیز برای اینکار وجود دارد، که اگر از ویندوز استفاده می‌کنیم می‌توانید فایل‌تان را در آنها آپلود کنید و کد base۶۴ را دریافت کنید.

حالا به ابتدای فایل style کد زیر را بجای ایمپورت قبلی می‌گذاریم و مسلما کد base64 فونت را هم قرار می‌دهیم که من بخاطر طولانی بودنش اینجا نگذاشته‌ام.

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  src: local('Cormorant Garamond Light'), local('CormorantGaramond-Light'), url(data:application/x-font-woff;charset=utf-8;base64,محل کد base64) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

و این جا می‌تونید دقیقا ببینید که چه اتفاقی افتاده و در تصویر زیر هم بهبود وضعیت gtmetrix به وضوح پیداست 🙂

 

 

حالا باید چنین کاری را با فایل‌های bg.png و avatar.jpg که برای faveicon استفاده می‌شه انجام بدیم و علاوه برآن؛ کل فایل style.min.css را هم کپی کنیم و داخل تکل style توی head فایل index.html قرار بدیم. و در نتیجه تنها فایل index.html برایمان باقی می‌ماند و در نتیجه تعداد requestهایمان هم به ۱ کاهش پیدا می‌کند و حالا فقط با minify کردن فایل index.html می‌توانیم به نسخه‌ی نهایی برسیم و نتیجه‌ی کارمان چیزی شبیه تصویر زیر خواهد بود:

 

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