آموزش سئو در مشهد

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

ما پوشه های دیگری مانند CSS ،JavaScript ،Images و Fonts داریم که مرورگر آنان‌را به یاروهمدم HTML به چیز مفیدی تبدیل نموده است.

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

آموزش سئو در مشهد

 

آموزش سئو مشهد

این فرایند معمولاً مسیر حیاتی ارائه (Critical Rendering Path) نامیده می شود و به این شکل به لحاظ می رسد:

1- HTML به درخت DOM (که تا قبل از اینً به آن اشاره کردیم) پردازش میشود.

2- CSS داخل CSS Object Model (CSSOM) تجزیه می گردد و به مرورگر می‌گوید چه گونه کلیه چیز استایل گردیده، رنگی، اندازه گیری گردیده و … می باشد.

3- CSSOM + DOM با هم آنچه را Render Tree می نامند، ایجاد می نماید.

4- دکورا سیون رخداد می افتد، یعنی جاییکه هر عنصر مبتنی بر آنچه در Render Tree هست، باطن ویوپرت مرورگر قرار می گیرد.

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

نکته : یک حقیقت جالب که به وسیله مارتین کولر گازی از Google پدیدار شد این میباشد که Googlebot با نقاشی کردن پیکسل های یک برگه باعث صرفه جویی در وقت و منابع می‌شود.

آن‌ها داده ها ما یحتاج را بعداز چینش در چنگ دارا‌هستند.

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

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

بیشترین تأثیر آن در لود منابع است.

این عمل معمولاً بر عهده CMS یا این که JavaScript Framework میباشد تا به مرورگر یاری دهد زمان / چطوری / کیفیت بار گذاری منابع را الویت بندی نماید تا وبسایت سریع خیس اکران داده خواهد شد.

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

گوگل برای این قسمت یک راهنمای متمرکز بر پیشرفت دهنده و یک راهنمای دیگر برای بی آلایش کردن فرآیند نگارگری دارااست.

معیارهای لود تصویری

First Paint (FP): مرورگر هرچیزی را برای نخستین دفعه بار گذاری می نماید.

First Contentful Paint (FCP): مرورگر چیزی را از DOM (Document Object Model) ارائه می دهد، که میتواند متن، تصویر و غیره باشد.

First Meaningful Paint (FMP): مهم‌ترین ارکان بصورت بصری بار گذاری می‌شوند.

Largest Contentful Paint (LCP): مطرح ترین عنصر بالای مجموعه لود میشود.

Visually Complete: ورقه بصورت بصری بار گذاری میشود.

Speed Index: یک امتیاز احتساب گردیده برای بار گذاری تصویری که یک سری امتیاز دریک مجال لحاظ می گیرد.

Cumulative Layout Shift (CLS): اندازه گیری مقدار عناصری که در هنگام بارگذاری در viewpoint جنبش می نماید، یا این که کیفیت ثبات طرح.

دیدن بارگذاری بصری به یاور جدول waterfall

در بخش Summary در WebPageTest، اگرامکان ضبط را فعال نموده اید، بایستی یک ردیف Video در جدول اصلی با “نمای فیلم(Filmstrip View)” داشته باشید.

در‌این نما، خط قرمز‌رنگ در صدر با اسنپ شات های بصری در به عبارتی نقطه ای می‌باشد که خط قرمز رنگ در انتهای waterfall جای‌دارد.

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

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

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

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

در ذیل این نمودار داده ها مازاد مانند به کار گیری از CPU، پهنای باند، فعالیت در Browser Main Thread و تعامل وجود دارد.

تمامی این نمودارها مجدد به نوع دستگاه و نوع اتصال بستگی دارد.

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

مثلا، شاید بارگیری بیش تر از حد باشد، که پهنای باند را در بالاترین نقطه نگه میدارد.

یا این که شاید یک اسکریپت وجود دارااست که از آحاد CPU برای یک دستگاه خاص به کار گیری می نماید، که میتواند منجر مکث خواهد شد.

Filetype CSS

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

بیشتر طریق ها دارنده تریدآف هایی می‌باشند و بعضی از آنان برای اجرای و مراقبت پیچیده خیس هستند.

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

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

این بدان معناست که مجدداً بارگیری نمی شود، و بازدیدهای آینده باید سریع خیس باشند.

اکثر ابزارهای سرعت در او‌لین نگاه آزمایش میشوند، بدین ترتیب بیشتر چیزی که در ابزاری مانند PageSpeed Insights می بینید، نماد دهنده استفاده کننده باراولی است که تنها یک شیت را مشاهده می نماید و خیر هر کس به یکسری برگه مراجعه می نماید یا این که اغلب به وب سایت شما مراجعه می نماید.

غرض شما باید سئو این نمای اولیه و اکران های آتی برای یوزرها باشد.

بارگیری CSS به طور همزمان

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

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

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

کاری که انجام می گردد بار گذاری CSS فارغ از مسدود کردن رندر میباشد (چون در‌این‌حالت‌‌، ما به مرورگر میگوییم این شیوه نامه برای چاپ است و درحقیقت برای این ورژن از ورقه وجود ندارد) و بعد از آن برای کل گونه های رسانه بعد از لود اعمال فرمایید (مواقعی که چاپ نمیشود)

بطور نمونه این:

تبدیل می توان به:

شما می‌توانید این را با همگی منابع CSS استعمال نمائید.

تریدفور یعنی یوزرها ممکن می‌باشد بعضی از فلشینگ ها / صورت سازی های دوباره را تجربیات نمایند چون برخی از ارکان شیت، گذشته اعمال شدن CSS نگارگری می شوند.

بدین ترتیب هنگامی CSS اجرا می گردد، کاغذ ممکن میباشد جای و کیفیت اکران موضوعات را تغییر و تحول دهد ..

Inline

Inline کد موردنیاز برای رندر کردن محتوای فراتر از مجموعه را دربر میگیرد و به مکان یک فولدر مستقل، آن را با جواب HTML تحویل میدهد.

این به صورت معمول سریع ترین شیوه برای کوتاه کردن برهه زمانی مجال ما یحتاج برای ارائه نمای اول خواهد بود.

بی آلایش ترین طرز برای پندار کردن در این باره این میباشد که شما در درحال حاضر بدست آوردن بخش های اصلی فولدر های CSS و JS می‌باشید و مستقیما آن ها را داخل HTML قرار می دهید.

بارگذاری HTML اول پاره ای ارتفاع می کشد، اما ارائه برگه میتواند پیش از همه پوشه های دانلود گردیده رخداد بیفتد.

احتمالاً Inlining سریع ترین رندر را در بارگیری صفحه نخستین به شما می دهد، ولی ترید آف ها به با ذخیره سازی یار می‌باشند.

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

اما در‌حالتی که برای هر کاغذ کد وارد کردید، این بدان مضمون‌ میباشد که صفحات آجل نیز کد مازاد دارند.

این یک روش توسعه یافته میباشد و نیازمند به کار گیری از نیروی کار بخش سرویس ها می‌باشد، ولی شما می‌توانید هم inlining و هم خاطر پنهانی داشته باشید.

همپا با تشکیل داد سایر CSS، این یک شرایط مناسب میباشد.

به خیال داشته باشید که می‌توانید کد CSS داخل خطی را خرد نمائید.

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

احتمالاً نمیخواهید همگی محتوا رادر آحاد فولدر ها بگنجانید.

تنها به محتوای اساسی inline دقت داشته باشید.

می‌توانید تک تک CSS و JS و حتی فونت ها و تصاویر را بصورت فنی بچسبانید، البته میخواهید با یک بارگیری کبیر HTML (که در آن اکثری از کد به کارگیری نمی‌شود)، به نقطه پایان برسید.

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

CSS های اصلی inline در مقیاس

شما جای این که این کار برای هر ورقه اجرا دهید، یک سیستم خودکار می خواهید.

این شاید منطقی باشد که فقط CSS را برای کاغذ اصلی در تم های وردپرس درج فرمائید چون این شیوه معمولا درمقایسه با صفحه های دیگر استایل صفحه های گوناگون تری داراست.

معمولا برای این شغل بعضا از پلاگین ها / ماژول ها / پکیج ها یا این که ورژن هایی از Critical یا این که Critical CSS وجود داراست.

این پکیج ها برای هر فعالیت taskrunner یا این که هر پکیجی که از آن‌ها به کارگیری می کنید مانند Grunt ،Gulp ،Webpack یا این که پوسته هایی مانند React ،Angular،Vue وجود داراست و حتی میتوانید آموزش های اختصاصی برای WordPress یا این که Drupal یا این که حتی صفحه ها دارنده کد دستی نیز پیدا کنید.

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

چندین نمونه:

Grunt:

https://github.com/filamentgroup/grunt-criticalcss

https://www.npmjs.com/package/grunt-critical-css

https://github.com/bezoerb/grunt-critical

Gulp:

https://github.com/addyosmani/critical

https://www.npmjs.com/package/gulp-critical-css

Webpack:

https://github.com/anthonygore/html-critical-webpack-plugin

https://github.com/GoogleChromeLabs/critters

https://github.com/anthonygore/html-critical-webpack-plugin

https://www.npmjs.com/package/critical-css-webpack-plugin

React:

https://www.npmjs.com/package/react-critical-css

https://github.com/addyosmani/critical-path-css-tools

https://github.com/sergei-zelinsky/react-critical-css

Angular:

https://github.com/addyosmani/critical-path-angular-demo

Vue:

https://github.com/anthonygore/vue-cli-plugin-critical

https://vuejsdevelopers.com/2017/07/24/critical-css-webpack/

Drupal:

https://www.fourkitchens.com/blog/article/use-gulp-automate-your-critical-path-css/

WordPress:

https://joe-watkins.io/javascript/inline-critical-css-with-wordpress/

Hand-coded:

https://www.sitelocity.com/critical-path-css-generator

https://jonassebastianohlsson.com/criticalpathcssgenerator/

Preload

چنانچه نمی‌خواهید CSS مهمی را بگنجانید، مورد دیگر استعمال از Preload میباشد.

Preload با گرفتن منابع لازم برای اکران سریع خیس شیت، رکوئست را زودتر در بارگذاری میاورد.

Preload تقدم مرورگر را برای میزان دارایی های از پیش لود گردیده تحت عنوان بالا انتخاب می نماید و آنان را به طور غیر هم زمان بارگذاری می نماید، به این ترتیب آن‌ها بازدارنده رندرینگ نمیشوند.

این زمینه در دامنه ها هم درستی می نماید.

مرورگر به هررکوئست برای یک پوشه حق تقدم می‌دهد.

فولدر های ضروری برای اکران فراتر از محتوای دسته، زودتر (در حق اولویت فراتر) بدست اورید و مواقعی غیرضروری در مراحل آتی ارائه دهید.

حق اولویت داده گردیده به فولدر ها را در تب کانال در Chrome Dev Tools قابل مشاهده می باشد. روی نوار راست کلیک کرده، مورد Priority را گزینش کرده و آن را تحت عنوان ردیف اضافه فرمایید.

آنچه ایفا خواهد اعطا کرد اینست که فایلی را که بعداً بارگیری آن شروع گردیده‌است، بگیرید و در اسرع وقت بارگیری نمائید.

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

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

این کار همینطور برای مرورگرهایی که از preload هواخواهی نمی کنند نیز پاسخ می‌دهد.

نمونه های کد:

گزینش فایل برای Preload

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

Devs اکثر اوقات این را بعد از تم نامگذاری می نماید، یا این که آن را “style” می نامد، یا این که بعضی اوقات آن را بعد از خویش سایت قرار می‌دهد.

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

شیت کانال را گشوده کرده و یک شیت را بارگیری فرمایید تا پوشه های درخواست گردیده را ببینید.

برای اضافه کردن آن‌ها به لیست بلاک میتوانید بر روی این موردها راست کلیک فرمائید.

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

زمانی یکی‌از این مفاد را اخذ میکنید که ظواهر ورقه را خراب می نماید، این نشان ای می‌باشد برای ارائه محتوای بالای گروه و این فایلی می باشد که می‌خواهید مجددا preload فرمائید.

آنچه که درباره preload بایستی بدانید:

1-شما نیاز به ossorigin روی اتومات ها دارید یا این که یک بار گذاری دوبل از پوشه را خواهید داشت.

2-شما هنوز به کال های پوشه نرمال برای JS + CSS احتیاج دارید، به این ترتیب آنها را حذف نکنید.

3-شما میتوانید یک فونت را از قبل بار گذاری نمایید حتی در‌صورتی‌که به یک پوشه دیگر مانند یک پوشه CSS فراخوانی شود.

4-مراقب باشید که چقدر preload میکنید. با بارگیری بیش تر از حد بخش اعظمی از فولدر ها می توانید به خلل بخوردید.

Server Push

این بخشی از مختصات HTTP / 2 (H2) بود.

این به سرور اذن میدهد پوشه را فارغ از درخواست تحویل دهد. بدین ترتیب به مکان زنجیره ای که ممکن می‌باشد HTML > CSS > Font باشد، به این سایت اذن می‌دهد که بگوید اینجانب به آن فونت نیاز دارم، آن را ارسال نمایید.

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