Веб-бет өнімділігін оңтайландыру

Бұл мақаланы тыңдаңыз

Веб-сайттар әдетте екі бөлікке бөлінеді: фронт-end және backend. Фон веб-сайттың функцияларын жүзеге асыру үшін пайдаланылатынын түсінуге болады, мысалы: пайдаланушыны тіркеуді жүзеге асыру, құпия сөздерді өзгерту, мақалаларға түсініктеме беру және т.б. Бірақ фронтон туралы не деуге болады? Шын мәнінде, бұл өнімділік функциясы болуы керек. Пайдаланушының қолжетімділігіне әсер ететін факторлардың көпшілігі сайттың сыртқы беттерін оңтайландырумен байланысты. Бетті оңтайландыру – бұл мақалада осы процеске шолу жасалады.

Мақаланың мазмұны:

• 1. Бетті жүктеу уақытын оңтайландыру
• 2. Барлық қысылатын ресурстарды қысыңыз
• 3. Сайт кэшін оңтайландыру
• 4. Критикалық көрсету жолы

1. Бетті жүктеу уақытын оңтайландыру

Бетті оңтайландыру - бұл ресурстар мүлде жүктелмеген кезде. Сондықтан жүктелген қажет емес ресурстардың санын азайтуға тырысыңыз.

1. Сайтыңыздың кейбір тәуелділіктері қажет екенін бағалаңыз және артықшылықтар мен кемшіліктерді таразылаңыз.
2. Тәуелді жүктеу жолы сенімді ме және ол қол жетімді болмаған кезде бүкіл бетті блоктайды ма.

2. Барлық қысылатын ресурстарды қысыңыз

1. Кодтың барлығы қысылған болуы керек.
2. Қажет емес суреттерді жойыңыз.
3. Суреттердің орнына css3 пайдаланыңыз.
4. Жоғарырақ қысу коэффициенті бар кескіндерді пайдаланыңыз. Әсіресе GIF файлдары, кейбір бейне пішімдері (H.264 немесе WebM) GIF файлдарынан әлдеқайда аз.
5. Кескіндерді емес, WordArt қаріптерін пайдаланыңыз.
6. Жаңарақ браузерлері бар пайдаланушылар үшін заманауи кескін пішімдерін қамтамасыз етіңіз (мысалы: WebP).
7. Әр түрлі бет өлшемдері үшін бірнеше ажыратымдылығы бар растрлық кескіндер.
8. Кескіннің ені мен биіктігін көрсетіңіз, әйтпесе кесу орын алуы мүмкін.
9. HTTP/2 пайдаланыңыз. Мысалы, спрайт - HTTP сұрауларының санын азайтатын көптеген кішкентай кескіндерден тұратын үлкен кескін. Дегенмен, кэштеу қиын, ал кішкентай кескінді өзгерту барлық кішкентай кескіндердің кэшін жарамсыз етеді. HTTP/2, бірнеше сұрауларды сілтемеден бастауға болады, бұл спрайттардың қажеттілігін болдырмайды.

3. Веб-сайт кэшін оңтайландыру

Браузерді кэштеу механизмі:

1. Бетке кіріңіз, әртүрлі ресурстарды сұраңыз және браузер жергілікті кэштің бар-жоғын тексереді.
2. Олай болса, ресурстың мерзімі өткенін тексеріңіз. Мерзімі аяқталмаған, кэшті тікелей пайдаланыңыз. Оның мерзімі біткен кезде серверге сұрау жіберіледі.
3. Etag және соңғы өзгертілген тақырып өрістері жіберілген сұрауға қосылады.
4. Шолғыш кэштелген ресурстың қол жетімді еместігін анықтау үшін сервер Etag және соңғы өзгертілгенін пайдаланады.
5. Ресурс әлі де жарамды болса, браузерге кэшті пайдалануды айту үшін 304 жауап кодын қайтарыңыз. Әйтпесе, жаңартылған ресурсты қайтарыңыз.

Осы логика жиынтығына сәйкес веб-сайт кэшін жоспарлауға болады.

Ресурс мерзімі ерте бітсе, шолғышты ресурсты жаңарту туралы қалай хабарлауға болады?

Бұл әдетте мүмкін емес, себебі браузер ресурстың мерзімі аяқталмағанын көреді және сұрауды мүлде жасамайды. Бірақ бұған ресурстың URL мекенжайын өзгерту арқылы қол жеткізуге болады. Сондықтан ресурстың файл атына нұсқа нөмірін немесе кездейсоқ тегті қосу керек. Мысалы style.12.css. Яғни, браузерге html файлын кэштеуге рұқсат бермеңіз, әйтпесе браузер оның мерзімі біткенше серверді сұрамайды.

4. Критикалық көрсету жолы

Браузер веб-бетті келесі қадамдармен көрсетеді:

1. HTML белгілеуін өңдеңіз және DOM ағашын жасаңыз.
2. CSS белгілеуін өңдеңіз және CSSOM тармағын жасаңыз.
3. DOM және CSSOM рендеринг ағашына біріктіріңіз.
4. Әрбір түйіннің геометриялық ақпаратын есептеу үшін көрсету ағашына сәйкес орналасу.
5. Экрандағы әрбір түйінді сызыңыз.

Критикалық көрсету жолын оңтайландыру веб-бетті мүмкіндігінше жылдам көрсету үшін көрсету процесін оңтайландыруды білдіреді.

css

CSS файлдары көрсетуді блоктайды. Браузер DOM ағашын құрастырғаннан кейін, ол CSSOM ағашының аяқталуын күтуі керек. Стандартты емес CSS-ті болдырмау және браузерге CSS файлын мүмкіндігінше тезірек сұрауға мүмкіндік беретін құжаттың жоғарғы жағындағы тег.

CSS файлдарында @import қолданбауын болдырмаңыз, себебі браузер импортталған CSS файлын импортты қамтитын файл жүктеліп, құрастырылғаннан кейін ғана тауып жүктейді. Қосымша сұрауларды қажет етпейтін және негізгі мазмұнды көрсетуге тыйым салмайтын кірістірілген CSS пайдалануды қарастырыңыз.

js

Java сценарийі CSSOM құрастырылмайынша орындала алмайды. js сонымен қатар DOM ағашының құрылуына жол бермейді. Тегте синхрондау белгіленбесе.

Енді сіз бетті оңтайландыру деген не екенін және оның қалай құрылғанын түсінесіз. Бұл процестерді түсіну сайт беттерін жылдам оңтайландыруға, сұрауларды азайтуға және жүктеуді жылдамдатуға көмектеседі.

Осы мақаланы оқу:

• CSS оңтайландыру - веб-сайтыңызды жылдамдатудың 21 жолы
• JS және CSS сайт кодын онлайн режимінде оңтайландыру - егжей-тегжейлі нұсқаулық

Оқығаныңыз үшін рахмет: SEO HELPER | NICOLA.TOP