سبد خریدتان در حال حاضر خالی است!
دسته: HTML
-
کش سایت، بهینه سازی سرعت بارگزاری، وردپرس
در هر درخواست کاربر و بازدید کننده سایت فرآیندهای مختلفی صورت می پذیرد تا سایت برای مرورگر بازدید کننده ارسال شود، از کوئری ها و درخواست های پایگاه داده تا خوانش محتوای HTML و استایل و فراخوانی فایل های جاوااسکریپت، این فرآیندها در هر درخواست تکرار می شوند و احتمالاً ثمره ی بسیاری از تکرارها عین هم هستند، هر فرآیند زمان مختص به خود را در بارگزاری دارد، اما چه می شود اگر نتیجه ی فرآیند ذخیره شود و در درخواست های بعدی بدون سیر مراحل زمانبر پردازش و رجوع به پایگاه داده به صورت مستقیم از مخزن ذخیره برای کاربر ارسال شود.
منظور از کش در بارگزاری سایت ذخیره و آماده سازی بخش های پر مصرف سایت است تا بدون پردازش مجدد در درخواست کاربر و به صورت آماده به مرورگر کاربر ارسال شوند.
در وردپرس به منظور مجهز کردن سایت به کش دست کم دو سر فصل مستقیم کش موجود است، کش صفحات به صورت HTML و کش آبجکت که خود فرآیندهای خوانش از پایگاه داده را جهت استفاده ی مجدد کش می کنند، در ادامه به پلاگین های مربوط به هر بخش پرداخته شده است.
کش HTML
به منظور مجهز سازی سایت به کش اچ تی ام ال پلاگین های مختلفی برای سیستم مدیریت محتوای وردپرس موجود است اما آنچه به نظر بی دردسر، سریع در نصب و سریع در تخلیه ی کش است
WP Super Cache
این افزونه که توسط شرکت Automattic که متشکل از بنیانگذاران وردپرس است ساخته شده متمرکز بر کش HTML است و نتیجه ی فرآیندهایی که منجر به تشکیل برگه های وبسایت می شود را ذخیره کرده و در هر درخواست برای کاربر سِرو می کند،
کش Object
همانطور که مختصری پیشتر اشاره شد در خوانش محتوا از پایگاه داده، چه محتوای قید شده به عنوان نوشته چه محتوایی که شامل تنظیمات یا ساختار برگه های سایت می شود، هر بار آبجکتی تعریف شده و با PHP از پایگاه داده فراخوانی می شود، اما هست پلاگینی که این فرآیند را کش می کند و در عوض فرآیند درخواست، کش آبجکت را برای سیستم سِرو می کند که ثمره ی آن رسیدن نتیجه با سرعت بیشتر به دست کاربر است.
Docket Cache – Object Cache Accelerator
افزونه ی داکت کش کار کش کردن فرمانهای کوئری و درخواستهای پایگاه داده را به انجام می رساند تا در هر بار لُود سایت فرآیند خوانش کوئری های تکراری از طریق اسکریپت وردپرس انجام نگیرد و نتیجه ای آماده در اختیار سیستم وردپرس برای سِرو برای کاربر در دسترس باشد.
کش سایت تاکتیک مناسبی برای افزودن سرعت بارگزاری سایت است با اینحال ضروری است پس از هر بار تغییر در ساختار طرح از جمله تغییر در اچ تی ام ال(HTML) و یا استایل(CSS) سایت، کش سایت پاکسازی شود تا طرح قبلی به جای طرح نو به نمایش در نیاید، با اینحال و با پاک شدن کش گاهی مشاهده می شود که مرورگر طرح قبلی را به جای طرح نو به نمایش می گزارد که دلیل این موضوع کش شدن برگه ی سایت از جانب مرورگر است که با زدن کلیدهای کنترل و اف ۵(Cntrl+F5) در مرورگر موضوع بر طرف می شود اما اگر ما کاربر نباشیم و بخواهیم برای مرورگر کاربر و بازدید کننده ضروری کنیم که کش را پاک کند و نسخه ی جدید را بارگزاری کند چاره چیست، برای این موضوع نیز می توان فرمان را در هیدر اچ تی ام ال برای زدودن کش مرورگر کاربر ارسال کرد و یا از پلاگینی در مخزن وردپرس بهره برد تا کش مرورگر بازدید کننده را پاک کند و مرورگر ورژن جدید سایت را لُود کند. در ادامه به معرفی این افزونه پرداخته شده.
Prevent Browser Caching
افزونه جلوگیری از کش مرورگر حالات مختلفی را برای ارسال دستور برای پاک کردن کش مرورگر بازدید کننده پشتیبانی می کند، از حالت حذف کش در هر درخواست لود سایت تا حذف دستی تنها برای اولین درخواست لود سایت.
کش سایت از عوامل موثر در بارگزاری سریع سایت است که بر سئو و ارتقای سایت تاثیر گذار است، در نوشته سئو و تاکتیک های آن و بهینه سازی سرعت بارگزاری سایت به این موارد پرداخته شده است.
-
مینیفای و کمباین فایل های استاتیک همچون استایل و جاوا اسکریپت
کمباین(Combine) و مینیفای(Minify) فایل های ثابت نظیر استایایل(CSS) و جاوااسکریپت(JS). به حداقل رساندن حجم فایل ها مینیفای و یکی سازی فایلها کمباین است.
وردپرس معتقد است کوچکترین واحد های استایل نیز مناسب است تابع خود را داشته باشند و به صورت پی اچ پی تعریف شوند اما گوگل مانعی نمیبیند به صورت هارد کد(Hardcode) در بتن کد، استایلی کوتاه به آن افزوده شود.
مینیفای(Minify)
مینیفای، در خصوص بهینه سازی فایل های استاتیک در بخش استایل و جاوا اسکریپت در مورد مینیفای(Minify) هدف حذف چند مورد است تا ماشین سریع تر محتوای فایل را خوانده و ترتیب اثر دهد، به عنوان مثال حذف خطوط تا کدها پشت سر هم در یک خط نوشته شوند و یا حذف فاصله تا تمامی کدها به هم چسبیده شوند یا حذف توضیحاتی که میان استانداردهای کامنتینگ نوشته می شود و تاثیری در کد ندارند و تنها یاد آوری و شرحی برای کد نویس هستند تا در مراجعات بعدی سریع تر با کد ارتباط بگیرد، خطوط و فاصله ها در کدها ایجاد می شوند تا کد نویس راحت تر بتواند آنها را بخواند.
برای مینیفای فایل های استایل و جاوا اسکریپت احتمالاً راه های مختلفی باشد، به عنوان مثال ایجاد دو فایل از یک محتوا که یکی مینیفای شده و دیگری جهت خواندن توسط کد نویس و ویرایش است، اما اینکه به صورت دستی هر بار فاصله ها و خطوط و کامنتها حذف شوند به نظر امری فاجعه بار است، برای این موضوع یک راه استفاده از برخی از سایت ها است که به صورت آنلاین مینیفای را به انجام می رسانند، با جستجوی ساده در گوگل
Minify CSS online
Minify JS online
به راحتی چندین سایت برای مینیفای یا رساندن فایل به حداقل حجم ممکن وجود دارد که می توان بهره برد اما این موضوع نیز مشکل یا مشکلات خود را دارد و باید پس از هر ویرایش و تغییر، نتایج را به صورتی دستی به سایت برد و فایل مینیفای شده را به صورت دستی در سایت گنجاند، اما اگر از سیستم مدیریت محتوای وردپرس بهره می برید کار سر راست و آسان خواهد بود، هستند افزونه هایی که در سایت کار مینیفای را انجام می دهند و نتیجه را به صورت خودکار در سایت بارگزاری می کنند.
کمباین(Combine)
کمباین، در طرف دیگر بهینه سازی سایت فایل های استاتیک همچون استایل و جاوا اسکریپت موضوع کمباین یا ترکیب و یکی سازی فایل ها مطرح است، به عنوان مثال در برگه HTML یا در صفحات وردپرس ممکن است ما از پلاگین های مختلفی بهره ببریم که احتمالاً هر یک استایل و جاوااسکریپت خود را دارند و برای بارگزاری هر یک از آنها یک درخواست HTML مجزا صادر می شود که بارگزاری سایت را سنگین می کند که در نتیجه سرعت لُود سایت پایین می آید، در موضوع کمباین تمامی فایلهای استایل در یک فایل استایل ذخیره می شوند و آن تک فایل استایل که مجموع تمامی استایل ها است در سایت بارگزاری می شود، در خصوص جاوا اسکریپت هم شیوه ی کار به همان ترتیب فایل استایل است و تمامی فایلهای جاوااسکریپت در یک فایل ذخیره شده و بارگزاری می شوند و در نتیجه تنها با یک درخواست اچ تی ام ال(HTML) تمامی فایلهای استایل یا جاوااسکریپت بارگزاری می شود.
برای بهینه سازی فایل های استاتیک در وردپرس پلاگین های مختلفی موجود است که برخی تنها امر مینیفای یا کمباین را به انجام می رسانند و برخی هر دو کار مینیفای و کمباین را یکجا پشتیبانی می کنند. در ادامه به معرفی پلاگین در این خصوص پرداخته شده است.
افزونه Autoptimize
این افزونه امکانات مختلفی را در اختیار می گذارد همچون کش HTML یا لود تصاویر در صورت نیاز اما آنچه مد نظر ماست در این بخش مینیفای و کمباین فایلهای استایل و جاوااسکریپت است که این افزونه به خوبی به انجام می رساند و البته خالی کردن کش فایل های استایل و جاوااسکریپت نیز در آن به سادگی با کلیک بر روی لینک موجود در ادمین بار وردپرس میسر است.
در خصوص اهمیت مینیفای و کمباین فایل های استایل در سرموضوع سئو و تاکتیک های آن در بخش و نوشته بهینه سازی سرعت بارگزاری سایت سخن به میان آمده است.
-
تگ های HTML، ساختار چینش عناصر صفحه وب
صفحات وب در ظاهر آنچه ما می بینیم اغلب ترکیبی از چند زبان برنامه نویسی و استایل هستند، چینش عناصر صفحه و تعریف های اولیه توسّط HTML ایجاد می شود و CSS به آن رنگ و استایل می بخشد.
تگ های اچ تی ام ال(HTML) را می توان ظروفی در نظر گرفت که می توانند انواع داده را همچون نوشته، عکس یا ظرفی دیگر در خود جای دهند.
به عنوان مثال تگ div
<div>
اغلب به عنوان ظرف برای چینش دیگر عناصر است یا تگ P در خود پاراگراف نوشته را جای می دهد همینطور تگ img که حامل تصویر است، در این میان تگ های h1 تا h6 وظیفه ی حمل عناوین نوشته را بر عهده دارند که بر اساس اولویت و اهمیت تیتر از h1 یعنی با اهمیت ترین تا h6 که کم اهمیت ترین عنوان در صفحه است استفاده می شوند، در هر صفحه تنها یک تگ h1 می تواند حضور داشته باشد اگر بخواهیم استاندارد را رعایت کنیم، البته عدم رعایت استاندارد باعث عدم بارگزاری صفحه نمی شود ولی احتمالاً در سئو و رتبه ی سایت موثر است همینطور احتمال دارد زبان برنامه نویسی جاوا اسکریپت را دچار مشکل کند، اغلب در سایت ها تا تگ h3 یا نهایتاً h4 استفاده می شود.