ვაგრძელებ, ახლა წინ მაქვს კიდევ ერთი წერტილი, რომელიც გუგლმა შემომთავაზა: ამოიღე JavaScript და CSS კოდი გვერდიდან, რომელიც ბლოკავს ჩვენებას. ახლა შევეცდები გავარკვიო რა არის აქ ზედმეტი და როგორ წავშალო არასაჭირო JavaScript და CSS?
შეგახსენებთ, რომ მე ვაკეთებ ტესტებს ამ სერვისით: სადაც მომცეს კონკრეტული რჩევა JavaScript-თან და CSS-თან დაკავშირებით:
როგორც ხედავთ ეს ყველაზე დიდი პრობლემა მაქვს, 8 სკრიპტი ერთდროულად იტვირთება და ამის გამო პირველი ეკრანი არ იტვირთება ისე სწრაფად, როგორც მე მინდა. ასევე არის 10 css ფაილი, რომლებიც ასევე არ არის ოპტიმიზირებული. აბა, მოვაგვაროთ პრობლემა!
პრეტენზიები ამ საკითხთან დაკავშირებით დაახლოებით ასეთია:
წაშალეთ JavaScript კოდი, რომელიც ხელს უშლის ჩვენებას:
- https://prostolinux.ru/...-includes/js/jquery/jquery.js?ver=1.10.2
- https://prostolinux.ru/...s/jquery/jquery-migrate.min.js?ver=1.2.1
- https://prostolinux.ru/...query-ui-1.8.10.custom.min.js?ver=1.8.10
- https://prostolinux.ru/...ial-textboxes/js/wstb.js.php?ver=3.10.60
- https://prostolinux.ru/wp-includes/js/tw-sack.min.js?ver=1.6.1
ახლახან ვიპოვე საინტერესო გამოსავალი: function.php-ში უნდა ჩავსვათ კოდი, რომელიც ბრძანებს იმ სკრიპტებს, რომლებიც გვჭირდება, რომ არ ჩავტვირთოთ დაუყოვნებლივ:
ფუნქცია jquery_in_footer() ( wp_register_script('tie-tipsy', get_template_directory_uri() . '/js/jquery.tipsy.js', array ('jquery')); wp_register_script ('tie-easing', get_urimplate', get_urimplate js/jquery.easing.1.3.js', array('jquery')) ;)
მაგალითში დამატებულია ორი სკრიპტი, მაგრამ ვამატებთ იმდენს, რამდენიც გვსურს და ისეთებს, რომლებიც ანელებს გვერდის ჩატვირთვას. მე შევეცადე გამომეყენებინა ეს გამოსავალი - ეს არ გამომივიდა, იქნებ რამე არასწორად გავაკეთე?
თავად Google გვირჩევს სკრიპტში async ატრიბუტის ჩასმას, რაც მის ჩატვირთვას ასინქრონულს გახდის. მაგრამ ეს გამოსავალი შესაფერისია მხოლოდ გარე სკრიპტებისთვის, მაგალითად, ამ ასინქრონული ატრიბუტის ჩასმა შესაძლებელია Yandex Direct სარეკლამო სკრიპტში, თუ თქვენი რეკლამა გამოჩნდება პირველ ეკრანზე. Yandex-საც აქვს ასინქრონული კოდი, მაგრამ ამან პრობლემები შემიქმნა - თუ ერთი ბლოკი ასინქრონული დატვირთვითაა და მეორე არა, მაშინ მხოლოდ ერთი გამოჩნდება. მაგრამ ახლა ამაზე არ არის საუბარი...
ამ გზით დანამატების ოპტიმიზაცია რთულია; თქვენ უნდა შეხვიდეთ თითოეული მოდულის კოდში და ჩაწეროთ მასში ეს ატრიბუტი ან მისი ალტერნატივა. მე არ ვარ პროგრამისტი და არ გავაკეთებ ამას. გარდა ამისა, თუ მუდმივად განაახლებთ დანამატებს, განახლების შემდეგ მთელი თქვენი სამუშაო დაიკარგება.
ჩემდა გასაკვირად, ვიპოვე ამ საკითხის კიდევ ერთი, ძალიან მარტივი გამოსავალი - დავაყენე Asynchronous Javascript მოდული. ინსტალაციის შემდეგ მივიღე შემდეგი შედეგი:
როგორც ხედავთ, დარჩა მხოლოდ ერთი სკრიპტი და ეს არის თავად მოდულის სკრიპტი. ინსტალაციის შემდეგ, მე პირადად არ მქონია პრობლემა საიტის თემის ჩვენებასთან დაკავშირებით, მაგრამ თუ თქვენ გაქვთ რაიმე სახის პრობლემა და გჭირდებათ რაიმე სკრიპტის დაუყოვნებლივ ჩატვირთვა, მაშინ მოდულის პარამეტრებში შეგიძლიათ დაამატოთ ის გამონაკლისებში:
ასე მარტივად წყდება პირველი პუნქტი, მაგრამ როგორც ხედავთ, ეს ჯერ კიდევ არ არის საკმარისი, საჭიროა css-ის ოპტიმიზაცია, როგორ გავაკეთოთ ეს?
შეგახსენებთ საჩივრების სიას:
გააუმჯობესეთ თქვენი CSS შემდეგ რესურსებზე:
- https://prostolinux.ru/...wp-special-textboxes.css.php?ver=3.10.60
- https://prostolinux.ru/...plugins/wp-ds-blog-map/wp-ds-blogmap.css
- https://prostolinux.ru/...t/themes/rockwell_new/rockwell/style.css
იდეალურ შემთხვევაში, თქვენ უნდა გააკეთოთ ეს: აიღეთ ყველა მონაცემი ამ css ფაილებიდან და გადაიტანეთ ისინი მთავარ stile.css-ზე და გამორთეთ მათ მიმართ მოთხოვნა თავად დანამატებში. მაგრამ, როგორც გესმით, ეს გრძელი და დამღლელი ამოცანაა, სავსეა მრავალი მარცხით. შესაძლოა, მომავალში გავაკეთო ეს, მაგრამ ჯერჯერობით ამდენი დრო და გამოცდილება არ მაქვს.
პრობლემის მოგვარება შეგიძლიათ მოდულის დაყენებით, რომელიც თავისთავად აერთიანებს ყველა სტილს ერთ ფაილში. მე ვერ ვიპოვე დანამატი, რომელიც მხოლოდ ამ ფუნქციას შეასრულებდა, ამიტომ გეტყვით მოდულის შესახებ, რომელიც ყველაფერს ერთდროულად აკეთებს, შლის სკრიპტებს და ოპტიმიზებს css-ს.
როგორ გავაუმჯობესოთ ყველაფერი ერთდროულად?გადავწყვიტე დამეყენებინა Autoptimize მოდული, რომელიც ოპტიმიზირებს როგორც სკრიპტებს, ასევე css-ს ერთდროულად. მოდულის ინსტალაციის შემდეგ, თქვენ უბრალოდ უნდა გადახვიდეთ მის პარამეტრებში და შეამოწმოთ ყუთები სწორ ადგილას:
ამის შემდეგ, Google Page Speed აჩვენებს ამას:
სკრიპტები არ არის ჩატვირთული, მხოლოდ ორი css ფაილი, რომელიც მოიცავს ყველა სტილს და ყველა სკრიპტი გადატანილია ქვედა ზონაში. თუ ახლა გადახედავთ გვერდის საწყის კოდს, მაშინ არის ოპტიმიზებული ფაფა, რომელსაც ბოთლის გარეშე ვერ გაერკვევით.
თავიდან მეგონა, რომ ეს დანამატი სრულად ვერ მოაგვარებდა ჩემს პრობლემებს, მაგრამ, როგორც აღმოჩნდა, ეს იმიტომ მოხდა, რომ მე მისი სრულად კონფიგურაცია არ მქონდა! ყუთების სწორ ადგილას შემოწმების შემდეგ, მე მივიღე შესანიშნავი შედეგი! ყველა პრობლემა გაქრა! 
ამისათვის თქვენ უნდა დააჭიროთ ღილაკს ზედა ჩვენება გაფართოებული პარამეტრები და შემდეგ გამოჩნდება დამატებითი პარამეტრები. შემდეგი ელემენტები უნდა იყოს მონიშნული:
გსურთ HTML კოდის ოპტიმიზაცია?
გსურთ JavaScript კოდის ოპტიმიზაცია?
ეძებთ სკრიპტებს მხოლოდ ? (მოძველებულია)
გსურთ თქვენი CSS კოდის ოპტიმიზაცია?
ჩართულია ყველა CSS?
შეინახეთ აგრეგირებული სკრიპტი/css როგორც სტატიკური ფაილი
ამის შემდეგ, მართალია, მოდულის, რომელიც აფიქსირებს ვიჯეტს, შეწყვიტა მუშაობა, მაგრამ ეს საერთოდ არ არის პრობლემა, საიტის ჩატვირთვის სიჩქარე გაცილებით მნიშვნელოვანია. და კიდევ უფრო მნიშვნელოვანია ძია გუგლის სიამოვნება...
ასევე მინდა აღვნიშნო ერთი ნიუანსი: მე მაქვს ამ საიტზე ადაპტაციური შაბლონი და თუ გამოვიყენებ, მობილური ვერსიის ჩვენებისას დანამატი სრულად ვერ აღმოფხვრის ყველა პრობლემას. მობილური ვერსიის მოდულის ჩართვისას, შეცდომები არ რჩება. მე კიდევ ერთხელ დავრწმუნდი, რომ საპასუხო დიზაინი უკეთესია ვიდრე საპასუხო.
კიდევ ერთი მსგავსი მოდული არის WP Minify Fix, ის იგივეს აკეთებს, მაგრამ მე ნაკლებად მომეწონა, ან შეიძლება უბრალოდ ბოლომდე არ მესმოდა.
მესმის, რომ იდეალურია ამ ყველაფრის გაკეთება პლაგინების გარეშე, ხელით, მაგრამ ძალიან გრძელი და დამღლელი და ნამდვილად არ ღირს, რადგან 100 ქულას რომც მიაღწიო, შენს საიტს არ მიიყვან სათავეში - საიტის ჩატვირთვა. სიჩქარე არის მხოლოდ ერთი ასობით რანგის ფაქტორიდან, გზა და საკმაოდ მნიშვნელოვანი. მაგრამ ჩვენ ყველაფერი უნდა გავაკეთოთ, რაც შეგვიძლია!
JavaScript და CSS Google PageSpeed კოდის წაშლა
ვერ იპოვე პასუხი? გამოიყენეთ საიტის ძებნა
თქვენ უნდა მოახდინოთ თქვენი HTML კოდის და კასკადური სტილის ფურცლების (CSS) ოპტიმიზაცია, რათა დააჩქაროთ თქვენი საიტის ჩატვირთვის პროცესი და მასზე განთავსებული შინაარსი. დროისა და ტრაფიკის დაზოგვა, ზოგადად, ოპტიმიზაციის შემდეგ დიდი ხნის შემდეგ, მნიშვნელოვანი იქნება, თუნდაც სიჩქარის ცვლილება გარეგნულად არც თუ ისე შესამჩნევი იყოს.
HTML კოდის ოპტიმიზაციაიმისათვის, რომ HTML კოდმა ხელი შეუწყოს საიტის სწრაფ დატვირთვას, ის უნდა აკმაყოფილებდეს რამდენიმე პირობას:
- იყავი მარტივი და ინფორმატიული. ვალიდობის შემოწმების შემდეგ, თქვენ უნდა გამოასწოროთ შეცდომები, რათა ბოტებს გაუადვილოთ მისი ანალიზი. კოდი ნათლად უნდა წარმოადგენდეს გვერდის სტრუქტურას.
- გვერდების ძირითადი კომპონენტები, როგორიცაა სათაურები, ინდექსები, ინფორმაციის ბლოკები უნდა იყოს ადვილად და სწრაფად იდენტიფიცირებული.
- კოდის არასაჭირო ინფორმაციისგან განთავისუფლება და ცალკე ფაილებში შენახვა (მაგალითად, შეგიძლიათ ამოიღოთ CSS და JS) გაზრდის ჩატვირთვის სიჩქარეს, რაც ასევე ამარტივებს ბოტების მუშაობას.
ამ პირობების მიღწევით, საიტი შეიძლება გახდეს უფრო სწრაფი, მოსახერხებელი და გაიზარდოს საძიებო სისტემის ბოტების მიერ მისი ინდექსირების ეფექტურობა.
კოდის შემცირება და CSS ოპტიმიზაცია
თქვენ შეგიძლიათ გაამარტივოთ საიტის კოდი მისი მოცულობის შემცირებით. ამისათვის თქვენ უნდა შეასრულოთ რამდენიმე ოპერაცია.
უპირველეს ყოვლისა, თავიდან უნდა იქნას აცილებული Flash ტექნოლოგიები, JavaScript, ჩარჩოები, სურათით წარმოდგენილი ტექსტი. ყველა შესაძლო ელემენტი უნდა იყოს დაფორმატებული ცალკეულ, გარე ფაილებში (მაგალითად, CSS და JS, როგორც ზემოთ აღინიშნა). სპეციალური დანამატები დაგეხმარებათ კოდის ოპტიმიზაციაში. მაგალითად, შეგიძლიათ დააინსტალიროთ Autoptimize მოდული, რომელიც ავტომატურად ახდენს HTML, CSS, JS კოდის ოპტიმიზაციას (თუ მონიშნავთ შესაბამის ველებს). აუცილებელია საიტის კომპეტენტური და მოსახერხებელი ნავიგაციის დაყენება, რომელიც გასაგები იქნება მომხმარებლებისთვის და სწორად აღიარებული საძიებო სისტემების მიერ. ეს გაზრდის საიტის სიჩქარეს, ჩატვირთვის ხარისხს და ინდექსირებას.
რაც შეეხება CSS-ის ოპტიმიზაციას, ეს შეგიძლიათ თავად გააკეთოთ ან მიანდოთ სპეციალურ რესურსს ან პროგრამას. ხელით ოპტიმიზაცია შრომატევადი და შრომატევადი პროცესია და შეიძლება გამოგრჩეთ რამდენიმე შეცდომა. ოპტიმიზაციის პროგრამა ან სერვისი უკეთესად აღმოფხვრის ხარვეზებს, მაგრამ შეიძლება დაარღვიოს ზოგიერთი ფუნქცია, რომელიც მუშაობდა საიტზე და გადამოწმების შემდეგ, შინაარსი შეიძლება არ იყოს სწორად ნაჩვენები, ამიტომ მათი მუშაობა უნდა გამოსწორდეს.
CSS სტრუქტურის ხელით გაუმჯობესების რამდენიმე გზა:
- წაშალეთ დამატებითი სივრცეები და ხაზების წყვეტები, რომლებიც გადატვირთავს CSS ფაილს და ართულებს რობოტების მუშაობას;
- მსგავსი ბრძანებების რამდენჯერმე გამეორების ნაცვლად დაწერეთ განზოგადებული თვისებები;
- კომენტარებში გამოიყენეთ ლაკონური, გასაგები აღწერილობები;
- არაჩვეულებრივი შრიფტები უნდა დაიწეროს სტილის და არა სურათების გამოყენებით;
- სურათებისთვის შექმენით alt და სათაური (თითოეული სურათისთვის განსხვავებული) ისე, რომ მათი შინაარსი ამოიცნონ საძიებო სისტემის ბოტებმა;
- გამოიყენეთ H1 ინსტრუმენტები სათაურებზე - და ასე შემდეგ, რათა სწორად ამოიცნონ ინდექსირების დროს;
- საკვანძო სიტყვებში ჩართეთ მხოლოდ ის საკვანძო სიტყვები, რომლებიც გამოიყენება გვერდზე, მინიმუმამდე დაიყვანოთ მათი რაოდენობა;
- გამოიყენეთ მრავალფეროვანი და ლაკონური მეტათეგები.
CSS და HTML ოპტიმიზატორები
თქვენ შეგიძლიათ მოხერხებულად და სწრაფად მოახდინოთ ოპტიმიზაცია პირდაპირ ბრაუზერში სპეციალური სერვისების გამოყენებით, მაგალითად:
- CleanCSS.com;
- CSS ოპტიმიზატორი;
- CSS კომპრესორი;
- CY-PR.com;
- მოდულის ავტომატური ოპტიმიზაცია.
SEO და IT სპეციალისტები გირჩევენ CleanCSS.com-ის გამოყენებას, რადგან ის საშუალებას გაძლევთ აირჩიოთ შეკუმშვის დონე დაბალიდან მაღალზე ან აირჩიოთ ინდივიდუალური პარამეტრები. ოპტიმიზაციის მაღალი და უმაღლესი დონის შემდეგ, საიტის კოდი თითქმის წაუკითხავ ფორმას იღებს და მასში ცვლილებების შეტანა თითქმის შეუძლებელი იქნება. ამიტომ, ჯერ უნდა გამოიყენოთ სტანდარტული ოპტიმიზაცია. თქვენ შეგიძლიათ აირჩიოთ შეკუმშვის რეჟიმები კონკრეტული შინაარსისთვის ან ინდივიდუალური პარამეტრების ოპტიმიზაცია: შრიფტების შეკუმშვა, სურათები, სივრცეების ამოღება.
CY-PR.com-ის რესურსსაც აქვს მსგავსი ოპტიმიზაციის ინსტრუმენტი, რომელიც ანათებს CSS სტრუქტურას 25-30%-ით, მაგრამ ოპერაციის შესრულების შემდეგ კოდით ფაილის გენერირების საშუალება არ არსებობს.
სხვა სერვისებს შეუძლიათ საკმაოდ რადიკალურად შეცვალონ კოდი, რათა საიტზე ზოგიერთმა ფუნქციამ შეწყვიტოს მუშაობა. ამიტომ, მათი დახმარებით უკეთესია მხოლოდ ლოკალური ცვლილებების შეტანა კონკრეტული საიტის პარამეტრებში.
ოპტიმიზაციის შემდეგ უნდა შეამოწმოთ საიტის ფუნქციონირება, დიზაინის სწორი ჩვენება და ჩატვირთვის სიჩქარე. ნორმალური სიტუაციაა, როდესაც საიტის გვერდები და მომხმარებლის პარამეტრები იტვირთება არაუმეტეს 3-5 წამისა.
იმისათვის, რომ შეამოწმოთ ოპტიმიზაციის ხარისხი და გაიგოთ, რამდენად ეფექტურად არის დაწერილი HTML კოდი, შეგიძლიათ გამოიყენოთ ისეთი სერვისები, როგორიცაა:
- optimization.com;
- SEO საკონტროლო პორტალი;
- Firebug მოდული.
ეს ხელსაწყოები დაგეხმარებათ შეამოწმოთ ყველაფერი გაკეთდა თუ არა HTML კოდის რაოდენობის შესამცირებლად და მისი სტრუქტურის გასაუმჯობესებლად. SEO საკონტროლო სიის რესურსზე შეგიძლიათ შეამოწმოთ სია, რაც უკვე გაკეთდა ოპტიმიზაციისთვის და რა ჯერ არ გაკეთებულა და მონიშნოთ შესრულებული.
თქვენ შეგიძლიათ შეამოწმოთ საიტის კოდი შეცდომებზე ვალიდაციის სერვისების - ვალიდატორების გამოყენებით. კოდის ეფექტური გადამოწმება ხდება validator.w3c.org-ის გამოყენებით
თუ სისტემა უშვებს ხუთ ათასზე მეტ შეცდომას პირველი შემოწმების დროს, არ ინერვიულოთ. გარკვეული ხარვეზის გამოსწორების შემდეგ, თქვენ შეგიძლიათ ხელახლა გაუშვათ შემოწმება და გაცილებით ნაკლები იქნება შეცდომები, რადგან ერთი დეფექტი იწვევს სხვებს და როდესაც ის გამოსწორდება, ისინი გაქრება.
შესწორებული და ოპტიმიზებული კოდის მქონე საიტს აქვს ძიების შედეგებში მაღალი რეიტინგის უკეთესი შანსი, ვიდრე რესურსი გადატვირთული HTML კოდით, რომელიც შეიცავს შეცდომებს.
ეს არის CSS ფაილებში არასაჭირო ან ზედმეტი კოდის წაშლის პროცესი ფაილის ზომის შესამცირებლად, რათა გაზარდოს გვერდის ჩატვირთვის სიჩქარე.
აქ არის 10 CSS ოპტიმიზაციის ინსტრუმენტი, რომელიც დაგეხმარებათ სწრაფად და მარტივად მოაწყოთ და მოაწყოთ თქვენი CSS კოდი.
ჩვენ ყველას გვქონია პრობლემა, რომ დაველოდოთ გვერდის რენდერს, სანამ არ ჩაიტვირთება ყველა დანამატი და სტილი. ზოგჯერ მძიმე საიტებზე ყველა ფაილის ჩატვირთვას დიდი დრო სჭირდება. Critical Path CSS Generator სერვისის გამოყენებით შეგიძლიათ ამ პრობლემის გადაჭრა. ის საშუალებას გაძლევთ შექმნათ CSS კოდი ისე, რომ გვერდის გახსნისას მყისიერად იტვირთება ნაწილი ე.წ გაზეთის დასაკეცამდე (პირველ ეკრანამდე). ეს მეთოდი დადებითად მოქმედებს საძიებო სისტემის ოპტიმიზაციაზე.
გამარჯობა, ბლოგის საიტის ძვირფასო მკითხველებო. ჩვენ ვაგრძელებთ საიტის დაჩქარების შესაძლებლობის დეტალურ შესწავლას რეკომენდაციების დაცვით, რაც იძლევა რეალურ პრაქტიკულ რჩევებს შეცდომების გამოსწორების შესახებ.
მე უკვე დავწერე ამ ხელსაწყოს გამოყენებით გამოსახულების შეკუმშვის განხორციელების შესახებ, ახლა შემდეგი ნაბიჯი არის CSS და სკრიპტების ოპტიმიზაცია (javascript), რომელსაც შეუძლია სერიოზული და ხშირად გადამწყვეტიც კი გახდეს ვებსაიტის გვერდების ჩატვირთვის სიჩქარის გაზრდა. .
დღევანდელ სტატიაში მე აღვწერ ყველა პრაქტიკულ მოქმედებას ამ ასპექტთან დაკავშირებით და შევეცდები გავითვალისწინო ყველა შესაძლო ნიუანსი, რომელიც შეიძლება წარმოიშვას ეტაპობრივად მსგავსი ღონისძიებების განხორციელების პროცესში.
ამოიღეთ CSS კოდი და სკრიპტები გვერდის ზემოდან და დააკავშირეთ ისინი ერთ ფაილშიასე რომ, იმისთვის, რომ ზუსტად გავიგოთ, რა მოქმედებებს უნდა შეიცავდეს სტილისა და სკრიპტების ოპტიმიზაცია კონკრეტულად თქვენი საიტისთვის, უმარტივესი გზაა მიმართოთ ცნობილი PageSpeed ინსტრუმენტის სერვისებს, რაც სტატიის დასაწყისში აღვნიშნე.
სანამ გავაგრძელებ, ამის თქმა მინდა. ვებსაიტების მფლობელების დიდი უმრავლესობა იყენებს CMS () მათი პროექტებისთვის. სამწუხაროდ, არ არსებობს უნივერსალური ინსტრუქციები აუცილებელი მოქმედებების განსახორციელებლად აბსოლუტურად ყველა CMS-თან დაკავშირებით, რადგან თითოეულ მათგანს აქვს საკუთარი დახვეწილობა.
ჩვენ გავაანალიზებთ CSS და სკრიპტების ოპტიმიზაციის ყველა პრაქტიკულ ნიუანსს WordPress ბლოგის საფუძველზე (), რადგან ვებ რესურსის ეს ფორმა ერთ-ერთი ყველაზე პოპულარულია.
შემოწმების სისტემატიზაციისთვის და დროის დაზოგვის მიზნით, გონივრული იქნება აირჩიოთ ერთ-ერთი ყველაზე „დატვირთული“ გვერდი, რომლის მიმართაც შესრულებულია საიტზე არსებული სტილისა და სკრიპტების უმეტესობა (თუ აღმოფხვრის მთავარ შეცდომებს ეს, მაშინ დიდი ალბათობით დანარჩენები მიიღებენ მაღალ შეფასებას Paige Speed-ისგან).
ვინაიდან ჩვენ განვიხილავთ WP ბლოგს (ამ ტიპის საიტი ასევე შეიცავს ამ ვებ რესურსს), მე განვმარტავ, თუ რა ტიპის გვერდები ავირჩიე ტესტირებისთვის და საილუსტრაციო მაგალითებისთვის. საიდუმლო არ არის, რომ სტანდარტულ ბლოგზე, ძირითადი დატვირთვა მოდის პოსტების (სტატიების) გვერდებზე, რადგან ისინი შეიცავს ყველაზე დიდ რაოდენობას გადმოწერილი შინაარსის (მათ შორის სურათების), მომხმარებლის კომენტარებს და ასევე ექვემდებარება სხვადასხვა სახის გაფართოებებს.
მაგალითად, სტატიის გვერდებზე საიტი მუშაობს თავისი სტილითა და სკრიპტებით. და ზოგიერთ პოსტში ხშირად ვიყენებ Syntaxhighlighter Evolved-ის შესაძლებლობებს, რომლის წყალობითაც სხვადასხვა კოდის ულამაზესი ფრაგმენტები გამოსახულია ხაზგასმით.
სწორედ ამ გვერდებიდან შემოგთავაზებთ შესამოწმებლად და გაჩვენებთ შემდგომ ზომებს, რომლებიც მივიღე ხარვეზების აღმოსაფხვრელად. ასე რომ, ანალიზის გვერდზე შეიყვანეთ სასურველი ვებ გვერდის URL და რამდენიმე წამში მიიღებთ შედეგს. აქ არის გვერდის სიჩქარის აღმოჩენილი შეცდომები სტილებსა და სკრიპტებთან დაკავშირებით:
პირველ რიგში, მოდით გადავხედოთ Paige Speed-ის პირველ რჩევას სკრიპტებთან დაკავშირებით, კერძოდ: „ამოშალეთ დაბლოკვის JavaScript კოდი“:
//site/wp-includes/js/jquery/jquery.js?ver=1.12..min.js?ver=1.4..js?ver=4.8.2
Page Speed გვირჩევს, რომ JavaScript-ის კოდები, რომლებიც პასუხისმგებელნი არიან დამატებით ფუნქციებზე, უნდა შესრულდეს გვერდის ზედა ზონაში ელემენტების გაფორმების შემდეგ, რაც დააჩქარებს მის ჩატვირთვას.
პირველი ორი სტრიქონი, რომელიც ეხება ბიბლიოთეკის გამომავალს და მესამე, რომელიც ასახავს ზემოთ ნახსენები Subscribe to Comments მოდულის სკრიპტის მოქმედებას, ზუსტად აუცილებელია ასეთი ფუნქციონირების უზრუნველსაყოფად. ამიტომ, მიზანშეწონილია ამ რესურსების ბმულების განთავსება HTML კოდის ბოლოში. მაგრამ შაბლონების მარტივი ხელით რედაქტირება () აქ საკმარისი არ არის.
აღვნიშნავ, რომ ადრე Page Speed, მისი ანალიზის შედეგებზე დაყრდნობით, ხშირად გასცემდა ცალკეულ რეკომენდაციას სკრიპტებისა და სტილის შერწყმისთვის. თუ სწორად გავიგე, ახლა გვერდის რეიტინგისას ასეთი რჩევა პირდაპირ არ არის, მაგრამ რა თქმა უნდა იგულისხმება.
ფაქტია, რომ სხვა ინსტრუმენტებთან ტესტირებისას საიტის ვებ გვერდების ჩატვირთვის დროის დასადგენად, ოპტიმიზაციის ეს მიმართულება ერთ-ერთი ყველაზე ეფექტური და სავალდებულოა, თუ, რა თქმა უნდა, ეს არ აზიანებს საიტის ფუნქციონირებას.
ამიტომ, სკრიპტებთან და სტილებთან დაკავშირებით, ჩვენ შევასრულებთ ზომების მთელ შესაძლო კომპლექტს (მათ შორის არა მხოლოდ მათი ამოღება სათავე ზონიდან, არამედ შემდგომში გაერთიანება ერთ საერთო ფაილში). ამისათვის WordPress-ს აქვს რამდენიმე ფუნქცია, რომელიც ასრულებს შემდეგ დავალებებს:
- wp_deregister_script, wp_deregister_style— გააუქმებს სტილებს და CSS ფაილებს, შესაბამისად;
- wp_register_script, wp_register_style— აღრიცხავს სკრიპტებს და სტილის ფაილებს;
- wp_enqueue_script, wp_enqueue_style— აკავშირებს სკრიპტებსა და CSS-ს მუშაობასთან.
ამ ფუნქციების გამოყენება შესაძლებელს გახდის გააკონტროლოს ყველა ასეთი რესურსი, ზოგიერთის სხვებზე დამოკიდებულების გათვალისწინებით და აღმოფხვრას მათი კონფლიქტი ერთმანეთთან. ამის საფუძველზე მოვაგვარებთ დაკისრებულ ამოცანას.
როგორ დავაყენოთ ჩატვირთვა JQuery ბიბლიოთეკა Google CDN-დანდასაწყისისთვის ვიტყვი, რომ JQuery არის სკრიპტების ნაკრები, რომელიც შეიცავს მზა ფუნქციების კომპლექტს და ეხმარება დეველოპერებს დაწერონ კოდი JavaScript-ში. ამ ეტაპზე ბევრი ვებმასტერი იყენებს ამ ბიბლიოთეკას, რადგან ის საშუალებას აძლევს მათ განახორციელონ რამდენიმე "ხრიკი" საიტზე. ვთქვათ, ამ ბლოგზე JQuery-ის გამოყენებით შესრულებული ერთ-ერთი ელემენტია სათაური.
შემთხვევითი არ არის, რომ WordPress-ის უახლეს ვერსიებში დეველოპერებმა დაამატეს ბიბლიოთეკების დაკავშირებისა და ჩატვირთვის შესაძლებლობა თავად ძრავის ურნებიდან. ამას მოწმობს გვერდის სიჩქარის ინსტრუმენტის ანალიზის შედეგად ნაპოვნი URL-ების ტიპი:
//site/wp-includes/js/jquery/jquery.js?ver=1.12..min.js?ver=1.4.1
ამ შემთხვევაში „ver=1.12.4“ ნიშნავს ვერსიას. საინტერესოა მეორე ლინკი, რომელიც, როგორც ალბათ მიხვდით, ბიბლიოთეკასაც უკავშირდება. ეს არის სკრიპტი (“jquery-migrate.min.js”), რომელიც სპეციალურად გამოიყენება ძველი ვერსიებიდან მიგრაციისთვის და შეუთავსებლობის საკითხების გადასაჭრელად.
ანუ, თუ თქვენს საიტზე გაშვებული გაქვთ ძველი მოდული, რომელიც მოითხოვს ერთ-ერთ წინა ვერსიას, მაშინ jquery-migrate.min ხელს შეუწყობს ამ გაფართოების კოდის სწორ მუშაობას ბიბლიოთეკის ახალ მოდიფიკაციასთან ერთად.
დამკვიდრებული ჩვევის გამო, ვცდილობ ოპერატიულად მოვიშორო დიდი ხანია განახლებული დანამატები და გამოვიყენო შესაბამისი კოდები, რომელთა შინაარსი აკმაყოფილებს ბიბლიოთეკის უახლეს ვერსიას. ამიტომ გადავწყვიტე ამ დამატებითი სკრიპტის გამორთვა, რაზეც ქვემოთ ვისაუბრებ.
თუ გახსოვთ, PageSpeed-ის ანალიზის შედეგებზე დაყრდნობით, აუცილებელია სკრიპტების ამოღება გვერდის HTML კოდის სათავე არედან. ამისთვის WP-ს აქვს შესაბამისი ფუნქცია, რომელიც დაგეხმარებათ ბმულის ძირში გადატანაში. სხვათა შორის, ამავდროულად გადავწყვიტე ბიბლიოთეკის ჩატვირთვის ხელახლა კონფიგურაცია ისე, რომ ის დატვირთული ყოფილიყო არა WP საქაღალდიდან, არამედ Google-ის CDN ქსელიდან.
შეგახსენებთ, რომ უსაფრთხოების მიზნით, საიტის ნებისმიერი ფაილის შეცვლისას მიზანშეწონილია მათი სარეზერვო ასლების გაკეთება, ასევე სპეციალიზებული პროგრამული უზრუნველყოფის გამოყენება, მაგალითად, NotePad++ რედაქტორი, რომელიც საშუალებას გაძლევთ დაბრუნდეთ იმდენი ნაბიჯით, რამდენიც თქვენ. მოსწონს.
ეს გადაწყვეტილება ეფუძნებოდა იმ ფაქტს, რომ CDN-ის გამოყენება ( კონტენტის მიწოდების ქსელიან კონტენტის სადისტრიბუციო ქსელი— შინაარსის მიწოდების ქსელი) გთავაზობთ უამრავ უპირატესობას, კერძოდ:
- უზრუნველყოფს JQuery-ის გადატანას ყველაზე ახლოს (გეოგრაფიულად) სერვერიდან თქვენს კომპიუტერში, რაც დააჩქარებს ჩატვირთვას;
- დიდია ალბათობა იმისა, რომ ბიბლიოთეკა იმყოფება მომხმარებლის ბრაუზერის ქეშში, თუ ის ადრე ეწვია თქვენს საიტს;
- ფაილი იგზავნება შეკუმშული ფორმით, რაც ამცირებს მის წონას;
- ბიბლიოთეკა ცალკე თემაში ჩაიტვირთება.
Google-ის JQuery CDN-ის უახლესი ვერსიის გამოსატანად ზემოაღნიშნული მიზნების შესაბამისად, თქვენ უნდა გააუქმოთ ბიბლიოთეკა WP-ში (გახსოვდეთ, რომ ჩვენ ვაანალიზებთ ოპტიმიზაციას ამ CMS-თან მიმართებაში) და შემდეგ ხელახლა დაარეგისტრირეთ იგი ქვემოთ მოცემული ფუნქციის გამოყენებით. რომელიც უნდა ჩაიწეროს ჯადოსნური ფაილის ფუნქციებში.php:
ფუნქცია my_scripts_method() ( wp_deregister_script ("jquery"); wp_register_script ("jquery", "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", false, null, true); wp_enqueue_script ("jquery"); ) add_action("wp_enqueue_scripts", "my_scripts_method");
ეს არის ზუსტად ის დიზაინი, რომელიც მე გამოვიყენე Paige Speed-ის რეკომენდაციების შესრულებისას. JQuery რეგისტრაციის გამორთვით, ჩვენ ავტომატურად ვხსნით jquery-მიგრაციას მასზე, რის შემდეგაც ბიბლიოთეკის მხოლოდ ერთი ბმული გამოჩნდება გვერდის HTML კოდის ბოლოში:
ამ რესურსის სარდაფში გადაადგილება განპირობებულია ბოლო არგუმენტით "true" სკრიპტის რეგისტრაციის ხაზში:
Wp_register_script("jquery", "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", false, null, true);
აქ აუცილებელია გავითვალისწინოთ, რომ ბიბლიოთეკის სკრიპტი გამოჩნდება გვერდის ბოლოში მხოლოდ იმ შემთხვევაში, თუ ასეთი პოზიცია ხელს არ შეუშლის ურთიერთქმედებას დანამატებთან, რომელთა სწორი მოქმედება მასზეა დამოკიდებული. წინააღმდეგ შემთხვევაში "true" არგუმენტი არ იმუშავებს და JQuery განთავსდება სათავეში.
სავსებით შესაძლებელია, რომ ბიბლიოთეკის უახლესი მოდიფიკაცია არ იმუშაოს თქვენს საიტზე არსებულ ზოგიერთ სკრიპტთან, შემდეგ სცადეთ გამოიყენოთ ეს ვარიანტი საჭირო ვერსიის მითითებით (რა თქმა უნდა, 1.8.3 შეიძლება შეიცვალოს ნებისმიერი სხვა):
ფუნქცია my_scripts_method() (// გაუქმება რეგისტრირებული jQuery wp_deregister_script("jquery"); wp_register_script("jquery", "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver= 1.8.3", false, null, true); wp_enqueue_script ("jquery"); ) add_action ("wp_enqueue_scripts", "my_scripts_method");
მაშინაც კი, თუ თქვენი ვებსაიტის სტრუქტურა და არსებული სკრიპტების ნაკრები არ გაძლევთ საშუალებას განათავსოთ გამომავალი კოდი HTML გვერდების ბოლოში, მიუხედავად იმისა, რომ არსებობს "true" ატრიბუტი, თქვენ მაინც მიაღწევთ დადებით შედეგს საიტის სიჩქარის გაზრდის გამო. იმაზე, რომ ბიბლიოთეკა იტვირთება Google-ის CDN ქსელიდან.
გამორთეთ სტილისა და სკრიპტების რეგისტრაცია მათი გაერთიანებისთვისჩვენ უბრალოდ ვცადეთ JQery ბიბლიოთეკის გადატანა, რომელიც გავაუქმეთ და შემდეგ ხელახლა დავრეგისტრირდით, ძირში გადაგვეტანა, რათა არ შეანელა გვერდების ზედა ელემენტების ჩატვირთვა. მაგრამ სხვა სკრიპტები, ისევე როგორც CSS სტილის ფაილები, რეგისტრაციის გაუქმების სახით გამორთვის შემდეგ, ჩვენ მათ გავაერთიანებთ ერთ საერთო ფაილად.
WordPress საიტის გვერდების ჩატვირთვის დროის შესამცირებლად, რეკომენდირებულია ყველა სკრიპტის განთავსება სპეციალურად შექმნილ ფაილში .js გაფართოებით თემების დირექტორიაში და დაამატეთ ცალკეული CSS სტილის იმავე თემის style.css სტილის ფაილს.
ამ ვებ რესურსისთვის, მე ასევე შევქმენი შემდეგი ფაილი (codes.js) JavaScript-ისთვის, რომლის გზაც დაიწერა footer.php შაბლონში სხეულის დახურვის ტეგამდე (შეგიძლიათ იხილოთ HTML კოდში ბოლოში. ბლოგის ნებისმიერ გვერდზე დაწკაპუნებით):
მასში ჩავსვამ არა მხოლოდ ყველა რეგისტრირებულ დანამატის სკრიპტს რეგისტრაციის გაუქმების შემდეგ, არამედ JavaScript-საც, რომელსაც ხელით ვამატებ (სოციალური ღილაკების კოდებს, მრიცხველებს და ა.შ.). ამიტომ, ტესტის შედეგებში, PageSpeed-მა მიუთითა მხოლოდ Subscribe to Comments მოდულის სკრიპტზე, რომლის სწორად ოპტიმიზაცია ჯერ ვერ მოვახერხე.
ასე რომ, როგორც პირველი ნაბიჯი, შექმენით JavaScript შერწყმის ფაილი .js გაფართოებით. თქვენ შეგიძლიათ განათავსოთ იგი პირდაპირ WordPress-ის თემების დირექტორიაში (/your_theme/codes.js), რატომღაც მე ასევე განვათავსე „js“ ქვესაქაღალდეში (/tiny-forge/js/codes.js).
შემდეგ შეაერთეთ შექმნილი ფაილი ზემოთ მოცემული კონსტრუქციის ჩასმით footer.php შაბლონში მანამდე. ბუნებრივია, როგორც ფაილის გზის ნაწილი, არ დაგავიწყდეთ „საიტის“ ჩანაცვლება თქვენი დომენით და ასევე ჩადეთ თქვენი თემის სახელი „tiny-forge“-ის ნაცვლად. გარდა ამისა, უყურეთ ვიდეოს სკრიპტების გაერთიანების შესახებ:
");">
ამის შემდეგ, თქვენ უნდა გააუქმოთ ყველა დანამატის სკრიპტები, რომლებზეც მიუთითებს Page Speed. მაგრამ JQuery ბიბლიოთეკისგან განსხვავებით, რომელიც არ შეიძლება განთავსდეს საერთო ფაილში, ჩვენ არ დავრეგისტრირებთ ამ სკრიპტებს ახალი წესების მიხედვით, რადგან მათ უბრალოდ მოგვიანებით გავაერთიანებთ. ამ მიზნებისათვის, თქვენ უნდა დაამატოთ პატარა ფუნქცია იმავე functions.php:
ფუნქცია my_deregister_javascript() ( wp_deregister_script ("ID-1"); wp_deregister_script ("ID-2"); wp_deregister_script ("ID-3"); ) add_action ("wp_print_scripts", "my_deregister_javascript", 100);
მაგრამ როგორ მოვძებნოთ იგივე ID (რეგისტრაციის სახელები) თითოეული გაფართოებისთვის? ამის დემონსტრირებას გავაკეთებ SyntaxHighlighter-ის გამოყენებით, როგორც მაგალითი. ეს მაგალითი იქნება ყველაზე უნივერსალური, რადგან ამ დანამატს აქვს რთული ფაილის სტრუქტურა და რამდენიმე აქტიური სკრიპტი, რომელთა ადგილმდებარეობის გარკვევა შეგიძლიათ გვერდის HTML კოდში ნაჩვენები ბილიკებიდან:
//site/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/shCore..js //site/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/shBrushCss.js
იმისდა მიუხედავად, რომ ეს რესურსები არ ანელებს ძირითადი შინაარსის ჩატვირთვას (რადგან ისინი იტვირთება გვერდის ბოლოში) Page Speed-ის მიხედვით, მათი კომბინაცია ძალიან სასურველია, როგორც, მართლაც, ნებისმიერი სხვა სკრიპტი. ზემოთ წარმოდგენილი URL-ების გამოყენებით, შეგიძლიათ განსაზღვროთ ყველა საქაღალდე, რომელშიც ისინი მდებარეობს, რომლებიც ეკუთვნის SyntaxHighlighter მოდულს.
ნებისმიერი WP მოდულის ფაილები ჩვეულებრივ შეიცავს ჩართული სკრიპტის რეგისტრაციას (wp_deregister_script) და მის ჩართვას (wp_enqueue_script). სწორედ ამ ხაზების დახმარებით შეგიძლიათ მოძებნოთ რეგისტრის სახელები დანამატის დირექტორიაში შეტანილ საქაღალდეებში, მაგალითად, NotePad++ ():
ამრიგად, გვერდისთვის, რომელსაც ჩვენ ვამოწმებთ, უნდა გამორთოთ სამი SyntaxHighlighter სკრიპტი, რათა შემდგომში დავაკოპიროთ და ჩასვათ მათი შინაარსი უკვე შექმნილ გაერთიანების ფაილში:
ფუნქცია my_deregister_javascript() ( wp_deregister_script ("syntaxhighlighter-core"); wp_deregister_script ("syntaxhighlighter-brush-php"); wp_deregister_script ("syntaxhighlighter-brush-css"); ) add_action");
თუმცა, SyntaxHighlighter-ს აქვს რთული სტრუქტურა, ამიტომ მათი კოპირებული შინაარსის გაზიარებულ ფაილში ჩასმის შემდეგ, გვერდზე ხაზგასმული სინტაქსი წყვეტს მუშაობას. რა თქმა უნდა, შეგიძლიათ გამორთოთ სკრიპტები და შემდეგ გამოიყენოთ ფერი გვერდზე ნაჩვენები კოდის ფერის შესარჩევად, მაგრამ ამ შემთხვევაში ჩრდილი ერთგვაროვანი იქნება.
ინტერნეტში შევხვდი ამ პრობლემის რამდენიმე გადაწყვეტას, მაგრამ ყველა მათგანი არ იძლევა სრული ფუნქციონირების შენარჩუნების საშუალებას და, შესაბამისად, ჩემთვის მიუღებელია. ამიტომ, მე დავტოვე ყველაფერი თავის „ორიგინალურ ფორმაში“ ამ მოდულის შესახებ, მით უმეტეს, რომ PageSpeed-მა შემოგვთავაზა მხოლოდ მისი ერთ-ერთი სკრიპტის შეკუმშვა, რომლის განხორციელებაც ჩვენ შეგვიძლია. უფრო მეტი ამის შესახებ ქვემოთ, როდესაც მივიღებთ ოპტიმიზაციის შემდეგ ნაბიჯს.
Reloaded-თან დაკავშირებით, ჭკუა უნდა ვყოფილიყავი და შედეგად დავადგინე ამ მოდულის ID (ყოველ შემთხვევაში, მოვახერხე მისი გამორთვა, რაც საჭირო იყო). შესაბამისად, დერეგისტრაციის ფუნქცია, რომელიც კვლავ უნდა განთავსდეს WP თემის functions.php-ში, ჩემს შემთხვევაში ასე გამოიყურება (შეგიძლიათ სრულად დააკოპიროთ და გამოიყენოთ ეს კოდი, თუ Google PageSpeed მიუთითებს ამ სკრიპტის ოპტიმიზაციის აუცილებლობაზე):
ფუნქცია my_deregister_javascript() ( wp_deregister_script("stcr-plugin-js"); ) add_action("wp_print_scripts", "my_deregister_javascript", 100);
ასე რომ, ყველა სკრიპტის გამორთვის შემდეგ, რომელიც უნდა იყოს ოპტიმიზირებული (ფაილების ადგილმდებარეობა განისაზღვრება გვერდის სიჩქარის შემოწმების შედეგებში მითითებული ბილიკით), დააკოპირეთ მათი შინაარსი და ჩასვით იგი ადრე შექმნილ საერთო ფაილში. თქვენს ყურადღებას ვაქცევ იმ ფაქტს, რომ საჭიროა სკრიპტის კოდები მათი სუფთა სახით ჩასმა, და ტეგების გამოტოვებით, წინააღმდეგ შემთხვევაში არცერთი მათგანი არ იმუშავებს.
ამის შემდეგ, დააკავშირეთ გაერთიანების ფაილი ამ განყოფილების დასაწყისში მოცემული კოდის გამოყენებით. შედეგად, JavaScript-მა აღარ უნდა დაბლოკოს გვერდის ზედა ნაწილში არსებული ძირითადი შინაარსის ელემენტების ჩატვირთვა.
ჩვენ განვიხილეთ სკრიპტები, ახლა ვნახოთ, რა CSS რესურსებს უჩივის Page Speed:
CSS სტილის ოპტიმიზაციის საფეხურები ზოგადად მსგავსია რასაც JavaScript-ისთვის აღვწერე. მართალია, თემის მთავარი ფაილი იმოქმედებს როგორც გამაერთიანებელი ფაილი, სადაც დავამატებთ დარჩენილი სტილის ფაილების კოპირებულ შიგთავსს. უფრო მეტიც, აზრი არ აქვს style.css-ის ძირში ჩართვას, წინააღმდეგ შემთხვევაში გვერდის სწორი ჩვენება შეიძლება დაირღვეს. გამოდის, რომ CSS ოპტიმიზაცია შედგება მხოლოდ სტილის გაერთიანებისგან.
ჩემი ბლოგის შემოწმებული გვერდისთვის მოცემულია რეკომენდაციები, კვლავ StCR მოდულის შესახებ, რომელსაც აქვს საკუთარი სტილის ფაილი (stcr-plugin-style.css), ასევე შრიფტის ბიბლიოთეკები, რომელთაგან ერთი რეგისტრირებულია და დაკავშირებულია იმავეში. გამოიწერეთ Comments Reloaded და დანარჩენი ორი გააქტიურდა თავად WP თემაში. მე ისინი არ მჭირდება ამ ბლოგისთვის, სტანდარტული ნაკრები საკმაოდ საკმარისია, ამიტომ გადავწყვიტე უბრალოდ გამოვრთე.
ახლა მსურს შევეხო ამ სტატიაში უკვე ნახსენებ SyntaxHighlighter დანამატს, რომლის სკრიპტები გადავწყვიტე დამეტოვებინა თავდაპირველი სახით, მაგრამ მისი სტილები წარმოდგენილია შემოწმების „შემოკლება CSS კოდის“ შედეგების განყოფილებაში, რომელიც იდენტურია. შეკუმშვის პროცედურისთვის:
პრინციპში, ჩვენ შეგვიძლია ცალ-ცალკე შევკუმშოთ ეს რესურსები, მაგრამ ოპტიმიზაციის მაქსიმალურად გაზრდის მიზნით, როგორც ვთქვი, სჯობს მათი შიგთავსის კოპირება და ჩასმა საბაზისო თემის style.css ფაილში, რომელიც შეკუმშულია CSS სტილის ყველა ნაკრების ჩასმის შემდეგ. რომელიც მოითხოვს ოპტიმიზაციას. მაგრამ პირველ რიგში, ისინი უნდა დაემატოს უკვე არსებული 4 რესურსის სიას დეაქტივაციისთვის, მთავარი style.css ფაილის გამოკლებით (იხილეთ მეორე ეკრანის სურათი აქედან).
სტილის რეგისტრაციის გამორთვისთვის, ჩვენ ვიყენებთ იგივე ფუნქციას, რომლითაც სკრიპტები გავაუქმეთ ზემოთ აღწერილი მეთოდის გამოყენებით:
ფუნქცია my_deregister_styles() ( wp_deregister_style("stcr-plugin-style"); wp_deregister_style("stcr-font-wesome"); wp_deregister_style("tinyforge-fonts"); wp_deregister_style("font_deregister"con); syntaxhighlighter-theme-default"); wp_deregister_style("syntaxhighlighter-core"); ) add_action("wp_print_styles", "my_deregister_styles", 100);
სხვათა შორის, რეგისტრირებული სტილის პირადობის მოწმობები ასევე შეგიძლიათ იხილოთ NotePad++ ძიებაში ფრაზების "wp_register_style" და "wp_enqueue_style" გამოყენებით, მაგრამ, JavaScript-ისგან განსხვავებით, ამის გაკეთება ბევრად უფრო ადვილია. ყოველ შემთხვევაში მე სწრაფად ვიპოვე რეგისტრის ყველა საჭირო სახელი.
როგორც უკვე ვთქვი, მე უბრალოდ გამოვრთე შრიფტები ("stcr-font-wesome", "tinyforge-fonts", "elusive-iconfont-style",), მაგრამ CSS მოდულის ფაილების შიგთავსი ("stcr-plugin-style" ", " syntaxhighlighter-theme-default", "syntaxhighlighter-core") კოპირებულია და ჩასმულია style.css-ში. შეგახსენებთ, რომ ოპტიმიზირებული ყველა სტილის ფაილის მდებარეობა მითითებულია გვერდის სიჩქარის ანალიზის შედეგებში.
მაგრამ აქ არის ძალიან მნიშვნელოვანი ნიუანსი. სანამ რომელიმე გაფართოების სტილის წესებს style.css-ზე გადაიტანთ, აუცილებლად შეამოწმეთ არის თუ არა ფონის ან ფონის გამოსახულების თვისებები, რომელთა პარამეტრი შეიძლება იყოს url გამოყენებული გამოსახულებისკენ მიმავალი ბილიკით, რომელიც ნაჩვენებია მისი დახმარებით. როგორც დიზაინის ელემენტი (შეგიძლიათ მოძებნოთ ისინი იმავე Notepad++-ის გამოყენებით):
ფონის სურათი: url (images/image-1.png)
თუ ასეთი თვისებები იქნა ნაპოვნი, მაშინ ყველა შედარებითი URL უნდა გადაკეთდეს აბსოლუტურ (სრულად) ამ მაგალითის მიხედვით:
Background-image:url(http://your_domain/wp-content/plugins/plugin-1/images/image-1.png)
ანუ, ამ მაგალითში თქვენ უნდა მიუთითოთ , რომელიც მიგვიყვანს საქაღალდეში დანამატის სურათებით, სადაც მდებარეობს სასურველი გრაფიკული ფაილი. წინააღმდეგ შემთხვევაში, WordPress ვერ იპოვის სურათს და, შესაბამისად, ის არ იქნება ნაჩვენები.
ჩვენ ვაკუმშავთ CSS და JavaScript ფაილებს ონლაინსაბოლოო ოპტიმიზაციის საფეხურამდე, ჩვენ მოკლედ შევაჯამებთ ჩვენს მიერ გადადგმულ ნაბიჯებს; ეს გარკვეულ სიცხადეს მოუტანს პროცესს, რომლის აღწერაშიც მოგვიწია გადასვლები, რათა გამოვყოთ არასტანდარტული სიტუაციებით წამოწყებული სხვადასხვა სცენარი:
- ზემოთ აღწერილი აქტივობების შედეგად შეიქმნა საერთო JS ფაილი, სადაც განვათავსეთ ყველა სკრიპტის კოპირებული კონტენტი, რომელიც გამორთულია „wp_deregister_script“ ფუნქციით;
- სტილის რეგისტრაცია, რომელიც ანელებს გვერდის ჩატვირთვას, გამორთულია „wp_deregister_style“-ის გააქტიურებით, ზოგიერთი მათგანის შიგთავსი (საჭიროა) დაკოპირდა და დაემატა თემის style.css მთავარ სტილის ფაილს;
სანამ გავაგრძელებ, შეგახსენებთ, რომ SyntaxHighlighter დანამატთან დაკავშირებით, მე გადავწყვიტე არჩევანი გამეკეთებინა სრული ფუნქციონირების შენარჩუნებისა და მისი სკრიპტების არ გაერთიანების სასარგებლოდ, რადგან ისინი არ მუშაობენ როგორც საერთო ფაილის ნაწილი. ამასთან, Page Speed-მა მიუთითა გადაუდებელ აუცილებლობაზე CSS კოდის სინტაქსის ხაზგასმაზე პასუხისმგებელი ერთ-ერთი სკრიპტის შემცირება (შეკუმშვა):
მაგრამ შესაძლებელი იქნება მისი შეკუმშვა საერთო JavaScript და style.css ფაილით. ამისათვის თქვენ უნდა შეამოწმოთ ეს გვერდი ხელახლა PageSpeed-ში:
გარდა ამისა, მინდა აღვნიშნო, რომ სკრიპტებისა და სტილის ამოსაღებად მიღებული ზომები გვერდის სათაური კოდის ზონიდან, ისევე როგორც ფაილების გაერთიანების მცდელობები, უკვალოდ არ ჩაიარა.
ოპტიმიზაციის ქულა მნიშვნელოვნად გაიზარდა და მიაღწია 82 ქულას 100-დან მობილური ტელეფონებისთვის, მაგრამ კომპიუტერებისთვის ის მთლიანად მწვანე ზონაში იყო (90), რაც ახასიათებს Google-ის წარმოდგენილ თითქმის ყველა ძირითადი რეკომენდაციის შესრულებას.
8 რესურსიდან (3 სკრიპტი და 5 CSS დოკუმენტი) დარჩა მხოლოდ ერთი და ეს არის მთავარი style.css ფაილი, რომლის გზაც უნდა დარჩეს ვებ გვერდის ზედა ნაწილში, რათა ბრაუზერმა აჩვენოს მისი შემადგენელი ელემენტები. სწორად.
პრინციპში, ეს უკვე ღირსეული შედეგია, თუმცა სურვილის შემთხვევაში მისი გაუმჯობესება შესაძლებელია. ყველაფერი რაც თქვენ უნდა გააკეთოთ არის Google-ის მიერ უკვე ოპტიმიზირებული რესურსების ჩამოტვირთვა (ზემოთ მოცემულ ეკრანის სურათზე, მათთან დაკავშირებული ბმულები არის ბოლოში), მათ შორის CSS და JavaScript დოკუმენტები, რომლებიც შეფუთულია ZIP არქივში.
გაანალიზებული გვერდისთვის, რომლის ტესტის საფუძველზეც ჩავატარე ოპტიმიზაცია, შეკუმშულებს შორის იყო style.css, საერთო JavaScript ფაილი და chBrushCss.js, რომელიც მე აღვნიშნე, რომელიც არ გავაერთიანე სხვა სკრიპტებთან ზემოთ ჩამოთვლილი მიზეზების გამო. .
ალბათ შემცირებული ფაილების განსხვავებული შემადგენლობა გექნებათ, თუმცა, ვფიქრობ, ასეთ სიტუაციაში საჭირო იდეა და პროცედურა გასაგებია. თქვენს კომპიუტერში ჩამოტვირთვის შემდეგ, თქვენ უნდა გახსნათ არქივი და შეცვალოთ სერვერზე ორიგინალების შიგთავსი შეკუმშული ვერსიებით.
მნიშვნელოვანია ყურადღება მიაქციოთ შემდეგს. გვერდის სიჩქარე ზღუდავს შემოკლებული ფაილების მიღების შესაძლებლობას. თუ ოპტიმიზებული დოკუმენტების ჯამური წონა აღემატება 10 მბ-ს (ეს იშვიათია, მაგრამ ხდება), მაშინ ზოგიერთი რესურსი არ შეკუმშული იქნება, თუმცა მათ შესახებ ინფორმაცია და მათი მდებარეობა (URL) წარმოდგენილი იქნება სპეციალურ Manifest ფაილში. , რომელიც ასევე შეფუთულია ZIP -არქივში:
ამ ინფორმაციის საფუძველზე, თქვენ შეგიძლიათ თავად შეკუმშოთ სკრიპტები და CSS ფაილები ონლაინ სერვისების გამოყენებით, რომელთაგან ბევრია ინტერნეტში. სხვათა შორის, არ აურიოთ სტილის შემცირება და JavaScript, რომელიც მოიცავს კომენტარების, ინტერვალების, ხაზების წყვეტისა და ბლოკის გამოყოფის აღმოფხვრას, რომლის დროსაც გამოიყენება სხვა ალგორითმები.
შეგიძლიათ შეამოკლოთ CSS ონლაინ სპეციალიზებული სერვისების გამოყენებით. მაგალითად, ერთ-ერთი პროექტის style.css-ის შესამცირებლად, მე ავირჩიე ეს ინსტრუმენტი, რადგან ის საშუალებას გაძლევთ აირჩიოთ შეკუმშვის სამი დონე ("მსუბუქი" - მსუბუქი, "ნორმალური" - სტანდარტული და "სუპერ კომპაქტური" - მაქსიმალური) საჭიროა:
პროდუქტიულობისა და ზემოქმედების ეფექტურობის თვალსაზრისით, საიტის არ დაჩქარება, როგორც ჩანს, ყველაზე სასურველია. თუმცა, გასათვალისწინებელია, რომ სუპერ კომპაქტის გამოყენებისას ოპტიმიზებული CSS კოდი ყოველგვარი სივრცის გარეშე იშლება ერთ ხაზზე, რაც აშკარად შეაფერხებს მის წაკითხვას და, შესაბამისად, გაართულებს მომავალში რედაქტირებას.
ამ შემთხვევაში, რადგან მე რეგულარულად ვცვლი მიმდინარე და ვამატებ ახალ CSS თვისებებს, საიტის სტილის კორექტირებისას მოხერხებულობის უზრუნველსაყოფად, მე ავირჩიე ჩემი საყვარელი „ოქროს საშუალო“ ნორმალური დონის სახით.
მე პირადად კმაყოფილი ვიყავი შეკუმშვის სტანდარტული პირობებით. მე ახლახან შევამოწმე "მოაშორე ყველა კომენტარი" ოფციას, რომ მთლიანად წავშალო კომენტარები. მაგრამ შესაძლოა დაგჭირდეთ მეტი დაზუსტება კოდის შემცირების ოპერაციის გაშვებამდე. შემდეგ გახსენით დამატებითი ოფციები, რომლებზეც წვდომა შესაძლებელია ბმულის "Advanced Mode" საშუალებით.
მას შემდეგ რაც გადაწყვეტთ პარამეტრებს, დააკოპირეთ შესამცირებელი სტილის კოდი, ჩასვით ის პარამეტრების ქვემოთ მდებარე ველში და დააჭირეთ ღილაკს „შეკუმშვა“ (იხილეთ ეკრანის სურათი ზემოთ). რამდენიმე წამში მიიღებთ განახლებულ კოდს:
შეკუმშვის დასრულების შემდეგ (რის შედეგადაც, მაგალითად, ჩემი საიტის საწყისი ფაილის შინაარსი „დაკარგა“ 29%), შეგიძლიათ აირჩიოთ მიღებული კოდი ღილაკის „Highlight code“-ს გამოყენებით და დააკოპიროთ და შემდეგ ჩასვათ. ორიგინალის ნაცვლად Notepad++-ის გამოყენებით.
უბრალოდ არ უნდა დაგვავიწყდეს, რომ შეამოწმოთ, რომ საიტის გვერდის ელემენტები სწორად არის ნაჩვენები ონლაინ CSS შეკუმშვის დასრულების და სტილის განახლების შემდეგ. უფრო მეტიც, შემოწმება უნდა განხორციელდეს ყველა პოპულარულ ბრაუზერში ().
იმისათვის, რომ უფრო ნათლად გაიგოთ, როგორ ხდება კონკრეტული CSS ფაილის შეკუმშვა, შემდეგი სურათის გამოყენებით მე გაჩვენებთ ორიგინალური ვერსიის ხედს:
და აი, როგორ გამოიყურებოდა ეს შეკუმშვის შემდეგ:
ეს ნიმუში თავდაპირველად შედგებოდა მხოლოდ სტილებისაგან, რომლებიც შედიოდა WordPress თემის მთავარ style.css ფაილში სხვა სტილებთან, მათ შორის დანამატებთან კომბინირების გარეშე. მას შემდეგ რაც CSS-ის ყველა თვისებას დააკავშირებთ, შეკუმშვის სარგებელი შეიძლება მნიშვნელოვნად მეტი იყოს.
JS ფაილებისთვის მე გადავწყვიტე გამოვიყენო მაქსიმალური შეკუმშვა (შემცირება), რადგან მე თვითონ არ ვასწორებ მათ საჭიროების გამო (ძალიან იშვიათია, რომ დაგჭირდეთ სკრიპტების შინაარსის შეცვლა; ნებისმიერ შემთხვევაში, უფრო ადვილია ჩანაცვლება ყველა კოდი).
თქვენ ასევე შეგიძლიათ შეამციროთ JS ფაილები ონლაინ სერვისების გამოყენებით, რომელთაგან ერთ-ერთი ყველაზე საიმედოა ონლაინ YUI კომპრესორი:
აქ ყველაფერი ჰგავს CSS შემოკლებას. ღილაკზე „შეკუმშვა“ დაწკაპუნების შემდეგ, თქვენ დააკოპირებთ მიღებულ შედეგს და შეცვლით მას საწყისი ფაილის შინაარსით. ამ სტატიაში აღწერილი ყველა აქტივობის დასასრულებლად, კიდევ ერთხელ შევამოწმოთ სატესტო გვერდი Page Speed-ში:
რა არის პირველი, რაც იპყრობს თქვენს თვალს? რა თქმა უნდა, ის ფაქტი, რომ ქულა კიდევ რამდენიმე ქულით გაიზარდა და მწვანე ზონაში მოხვდა (როგორც კომპიუტერისთვის, ასევე მობილური მოწყობილობებისთვის). რჩევა „შემოკლება JavaScript“ გაქრა რეკომენდაციების სიიდან (თუ გახსოვთ, ის დაკავშირებული იყო SyntaxHighlighter მოდულის ერთ-ერთ სკრიპტთან).
მიუხედავად იმისა, რომ ჯერ კიდევ არსებობს წინადადებები ამ და სხვა მსგავსი გვერდების გასაუმჯობესებლად (კოდის ამოღება ზედა ზონიდან), მათი სრული განხორციელება შეუძლებელია იმ მარტივი მიზეზის გამო, რომ ასეთი ნაბიჯები დაკავშირებული იქნება საიტის ფუნქციონირების ნაწილის გამორთვასთან. რაც, მაგალითად, ჩემთვის მიუღებელია.
გარდა ამისა, თუ ქულა მწვანე ზონაშია, ეს ნიშნავს, რომ შემდგომი ქმედებები არ გამოიწვევს რაიმე მნიშვნელოვან პროგრესს საიტის დაჩქარებაში, მაგრამ დასჭირდება ბევრი ძვირფასი დრო. ასე რომ, თუ თქვენ მოახერხეთ 85-90 ქულის შედეგის მიღწევა, მაშინ შეიძლება დასრულდეს ოპერაციები გვერდის სიჩქარის რეკომენდაციებთან დაკავშირებით.
გარდა ამისა, არსებობს გვერდის ჩატვირთვის სიჩქარის გაზრდის დამატებითი გზები, რომელთა შესახებ დროულად შეიტყობთ, თუ ბლოგის განახლებებს გამოიწერთ ელექტრონული ფოსტით. უყურეთ კიდევ 2 ვიდეოს, რომლებიც საუბრობენ WordPress საიტის სკრიპტებისა და სტილის ოპტიმიზაციაზე WP Fastest Cache ქეშირების მოდულის და Autoptimize გაფართოების კომბინაციის გამოყენებით: Denis
Გამარჯობა ყველას. ინდიკატორები GOOGLE-ში SPEED OF MY SITE 100/100 http://sibvaleogroup.ru
დიდი ხანია ვტესტები. რა მეთოდები და ტექნიკაც არ უნდა გამოვიყენო, ხანგრძლივი ცდები და შეცდომები და სასიამოვნო შედეგი ბონუსის სახით;). საიტის თემა დიდი მოთხოვნაა: როგორ დავიწყოთ ბიზნესი? და დაავადებების პრევენცია და მკურნალობა! ნატურალური ეკო პროდუქტი!
კეთილი იყოს თქვენი მობრძანება ინდიკატორების სანახავად! თუ რამე გაქვთ, გთხოვთ დამიკავშირდეთ და მე დაგეხმარებით ყველანაირად, უბრალოდ გაითვალისწინეთ, რომ მე მხოლოდ მოყვარული ვარ დიდი გამოცდილებით! პატივისცემა ყველას!
გამარჯობა, ბლოგის საიტის ძვირფასო მკითხველებო. დღეს მინდა დავარღვიო ტრადიცია (ყველა განყოფილებაში თანაბრად დავწერო) და თქვენს ყურადღებას მივაქციო სტატიის მეორე ნაწილი.
ფაქტია, რომ ბევრად უფრო ადვილია დაწერო, როგორც ამბობენ, ცხელ დევნაში და არ გახსოვდეს მოგვიანებით: "როგორ შევძელი ამის გაკეთება?", რაც შეიძლება საკმაოდ რთული იყოს, განსაკუთრებით გარკვეული დროის გასვლის შემდეგ.
მოდით გავაგრძელოთ სიჩქარის გაზრდის მცდელობა ისეთი ხელსაწყოს გამოყენებით, როგორიცაა Page Speed, რომელიც დაინსტალირებულია Mazilla-ს ან Chrome-ის დანამატის სახით. პრინციპში, ალბათ უშედეგოდ ვთქვი წინა სტატიაში, რომ თავად ეს დანამატი ვერაფერს გააკეთებს თქვენი პროექტის დასაჩქარებლად, მაგრამ მხოლოდ რეკომენდაციებს იძლევა, თუ კონკრეტულად რას უნდა მიაქციოთ ყურადღება პირველ რიგში. თურმე თვითონაც შეიძლება რაღაცისთვის კარგი იყოს.
CSS-ის ოპტიმიზაცია და შეკუმშვა გვერდის სიჩქარეშიბოლო სტატიაში ჩვენ დეტალურად განვიხილეთ, თუ როგორ უნდა დააინსტალიროთ Page Speed plugin და როგორ მოვახდინოთ მომხმარებლის ბრაუზერებში სტატიკური ობიექტების (სურათები, სკრიპტები, სტილები) ქეშირების ოპტიმალური კონფიგურაცია.
ვებ სერვერის კონფიგურაციის შემდეგ, ეს მოდული აღარ უჩივის სიჩქარის ძლიერ შემცირებას „ბრაუზერის ქეშირების ბერკეტის“ გამო:
არსებითად, Paige Speed აღნიშნავს, რომ პრაქტიკულად ყველა სტილის ფაილი, რომელიც იტვირთება ვიზიტორთა ბრაუზერში, ჩემი ბლოგის ვებ გვერდთან ერთად, შეიძლება მნიშვნელოვნად იყოს ოპტიმიზირებული (შეკუმშული) მათი წონის შესამცირებლად.
თუ დააწკაპუნებთ პლიუს ნიშანს გვერდით “Minify CSS”, გაიხსნება ობიექტების სია, რომელთა ოპტიმიზაცია (შეკუმშვა) სასურველი იქნებოდა:
მაგრამ მთავარი ის არის, რომ ყველა ოპტიმიზაციის (შეკუმშვის) სამუშაოს თავად მოდული შეასრულებს. დააკვირდით, სტრიქონის ბოლოს, სადაც მითითებულია თითოეული არაოპტიმიზებული სტილის ფაილის სახელი მის ფანჯარაში, თქვენ მოგეთხოვებათ ნახოთ ოპტიმიზებული (შეკუმშული) ვერსია და თუ გსურთ, გადმოწეროთ კასკადური სტილის ყველაზე უნაყოფო ფაილი. ფურცლები, რაც საშუალებას მისცემს, თუმცა ოდნავ, გაზარდოს დატვირთვის სიჩქარის საიტი.
ოპტიმიზაცია მოიცავს მათგან ყველა არასაჭირო სივრცის და კომენტარის ამოღებას, რაც არანაირად არ მოქმედებს თქვენი რესურსის მუშაობაზე, მაგრამ მათი, თუმცა მცირე, მაგრამ მაინც დამატებითი წონით, ანელებს მის დატვირთვას.
მაგალითად, ჩემი არაოპტიმიზებული style.css, რომელიც მოჰყვა WordPress-ის თემას, შედგებოდა თითქმის 2000 სტრიქონისგან და მას შემდეგ რაც მოხდა ოპტიმიზაცია, მე შევძელი მასში არსებული ხაზების რაოდენობა 400-მდე შემემცირებინა და თავად ფაილმა დაკარგა მისი მეხუთედი. ორიგინალური წონა. ამის შემდეგ კი მასში დაწერილი თვისებების გარეგნობა ბევრად უფრო მომწონს.
თავად განსაჯეთ, ასე გამოიყურებოდა, სანამ შევძლებდი მის შეკუმშვას Page Speed-ში:
და ასე გამოიყურება ოპტიმიზაციის შემდეგ:
ასე რომ, ამისათვის თქვენ დაგჭირდებათ მხოლოდ შეკუმშული ვერსიის ჩამოტვირთვა ბმულიდან "შენახვა როგორც". გადმოწერილი გაქვს?
ახლა დაუკავშირდით FTP-ის საშუალებით, გადადით საქაღალდეში, სადაც გაქვთ ორიგინალური სტილის ფაილი (იხ. გზა გვერდის სიჩქარის ფანჯარაში) და შეცვალეთ ძველი არაკომპრესირებული ახლით (ის, რომელიც თქვენთვის იყო ოპტიმიზირებული), არა. დაივიწყეთ იგივე სახელის მიცემა, როგორც ორიგინალი, წინააღმდეგ შემთხვევაში კასკადური სტილის ფურცლები არ იმუშავებს. ესე იგი, ისიამოვნეთ იმ მილიწამებით, რომლითაც თქვენი საიტის ჩატვირთვა დაჩქარდა.
მაგრამ მთავარი CSS ფაილის გარდა, რომელიც ჩვეულებრივ მოყვება თქვენს მიერ გამოყენებულ თემას, გვერდის სიჩქარის ფანჯარაში ასევე შეგიძლიათ იხილოთ იმ სტილის ფაილები, რომლებსაც იყენებენ WordPress-ისთვის (ან ნებისმიერი სხვა ძრავისთვის) დაინსტალირებული დანამატები და გაფართოებები. შენ იყენებ). პრინციპში, თქვენ შეგიძლიათ შეკუმშოთ ისინი იმავე გზით, როგორც ზემოთ განვიხილეთ.
როგორ გავაერთიანოთ გარე CSS ერთ საერთო ფაილშიმაგრამ საუკეთესო ვარიანტი იქნება ყველა გარე CSS ერთში გაერთიანება და მხოლოდ ამის შემდეგ შეკუმშვა გვერდის სიჩქარის გამოყენებით. ეს იქნება იდეალური ვარიანტი ჩამოტვირთვის სიჩქარეში კიდევ რამდენიმე მილიწამის დაზოგვისთვის. სინამდვილეში, თავად მოდული გვთავაზობს სწორედ ასეთ ვარიანტს "გარე CSS-ის შერწყმა" ველში:
აქ ის გვთავაზობს გავაერთიანოთ ყველა ის გარე ფაილი, რომელიც მან იპოვა (გარე სკრიპტები ასევე შეიძლება გაერთიანდეს ერთში - "Combine external JavaScript"), ჩატვირთულია ვიზიტორების ბრაუზერში, ერთ საერთოში, მაგრამ ამ შემთხვევაში ეს იქნება საჭირო. ყველა არასაჭირო სტილის ფაილის გამორთვა. პრობლემა ჩნდება, რომ ბევრი მათგანი ქმნის და აკავშირებს დანამატებს ან სხვა გაფართოებებს თქვენს ძრავთან.
თქვენ, რა თქმა უნდა, შეგიძლიათ შეხვიდეთ მოდულის კოდში და გამორთოთ სტილები იქიდან, მაგრამ თუ განაახლებთ ამ გაფართოებას, შეიძლება კვლავ მოგიწიოთ მოდულის ინტერიერში ჩაღრმავება, რომ კვლავ გამორთოთ იგი. WordPress-ისთვის არის ამ პრობლემის ცენტრალიზებული გადაჭრის გზა, თქვენთვის ნაცნობის მეშვეობით, რომელიც უნდა იყოს წარმოდგენილი საქაღალდეში იმ თემით, რომელსაც იყენებთ:
/wp-content/themes/WordPress თემის სახელი/functions.php
თუ ვერ იპოვით functions.php, შეგიძლიათ უბრალოდ შექმნათ ის, მაგალითად, Notepad++ რედაქტორში და ატვირთოთ WordPress თემის საქაღალდეში. მაგრამ, რა თქმა უნდა, ის მაინც მოიძებნება. თქვენ უნდა დაამატოთ PHP კოდის პატარა ნაწილი, დაახლოებით ასეთი:
Add_action("wp_print_styles", "my_derregister_styles", 100); ფუნქცია my_deregister_styles() ( wp_deregister_style("google-ajax-translation"); wp_deregister_style("syntaxhighlighter-theme-default"); wp_deregister_style("syntaxhighlighter-core"); wp_deregister_style("wp_pq_page"); );)
ამით ჩვენ ვხსნით WordPress-დან ზოგიერთი მოდულის დიზაინის სტილების რეგისტრაციას. შედეგად, ამ დანამატების ინდივიდუალური CSS ფაილები არ ჩაიტვირთება ვიზიტორების ბრაუზერებში.
და მაშინაც კი, თუ რომელიმე მათგანს განაახლებთ, არაფერი შეიცვლება და აღარ დაგჭირდებათ მათი კოდის გათხრა. ისე, იმიტომ რომ... ისინი საკმაოდ ხშირად ახლდებიან, შემდეგ გამორთვის ამ ეშმაკური მეთოდით ჩვენ დიდად დავზოგავთ დროსა და ნერვებს.
როგორც ჩანს, ყველაფერი მარტივია - თქვენ გამორთავთ და ეს ასეა, შეგიძლიათ დაივიწყოთ. კი, მაგრამ ასე არა. პირველ რიგში, თქვენ ჯერ კიდევ უნდა იპოვოთ თითოეული WP მოდულის კოდში (რომელშიც ჩვენ გამორთეთ სტილის ჩატვირთვა) რეგისტრი, რომელიც პასუხისმგებელია მათ დაკავშირებაზე.
თუ დააკვირდებით ზემოთ მოცემულ კოდს, შეამჩნევთ ხაზებს, სადაც ეს იგივე რეგისტრებია ჩამოთვლილი:
Wp_deregister_style ("google-ajax-translation"); wp_deregister_style("syntaxhighlighter-theme-default"); wp_deregister_style("syntaxhighlighter-core"); wp_deregister_style("wp-pagenavi"); wp_deregister_style("cfq");
ეს არის, მაგალითად, მშვენიერი WordPress მოდულისთვის, რეესტრს დაერქმევა "wp-pagenavi", ხოლო კომენტარის ფორმის Quicktags მოდულისთვის - "cfq". თუ თქვენ იყენებთ იგივე გაფართოებებს, როგორც მე, მაშინ ვერ შეხვალთ მათ PHP კოდში, არამედ ისესხებთ რეგისტრებს მოცემული კოდიდან.
მაგრამ ყველა დანამატის შემთხვევაში, რომლებსაც აქვთ საკუთარი სტილის ფაილები გამორთული, უნდა გახსოვდეთ, რომ დააკოპიროთ ამ გამორთული CSS-ის ყველა შიგთავსი, რათა გაერთიანდეს საერთო ფაილში თემის საქაღალდიდან (ჩემს ჰქვია style.css). ვხედავ, არა?
თქვენ ალბათ გაქვთ წარმოდგენა იმაზე, რაზეც ვსაუბრობთ. ასეთი CSS თვისება შეიძლება, მაგალითად, ასე გამოიყურებოდეს:
Translate_links .translate_flag(background:url(flags.png) no-repeat; border:0; margin:0;padding:0;)
ჩანაწერი url(flags.png) ნიშნავს, რომ სურათი სახელწოდებით flags.png უნდა მოძებნოთ იმავე საქაღალდეში, სადაც მდებარეობს თავად კასკადური სტილის ფურცლის ფაილი. მაგრამ ფაქტია, რომ როდესაც თქვენ დააკოპირებთ ყველა მოდულის სტილის შიგთავსს, ისინი, ალბათ, გამოიყენებენ სურათების ასეთ შედარებით ბილიკებს.
და ეს გამოიწვევს იმ ფაქტს, რომ WordPress ვერ იპოვის საჭირო სურათებს მითითებულ შედარებით გზაზე. ყოველივე ამის შემდეგ, ისინი კვლავ რჩებიან მოდულების საქაღალდეებში. ამიტომ, CSS-ის კომბინირებისას აუცილებელია ფონის სურათების შედარებითი გზების შეცვლა აბსოლუტური ბილიკებით, რომლებიც ასე გამოიყურება:
ამის შემდეგ, ყველა ფონის სურათი, რომელსაც იყენებენ დანამატები, რომლებისთვისაც თქვენ გამორთეთ საკუთარი სტილი, დაუბრუნდება თავის ადგილებს. ასე რომ, მე ვფიქრობ, რომ თქვენ შეგიძლიათ გაუმკლავდეთ ამას.
სხვათა შორის, მას შემდეგ რაც თქვენ გაქვთ ყველა სტილის კოდი ერთ საერთო ფაილში, არ დაგავიწყდეთ მისი ხელახლა შეკუმშვა Page Speed-ის საშუალებით, მის ფანჯარაში იპოვეთ ხაზი სახელად Minify CSS და დააწკაპუნეთ პლუს ნიშანზე ამ წარწერის გვერდით და შემდეგ დააკოპირეთ. ოპტიმიზირებული ფაილი "შენახვა როგორც". შემდეგი, შეცვალეთ ორიგინალი ფაილი საქაღალდეში WordPress თემით, რომელსაც იყენებთ.
მოდით ახლა გამოვიყენოთ კონკრეტული მაგალითი, რათა აჩვენოთ სად უნდა მოძებნოთ WordPress მოდულის რეესტრის სახელი, რომელიც საშუალებას გაძლევთ გამორთოთ მისი სტილის ჩატვირთვა. სინამდვილეში, საჭირო რეესტრის მოსაძებნად, დაგვჭირდება ფაილი PHP გაფართოებით ამ მოდულის საქაღალდედან. ზოგადად, ისინი ყველა ცხოვრობენ იმავე საქაღალდეში:
/wp-content/plugins
ამიტომ, სწორედ აქ უნდა მოძებნოთ სასურველი დირექტორია. მოდით შევხედოთ SyntaxHighlighter Evolved-ს, როგორც მაგალითად, რადგან... მას აქვს საკმაოდ უჩვეულო სიტუაცია, რადგან იყენებს რამდენიმე სტილის ფაილს იმისდა მიხედვით, თუ რა დიზაინის ვარიანტები აირჩიე ამ მოდულის პარამეტრებში.
როგორც ხედავთ, მე შევარჩიე ხედი, რომელიც იყო დანამატის მეორე ვერსიაში და გამოყენებულია ნაგულისხმევი SyntaxHighlighter ფერის სქემა. ახლა მე მომიწევს მის საქაღალდეში წასვლა ბლოგთან FTP-ის საშუალებით დაკავშირებით:
/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/styles
დააკოპირეთ ორი CSS ფაილის შიგთავსი, რომელთა გამორთვას ვგეგმავთ: shCore.css და shThemeDefault.css, რადგან ეს არის ზუსტად ის, რაზეც მიუთითებს თითი Page Speed (კარგი, პარამეტრებში მე მაქვს შერჩეული ნაგულისხმევი თემა, რისთვისაც, სავსებით ლოგიკურად, გვჭირდება CSS შესაბამისი სახელით).
ამის შემდეგ გახსენით რედაქტირებისთვის:
/wp-content/plugins/syntaxhighlighter/syntaxhighlighter.php
მერე მოძებნე და წაიკითხე. თქვენ უნდა მოძებნოთ ყველაფერი, რომელიც შეიცავს "CSS". syntaxhighlighter.php-ში ეს იქნება კოდის განყოფილება:
// თემის სტილის ფურცლების რეგისტრაცია wp_register_style("syntaxhighlighter-core", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shCore.css"), array(), $this->agshver); wp_register_style("syntaxhighlighter-theme-default", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeDefault.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-django", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeDjango.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-eclipse", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeEclipse.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-emacs", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeEmacs.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-fadetogrey", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeFadeToGrey.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-midnight", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeMidnight.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-rdark", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeRDark.css"), array("syntaxhighlighter-core"), $this->agshver);
ვნახოთ, რომელი რეგისტრები მოგვცემს საშუალებას გამორთოთ shCore.css და shThemeDefault.css სტილის ჩატვირთვა. ჩვენ ვაკოპირებთ მათ სახელებს (ჩემს შემთხვევაში ეს იქნება: syntaxhighlighter-theme-default და syntaxhighlighter-core) და ვამატებთ ორ დამატებით ხაზს functions.php-ში (თქვენი თემის მქონე საქაღალდედან) ზემოთ აღწერილი კოდის ნაწილს:
Wp_deregister_style("syntaxhighlighter-theme-default"); wp_deregister_style("syntaxhighlighter-core");
და გაიმეორეთ ეს WordPress-ის თითოეული მოდულისთვის, რომლისთვისაც აპირებთ ჩატვირთვის სტილის გამორთვას. იმედი მაქვს, რომ ყველაფერი თქვენთვის გასაგები და გასაგები გახდა. თუ არა, მაშინ ეცადე ხელახლა წაიკითხო, რადგან თემა არც ისე მარტივია გასაგებად, თუმცა ვცდილობ ტექსტი ზედმეტად არ გავართულო ან არ დამძიმდეს (ვის სჭირდება დეტალები, რადგან რაც უფრო მარტივია, მით უკეთესი).
ყველა განხორციელებული მანიპულაციის შედეგად, თქვენ გექნებათ ხაზების მთელი სია functions.php-ში დანამატების რეგისტრებით, რომელთა სტილები უნდა გამორთოთ. და ერთ საერთო CSS ფაილში, თემის მქონე საქაღალდიდან, ის შეიცავს თქვენი საიტის სტილის ყველა კოდს. კიდევ ერთხელ შეგახსენებთ - არ დაგავიწყდეთ შეკუმშვა ან, სხვა სიტყვებით რომ ვთქვათ, style.css-ის ოპტიმიზაცია გვერდის სიჩქარის მეშვეობით ზემოთ აღწერილი წესით.
Წარმატებას გისურვებ! მალე შევხვდებით ბლოგის საიტის გვერდებზე
შეიძლება დაგაინტერესოთ
Functions.php ფაილი WordPress თემის საქაღალდედან და მისი გამოყენების რეალური მაგალითები 
როგორ გავზარდოთ ვებსაიტის ჩატვირთვის სიჩქარე და გავაუმჯობესოთ სერვერის დატვირთვა უფასო თემები და შაბლონები WordPress-ისთვის - საიდან შეგიძლიათ ჩამოტვირთოთ ისინი 
როგორ მივიღოთ სწრაფი ვებ – გვერდი - სურათების და სკრიპტების ოპტიმიზაცია (შეკუმშვა), ასევე Http მოთხოვნების რაოდენობის შემცირება 
როგორ მოვძებნოთ და წაშალოთ გამოუყენებელი სტილის ხაზები (დამატებითი სელექტორები) თქვენი საიტის CSS ფაილში 
WordPress თემის (თარგის) ოპტიმიზაცია ჰოსტინგის სერვერზე დატვირთვის შესამცირებლად, WP Tuner მოდულისა და მონაცემთა ბაზაში მოთხოვნის რაოდენობის შესამცირებლად 
შექმნა CSS sprites Sprites Me ონლაინ გენერატორში, რათა შემცირდეს მოთხოვნის რაოდენობა სერვერზე 
თემები WordPress-ისთვის - რა შაბლონებისგან შედგება და როგორ მუშაობს ეს ყველაფერი 
WordPress-ში მეხსიერების მოხმარების შემცირება გვერდების შექმნისას - WPLANG Lite მოდული ლოკალიზაციის ფაილის ჩანაცვლებისთვის 
როგორ დავწეროთ სტატიები WordPress-ში - ვიზუალური და Html რედაქტორები, სათაურები და საკვანძო სიტყვების ხაზგასმა 
Gzip შეკუმშვა საიტის დატვირთვის დასაჩქარებლად - როგორ ჩართოთ ის Js, Html და Css-სთვის .htaccess ფაილის გამოყენებით
