Կայքէջը բեռնվելու կամ բացվելու արագությունն այսօր դիտվում է որպես որոնողական առաջխաղացման կարեւոր գործոն:
Ինտերնետում մենք դառնում ենք խիստ անհամբեր: Մենք չենք ցանկանում դանդաղ բացվող ինչ-որ էջի վրա ժամանակ կորցնել:
Նույն կերպ, գուգլբոտը կայքերը զննելու համար ունի խիստ սահմանափակ ժամանակ, եւ չի կարող «անվերջ սպասել», մինչեւ կայքէջը լիարժեք կբեռնվի եւ հասանելի կլինի ինդեքսավորման համար:
Կայքէջի լիարժեք բեռնվելու արագությունը կախված է բազմաթիվ գործոններից: Նախորդ հոդվածում դրանք մանրամասն ներկայացվել են:
Այս հոդվածում կանգ կառնեմ դրանցից մեկի՝ կայքէջի «ջավասկրիպտային ծանրաբեռնվածության» եւ այն նվազեցնելու մեթոդների վրա:
Օպտիմալացնելով կայքէջի «ջավասկրիպտային հագեցվածությունը», մենք կարող ենք զգալիորեն կրճատել էջի բեռնումը: Ավելին, եթե էջի դանդաղ բացվելու հիմնական պատճառը ջավասկրիպներն են, ապա միայն ջավասկրիպտները օպտիմալացնելով հնարավոր կլինի հասնել կայուն արդյունքի:
JS օպտիմալիզացում. ինչի՞ց սկսել
Իհարկե, նախ անհրաժեշտ է գնահատել Ձեր կայքի բեռնման կամ բացվելու արագությունը: Գուգլը առաջարկում է օգտակար առցանց գործիք: Ինքս ժամանակ առ ժամանակ օգտվում եմ նաեւ Web Page Analyzer եւ Pingdom Tools օնլայն գործիքներից:
Հաջորդ քայլը Ձեր էջի HTML կառուցվածքը զննելն է:
Կայքէջում ջավասկրիպտ կարելի է ներդնել երկու ճանապարհով՝
1) արտաքին, երբ տվյալ էջից «կանչվում է» արտաքին ջավասկրիպտային ֆայլը (կամ ֆայլերը), եւ
2) ներքին կան ներդրված, երբ տվյալ էջի HTML կառուցվածքում անմիջականորեն տեղադրվում է ջավասկրիպտային տողերը:
Սովորաբար, էջի HEAD-ից (<head> եւ </head>-ի միջեւ) «կանչվում են» մեծ ջավասկրիպտային արտաքին ֆայլերը, իսկ ավելի փոքր ջավասկրիպտային կոդերն ուղղակիորեն ներդրվում են կամ HEAD-ում, կամ էլ BODY-ում (<body> եւ </body>-ի միջեւ): Ավելի հազվադեպ, արտաքին JS ֆայլերի հղումները կարող են ներդրվել էջի BODY-ում:
Ինչն է ընկած JS օպտիմալացման հիմքում
Պարզապես նկատի ունեցեք, որ յուրաքանչյուր էջ բրաուզերում բացվելուց առաջ, նախ «ընթերցվում է» HEAD-ում (<head> եւ </head>-ի միջեւ) մուտքագրված տողերը, եւ նոր միայն՝ համակարգչի բրաուզերում պատկերվում է BODY-ով նախագծված էջը:
Այսինքն, եթե HEAD-ում կան բազմաթիվ արտաքին JS ֆայլերի հղումներ, բրաուզերը նախ «կարդում է» բոլոր այդ ֆայլերը (որոնք կարող են ունենալ ընդհանուր բավականին մեծ չափս), եւ նոր միայն «իջնում ներքեւ»՝ դեպի BODY:
Իսկ սա նշանակում է, որ ինչքան HEAD-ը ծանրաբեռնված լինի, այդքան կձգձգվի էջի «արտաքին տեսքի բացվելը»:
JS օպտիմալիզացման ունի 2 հիմնական դրույթ:
1. Հնարավորինս խուսափեք ավելորդ եւ էջին արժեք չտվող ջավասկրիպտներից:
2. Էջի բացվելու հետ կապ չունեցող ջավասկրիպտները տեղափոխեք դեպի նույն էջի ամենաստորին տողերը՝ փակող </body>-ից առաջ:
Առաջարկվող մեթոդին դիմելիս սխալներից զերծ մնալու համար, անհրաժեշտ կլինի հաշվի առնել նաեւ հետեւյալ միմյանց փոխլրացնող կետերը:
1. էջի HEAD-ում պետք է տեղադնել բոլոր այն արտաքին JS ֆայլերի հղումները կամ ներդրված JS կոդերը, որոնք ուղղակիորեն մասնակցում են էջի բեռնմանը/բացվելուն:
2. էջի BODY-ում (</body>-ից առաջ) կարելի է տեղադրել բոլոր այն JS ֆայլերի հղումները կամ ներդրված JS կոդերը, որոնք չեն մասնակցում էջի բեռնմանը/բացվելուն:
Որպես օրինակ, դիտարկեմ մեր բլոգը, որի HTML կոդերում կտեսնեք բազմաթիվ ջավասկրիպտներ:
- Էջի HEAD-ում թողել եմ միայն jquery.min.js ֆայլի հղումը, իսկ մնացածը (custom.js, optin.js, jquery.tools.min.js, jquery.scrollTo-min.js, bad_behavior_2.0.43.js, jquery.lazyload.mini.js) տեղափոխել եմ BODY, այն էլ՝ վերջին </body>-ից առաջ:
- Գլխավոր էջի «սլայդ-շուուն» ապահովող ջավասկրիպտները (ինչպես արտաքին jquery.nivo.slider.pack.2.5.1.js-ի հղումը, այնպես էլ ներդրված $(window).load(function()-ն ապահովող սկրիպտը) «անհետանում են» մյուս էջերում. ինչո՞ւ դրանք թողնել հոդվածների էջում, եթե այնտեղ այս JS-ները «անելիք չունեն»:
- Ֆեյսբուքյան եւ թվիտերային ջավասկրիպտները հայտնվում են միայն առանձին հոդվածների էջում. գլխավոր էջը մաքրված է դրանց «ծանրաբեռնող առկայությունից»:
Կարծում եմ, այս օրինակներից հետո JS օպտիմալացման միտքն ու էությունը Ձեզ համար դարձավ հասկանալի:
Հարցեր լինեն՝ խնդրեմ, մեկնաբանեք:
Ցանկալի կլիներ նաեւ լսել Ձեր փորձի մասին:
Աղբյուրը. e-armenians.com
Հեղինակի մասինՈղջույն, ես այս բլոգի հեղինակն եմ: Ուրախ կլինեմ, եթե դուք բաժանորդագրվեք բլոգի գրառումներին և ընթերցեք իմ էլ. գրքերը:
Մեր բլոգում Artur-ը գրել է 583 հոդված:
Եթե հավանեցիր այս հոդվածը, ապա միացիր մեր 309 ընթերցողներին և ստացիր անվճար էլ. ծանուցումներ
{ 0 մեկնաբանություն… ավելացրու նորը }