JS და CSS საიტის კოდის ოპტიმიზაცია ონლაინ - დეტალური სახელმძღვანელო

ბეჭდვა · დრო на чтение: 8მინ · მიერ · გამოქვეყნდა · განახლებულია

გამრავლებამოუსმინეთ სტატიას

JS და CSS კოდების ოპტიმიზაცია.

ვებსაიტის JS და CSS კოდების ოპტიმიზაცია, ერთ-ერთი ყველაზე მნიშვნელოვანი ასპექტია ვებსაიტის ტექნიკური ოპტიმიზაცია. ამის მიზეზი არის საიტის მეტი რესურსის გამოშვება, მონაცემთა ბაზის ზარების შემცირებისა და თავად კოდის სტრუქტურის გაუმჯობესებული წაკითხვის გამო.

ჩვეულებრივ, JavaScript და CSS კოდის ოპტიმიზაცია სერიოზულად ზრდის საიტის რეაგირების სიჩქარეს. ამრიგად, საიტი უფრო სწრაფად მუშაობს და სერვერის ნაწილს ნაკლებად სერიოზულად იტვირთება.

JS და CSS საიტის კოდი - რა არის ეს?

როგორ გავაუმჯობესოთ JS და CSS.

JavaScript და CSS არის საერთო პროგრამირების ენები, რომელთაგან თითოეულს მოაქვს გარკვეული ფუნქციონირება საიტზე. ძირითადი ვებ პროგრამირების ენების HTML, JS, CSS გამოყენების წყალობით მიიღწევა მომხმარებლის იდეალური ურთიერთქმედება საიტთან.

JavaScript არის საერთო პროგრამირების ენა. საშუალებას გაძლევთ შექმნათ სხვადასხვა სკრიპტები. ამ სკრიპტების უმეტესობა შესრულებულია მომხმარებლის ბრაუზერში. JavaScript აძლიერებს მომხმარებლის ურთიერთქმედებას საიტთან. ინფორმაციის გარკვეული ნაკრების გამოტანა საიტზე მინი-აპლიკაციების (სკრიპტების) გამოყენებით. JS სკრიპტების ვიზუალიზაცია და გამომავალი ხდება ამ უკანასკნელის მიერ გვერდის HTML კოდში. თითქმის ყველა საიტი იყენებს JS (JavaScript) მათ შემადგენლობაში.

css - ეხება საიტის ერთ-ერთ მთავარ პროგრამირების ენას. CSS (სტილის ფაილი) - შეიცავს ინფორმაციას საიტის თითქმის ნებისმიერი ელემენტის გარეგნობის შესახებ. ფერიდან და მდებარეობიდან კონკრეტული გვერდის ელემენტის ყბადაღებულ ანიმაციამდე.

JS და CSS კოდის ოპტიმიზაცია - რატომ არის საჭირო?

JS და CSS - თავისთავად, მათ აქვთ საკმაოდ დიდი წონადი კოდი, რომელსაც აქვს ბევრი ზედმეტი. ბრაუზერს უჭირს კოდების უზარმაზარი ტილოს წაკითხვა წამში. ამრიგად, გვერდის და მთლიანად საიტის დატვირთვა შენელდება. ამ ფაილების ოპტიმიზაცია მიზნად ისახავს კოდის ზომის შემცირებას, ყველაფრის ზედმეტი ამოჭრას. ეს ეხება:

  • გამოუყენებელი და დამატებითი სიმბოლოები;
  • სივრცეები;
  • კოდის დაუმთავრებელი და არაფუნქციონალური ხაზები.
თავად პროცესი ჩვეულებრივი ფაილის შეკუმშვის მსგავსია. ამ უკანასკნელის წონა და ზომა გაცილებით მცირე ხდება. მაგრამ, მიუხედავად ამისა, კოდი ადამიანისთვის სრულიად გაუგებარი ხდება. მაგრამ საძიებო რობოტები და ბრაუზერები შესანიშნავად გვერდს უვლიან და ესმით ფაილის მთლიან სტრუქტურას. რაუნდზე გატარებული დრო რამდენჯერმე მცირდება. ამ შეკუმშვის წყალობით, ჩამოტვირთვის სიჩქარე იზრდება და საერთო პასუხი უმჯობესდება.

Gzip მოდული Apache-სთვის, Nginx-ისთვის და Node.js-ისთვის

Gzip არის საოცარი ტექნოლოგია, რომელიც შეიქმნა იმ დროს, როდესაც ინტერნეტი არ იყო ისეთი სწრაფი, როგორც დღეს არის. არქივები პოპულარული ტექნოლოგია იყო (მას შემდეგ მათი პოპულარობა შემცირდა, რადგან USB ფლეშ დრაივებს შეუძლიათ 1 ტბ-მდე მეხსიერების უზრუნველყოფა).

იდეა იყო არქივების გამოყენება ინტერნეტში ვებ ტრაფიკისთვის (მსგავსი ვებგვერდის ფაილების შექმნისას), ამიტომ gzip შეიქმნა ვებ სერვერებზე ფაილების შეკუმშვისთვის სტატიკური (ტექსტური) ფაილების შეკუმშვით მათი თავდაპირველი ზომის 99%. იმის გამო, რომ JavaScript არის ტექსტური ფაილი, gzip შეიძლება გამოყენებულ იქნას JavaScript ფაილების შეკუმშვისთვის, ასევე გვერდის დატვირთვის დროის შესამცირებლად.

Javascript-ის ოპტიმიზაცია მინიფიკაციით

ოპტიმიზაცია არის JavaScript მინიფიკაციის სპეციალური ტიპი. ასეთი მინიმიზატორები არა მხოლოდ აშორებენ არასაჭირო სივრცეებს, მძიმეებს, კომენტარებს და ა.შ., არამედ ხელს უშლიან „მკვდარი კოდის“ თავიდან აცილებას:

  • Google-ის დახურვის შემდგენელი
  • UgifyJS
  • Microsoft AJAX მინიფიკატორი

CSS ოპტიმიზაცია ვებ შრიფტის გამოყენებისთვის

Google Fonts-მა და შრიფტების მსგავსმა შემქმნელებმა მოახდინეს რევოლუცია ვებ შრიფტებში, მაგრამ შრიფტის კოდის რამდენიმე სტრიქონმა შეიძლება მოიხმაროს ასობით კილობაიტი სიჩქარეს.

  1. ჩამოტვირთეთ მხოლოდ თქვენთვის საჭირო შრიფტები: წაშალეთ გამოუყენებელი შრიფტები და შეამოწმეთ თუ საჭიროა ახალი შრიფტები.
  2. ჩამოტვირთეთ მხოლოდ თქვენთვის საჭირო წონები და სტილები: შრიფტების მწარმოებლების უმეტესობამ შეიძლება შეზღუდოს ჩამოტვირთვები გარკვეული სიმბოლოების ნაკრებით (მაგალითად, მხოლოდ ლათინური), წონით (სისქე) და დახრილი ასოებით (დახრილი). ბრაუზერებმა შეიძლება ავტომატურად გამოიტანონ დაკარგული სტილები, თუმცა შედეგები შეიძლება იყოს ცუდი.
  3. შეზღუდეთ თქვენთვის საჭირო სიმბოლოების რაოდენობა: იშვიათად გამოყენებული შრიფტები შეიძლება შემოიფარგლოს გარკვეული სიმბოლოებით. მაგალითად, სათაური "CSS Tutorial" Open Sans-ში შეიძლება განისაზღვროს & text= პარამეტრის დამატებით Google Fonts-ის მოთხოვნის სტრიქონში: fonts.googleapis.com/css? ოჯახი=Open+Sans&text=CStuorial
  4. განვიხილოთ ცვლადი შრიფტები: ცვლადი შრიფტები განსაზღვრავენ სტილის, წონისა და დახრილის მრავალფეროვნებას ვექტორული ინტერპოლაციის გამოყენებით. შრიფტის ფაილი ოდნავ უფრო დიდია, მაგრამ საჭიროა მხოლოდ ერთი და არა მრავალჯერადი. რეკურსიული შრიფტი აჩვენებს ცვლადი შრიფტების მოქნილობას.
  5. ჩამოტვირთეთ შრიფტები თქვენი ლოკალური სერვერიდან. თვითჰოსტინგის შრიფტები უფრო ეფექტურია. საჭიროა ნაკლები DNS ძიება და შეგიძლიათ შეზღუდოთ WOFF2-ის ჩატვირთვა, რომელსაც ყველა თანამედროვე ბრაუზერი უჭერს მხარს. ძველი ბრაუზერები (IE) შეიძლება დაუბრუნდნენ OS შრიფტს.
  6. განვიხილოთ OS-ის შრიფტები: ეს 500K ვებ შრიფტი შეიძლება მშვენივრად გამოიყურებოდეს, მაგრამ ვინმე შეამჩნევს თუ გადახვალთ საზოგადოებრივ დომენზე Helvetica, Arial, Georgia ან Verdana? OS-უსაფრთხო ან ვებ-უსაფრთხო შრიფტები პროდუქტიულობის გაუმჯობესების მარტივი გზაა.

შესაბამისი შრიფტის ჩამოტვირთვის ვარიანტის გამოყენებით

ვებ შრიფტების ჩატვირთვას და დამუშავებას შეიძლება რამდენიმე წამი დასჭირდეს. Შენ გჭირდება:

  1. უსტიილი ტექსტის ციმციმის ჩვენება (FOUT): პირველი ხელმისაწვდომი სარეზერვო შრიფტი გამოიყენება ჯერ, მაგრამ ის შეიცვლება, როდესაც ვებ შრიფტი მზად იქნება.
  2. უხილავი ტექსტის ციმციმის ჩვენება (FOIT): ტექსტი არ არის ნაჩვენები, სანამ ვებ შრიფტი მზად არ იქნება. ეს არის ნაგულისხმევი პროცესი თანამედროვე ბრაუზერებში, რომლებიც, როგორც წესი, ელოდება სამ წამს, სანამ დაუბრუნდება სარეზერვო შრიფტს.
    არც ერთი არ არის სრულყოფილი.
font-display CSS თვისებას და Google Font & display= პარამეტრს შეუძლია აირჩიოს ალტერნატივა:
  • auto: ბრაუზერის ნაგულისხმევი ქცევა (ჩვეულებრივ FOIT).
  • ბლოკი: ეფექტურად FOIT. ტექსტი უხილავია სამ წამამდე. შრიფტის ჩანაცვლება არ ხდება, მაგრამ ტექსტი შეიძლება გამოჩნდეს გარკვეული პერიოდის შემდეგ.
  • გაცვლა: ეფექტურად FOUT. პირველი ჩანაცვლება გამოიყენება მანამ, სანამ ვებ შრიფტი ხელმისაწვდომი იქნება. ტექსტი დაუყოვნებლივ იკითხება, მაგრამ შრიფტის შეცვლის ეფექტი შეიძლება იყოს შემაშფოთებელი. შრიფტის სტილის შესატყვისი შეიძლება გამოყენებულ იქნას ანალოგიური ზომის ჩანაცვლების დასადგენად.
  • სარეზერვო: კომპრომისი FOIT-სა და FOUT-ს შორის. ტექსტი უხილავია მოკლე დროში (ჩვეულებრივ 100 ms), შემდეგ გამოიყენება პირველი ჩანაცვლება, სანამ ვებ შრიფტი ხელმისაწვდომი იქნება.
  • სურვილისამებრ: სარეზერვო მსგავსი, გარდა არ არის შრიფტის ჩანაცვლება. ვებ შრიფტი გამოყენებული იქნება მხოლოდ იმ შემთხვევაში, თუ ის ხელმისაწვდომია საწყის პერიოდში. პირველი გვერდის ხედზე დიდი ალბათობით გამოჩნდება სარეზერვო შრიფტი, ხოლო შემდგომი გვერდის ნახვები გამოიყენებენ ჩამოტვირთულ და ქეშებულ ვებ შრიფტს.

სვოპის, სარეზერვო ან სურვილისამებრ გამოყენებამ შეიძლება შესამჩნევი გაზარდოს შესრულება.

JS და CSS კოდების ოპტიმიზაცია ონლაინ

ინტერნეტში არის საკმაოდ დიდი რაოდენობით ონლაინ სერვისები. რომლებიც რამდენიმე წუთში შეძლებენ JavaScript-ისა და სტილის ფაილების შეკუმშვის ყველა რუტინულ სამუშაოს. ყველა მათგანს აქვს კოდთან მუშაობის საკუთარი ალგორითმი. ასეთი მრავალფეროვნების ფონზე შეიძლება გამოიყოს ორი ყველაზე მნიშვნელოვანი სერვისი. მათი ეფექტური შეკუმშვის ბარიერი გაცილებით მაღალია, ვიდრე მსგავსი კონკურენტი ონლაინ ინსტრუმენტები. მოდით უფრო ახლოს მივხედოთ ამ ორ ვებ ინსტრუმენტს:

cssresizer.com
84%-ის შეკუმშვის ეფექტურობა ახლო კონკურენტებთან შედარებით. კოდის მოქმედება შენარჩუნებულია, თუნდაც მნიშვნელოვანი შეკუმშვით. ამ გზით შეგიძლიათ მიიღოთ შესანიშნავი ოპტიმიზირებული კოდი. ამ ინსტრუმენტთან მუშაობა ინტუიციურია და არსებობს შეკუმშვის რამდენიმე მეთოდი:

  • მაქსიმალური;
  • სწრაფი;
  • დეკომპრესია;

შეკუმშვა შეგიძლიათ შემდეგნაირად:

  • URL - მისამართი;
  • Ფაილის ატვირთვა;
  • კოდის პირდაპირი შეყვანა;

CSSResizer - პროფესიონალური CSS შეკუმშვა.

Refresh-sf.com

კიდევ ერთი, მაგრამ თანაბრად ძლიერი ვებ ინტერფეისი JavaScript, CSS და HTML-ის მინიმიზაციისთვის. ინსტრუმენტი იყენებს UglifyJS 2, Clean-CSS და HTML Minifier სამუშაოდ. შეკუმშვის ეფექტურობა ამ შემთხვევაში აღწევს 85%, კოდის მოქმედების აშკარა დარღვევის გარეშე. შეკუმშვა შეიძლება განხორციელდეს ინსტრუმენტის ფანჯარაში კოდის პირდაპირ შეყვანით.

Refresh-SF არის ონლაინ JavaScript და CSS კომპრესორი.

შეამცირეთ JS და CSS CMS Wordpress დანამატებით

როგორც ყველამ ვიცით, მას აქვს მნიშვნელოვანი გავრცელება მთელს მსოფლიოში. 2018 წლის მონაცემებით ეს სმს წამყვან პოზიციას იკავებს. განვიხილოთ რამდენიმე პოპულარული ოპტიმიზაციის მოდული სპეციალურად WordPress-ისთვის:

მოდულის ავტომატიზაცია

HTML, JS და CSS ოპტიმიზაციის მოდული. ეს არის ერთ-ერთი ყველაზე პოპულარული დანამატი საიტების აჩქარებისთვის CMS Wordpress-ზე. მას აქვს მარტივი და ფუნქციონალური კონფიგურაციის ინტერფეისი. შეკუმშვის პროცესი ხდება ფრენის დროს.

  • ოპტიმიზაცია (HTML, JS, CSS) და CDN დაყენება.
  • ემოჯიების, Google ფონტების, მოთხოვნის სტრიქონების ამოღება სტატიკური რესურსებიდან.
  • სურათების ოპტიმიზაციის უნარი.

ავტომატური ოპტიმიზაცია - მოდული შეკუმშავს სტილებს/სკრიპტებს/HTML-ს.

Webcraftic Clearfy Plugin

არც ისე ძველი, როგორც წინა მოდული. მაგრამ ის ასევე მოთხოვნადი და პოპულარულია მსგავს კონკურენტებს შორის. Webcraftic Clearfy - აქვს საკმაოდ რთული კონფიგურაციის ინტერფეისი. შედგება დანამატების კომბინირებული კომბინაციისგან, საუკეთესო შედეგისთვის.

პარამეტრების გვერდები დაყოფილია მენიუს სექციებად. ამრიგად, შესაძლებელია საიტის კონკრეტული ნაწილების ოპტიმიზაცია, მაგალითად, HTML. რისი გაკეთება შეუძლია ამ დანამატს?

  • ოპტიმიზაცია (სურათები, JS, CSS, HTML და სკრიპტები);
  • კირიული ტრანსლიტერაცია და დუბლიკატების ამოღება. alt ატრიბუტებთან მუშაობა და შესაბამისი robots.txt შექმნა. სერვერის სათაურებთან და მათ პასუხებთან მუშაობა.
  • WordPress-ის გამოუყენებელი ვიჯეტების წაშლა.
  • WordPress-ის ვერსიის დამალვა და მოთხოვნის ცვლადების ამოღება სტატიკური მოთხოვნებიდან. ავტორის შესვლისა და ადმინისტრატორის შესვლის გვერდის დამალვა.
  • კომენტარების გლობალური ამოღება ან გაწმენდა. შეინახეთ კონტროლი კომენტარებში.
  • WordPress პულსის და ზედა ადმინისტრაციული პანელის დაყენება.
  • მოდულის კომპონენტებზე კონტროლი.

Webcraftic Clearfy არის უფასო ოპტიმიზაციის მოდული.

დასასრულს, შეიძლება გარკვეული დასკვნის გაკეთება. ზემოაღნიშნულიდან გამომდინარე, js-ისა და css-ის შეკუმშვა არც ისე რთული საქმეა. ამ ქმედებების წყალობით, თქვენი პროექტის რეაგირების სიჩქარე მნიშვნელოვნად გაიზრდება.

გმადლობთ, რომ კითხულობთ ნიკოლა ტოპს

რამდენად სასარგებლოა პოსტი?

დააწკაპუნეთ სმაილზე შეფასებისთვის!

საშუალო რეიტინგი 5 / 5. შეფასებების რაოდენობა: 14

ჯერ არ არის რეიტინგები. ჯერ შეაფასეთ.

ასევე შეიძლება მოგეწონოთ...

კომენტარის დატოვება

თქვენი ელფოსტის მისამართი გამოქვეყნებული არ იყო. აუცილებელი ველები მონიშნულია *

ცხრამეტი − თვრამეტი =