Ідэальная галоўная: 7 лепшых практык па аптымізацыі галоўнай старонкі

1. 1. Серверная аптымізацыя
2. 2. Аптымізацыя файлаў JS, CSS
3. 3. Web-шрыфты
4. 4. Кэшаванне файлаў
5. 5. CDN
6. 6. AMP
7. 7. Аптымізацыя кантэнту

Жаданне напоўніць галоўную старонку інфармацыяй па максімуму цалкам апраўдана. Але ў выніку можа атрымацца масіў кантэнту, які будзе загружацца 10-15 секунд. Як гэта аптымізаваць? Давайце разбярэмся ў гэтым артыкуле.

1. Серверная аптымізацыя

Павялічце рэсурсы хостынгу. Калі ёсць магчымасць павялічыць рэсурсы - welcome! Тым больш, што недахоп рэсурсаў хостынгу - гэта самая частая прычына тармажэння «невялікіх» сайтаў (сайт-візітоўка, інтэрнэт-крама, і г.д.) сёння.

Аптымізуе працу базы дадзеных. Спрошчана, задача сайта - збіраць дадзеныя, захоўваць іх у базе дадзеных і адлюстроўваць у патрэбны момант на патрэбнай старонцы. Таму лагічна, што большая частка часу траціцца на запыты да базы дадзеных і чаканне атрымання неабходнай інфармацыі. Калі БД дрэнна структураваная, забітая неактуальнымі дадзенымі, дапушчаныя памылкі ў напісанні запытаў, то хуткасць атрымання інфармацыі можа значна знізіцца.

Аптымізацыю базы дадзеных лепш даверыць дасведчанаму праграмісту - каб дасягнуць максімальных вынікаў без страты важнай інфармацыі.

Выправіць гэта можна пры дапамозе:

• Аптымізацыі структуры базы дадзеных. «Раскладзеце» усю інфармацыю па сваіх «месцах» - гэта спросціць пошук і, адпаведна, паскорыць атрыманне інфармацыі.
• Аптымізацыі запытаў. Правільна складзеныя запыты на атрыманне інфармацыі «дапамогуць» онлайн-рэсурсу хутчэй знайсці неабходныя дадзеныя ў базе дадзеных.

Ursus Wehrli «The Art Of Clean Up»

Выкарыстоўвайце сервернае кэшаванне. Гэта сапраўды магутны, універсальны спосаб. Проста змяшчайце вынік вылічэнні ў кэш і не забывайце перыядычна абнаўляць. Так вы зменшыце нагрузку на сервер і паскорыце загрузку старонкі.

2. Аптымізацыя файлаў JS, CSS

Адначасовае падлучэнне некалькіх CSS-файлаў вельмі «расцягвае» у часе загрузку старонкі браўзэрам. Рацыянальнае рашэнне - звядзенне некалькіх СSS-файлаў у адзін. Яго варта падключаць ў пачатку старонкі. Гэтыя ж правілы працуюць для JS-файлаў, толькі падключэнне ажыццяўляецца ўнізе старонкі. Файлы, якія мы звялі, мінімізуем. Для гэтай мэты падыходзяць спецыяльныя праграмныя ўтыліты, а таксама онлайн-сэрвісы.

Файлы стыляў (CSS) адказваюць за знешні выгляд (шрыфт, колер, пазіцыю) элементаў на старонцы. Файлы скрыптоў (JS) рэалізуюць дынамічныя эфекты (табы, выпадаючыя спісы, анімацыі і г.д.).

Мінімальны памер файлаў - абавязковае патрабаванне для галоўнай старонкі сайта. Таму мы рэкамендуем падгружаць толькі той праграмны код, які актуальны для галоўнай.

Чым больш візуальных эфектаў і анімацый засяроджана на старонцы, тым даўжэй яна будзе загружацца. Галоўная задача - знайсці ідэальны баланс.

3. Web-шрыфты

Выкарыстанне сучасных фарматаў WOFF2 і WOFF дазваляе скараціць трафік web-шрыфтоў і аператыўна іх атрымаць. Для максімальна эфектыўнай аптымізацыі ужывайце толькі тыя наборы знакаў, якія выкарыстоўваюцца на сайце.

Дасягненне балансу паміж эстэтыкай і прадукцыйнасцю старонкі магчыма пры выкарыстанні СSS-уласцівасцяў Font-display. Так вы зможаце кіраваць рэакцыяй браўзэра - пачакаць шрыфт або маляваць запасны, напрыклад. Хуткаму адлюстравання web-шрыфтоў таксама спрыяе іх папярэдняя загрузка link rel = «preload».

Не варта выкарыстоўваць на адной старонцы больш аднаго-двух шрыфтоў. Тлустага і Курсіўны тэкст будзе дастаткова для выдзялення неабходнай кантэнту.

4. Кэшаванне файлаў

Для рэдка абнаўляюцца элементаў на старонцы раім наладзіць кэшаванне - так яны будуць выклікацца з кэша браўзэра, а не з сервера. Выкарыстанне раней загружаных элементаў падчас паўторнага наведвання сайта дазволіць знізіць чашчыннасць http-запытаў да сервера. А гэта, у сваю чаргу, станоўчым чынам адаб'ецца на хуткасці загрузкі Вашай старонкі.

Закешированные файлы (малюнкі, відэа, шрыфты і г.д.) захоўваюцца на кампутары ў карыстальніка і адлюстроўваюцца ў браўзэры імгненна.

5. CDN

CDN (Сетка дастаўкі кантэнту) - вялікая колькасць вэб-сервераў па ўсім свеце, якія ўяўляюць сабой сеткавую інфраструктуру. Выкарыстанне CDN спрыяе высокаму якасці і вялікай хуткасці перадачы дадзеных. Сетка дазваляе падгружаць на сайт бібліятэкі CSS і JS, і адначасна зніжае нагрузку на ваш сервер.

Выкарыстанне CDN асабліва актуальна, калі сайт наведваюць карыстальнікі з розных краін. Файлы будуць загружацца з мясцовых сервераў, што значна паскорыць загрузку старонкі.

6. AMP

AMP - Паскораныя мабільныя старонкі - сумесная распрацоўка Google, IT-кампаній з сусветнымі імёнамі, уладальнікаў і распрацоўшчыкаў сайтаў. Тэхналогія з адкрытым кодам нацэлена на зніжэнне «вагі» сайта і імгненную яго загрузку. За кошт хуткай загрузкі і адаптацыі пад мабільныя дэвайсы старонкі з Амр выстройваюцца вышэй за іншых у спісе пошукавых запытаў.

Амр ідэальна падыдзе, калі вы збіраецеся аптымізаваць працу мабільнай версіі, раздзелы паніжанай функцыянальнасці, блогі, інтэрнэт-часопісы, інфармацыйныя рэсурсы.

7. Аптымізацыя кантэнту

Чым больш мультымедыя і складанай графікі - тым больш праблематычна загрузка старонкі браўзэрам. Для аптымізацыі змесціва важна выбраць аптымальны фармат файлаў. Для малюнкаў найбольш папулярныя такія фарматы:

• JPEG - добры для фатаграфій, шматколерных, дэталізаваных малюнкаў
• PNG - для малюнкаў высокай якасці з празрыстасцю
• SVG - для аніміраванай і інтэрактыўнай вектарнай графікі.

Для скарачэння памераў графічных файлаў распрацаваны адмысловыя ўтыліты, што вырашаюць пытанне без страты якасці. Галоўнае - не перашчыраваць з параметрамі кампрэсіі.

Калі хочацца дадаць відэа - наперад! Толькі ўлічыце, што яно «есць» шмат рэсурсаў. Для зніжэння нагрузкі на сервер рэкамендуем выкарыстоўваць папулярныя сэрвісы Vimeo або Youtube.

Праверце сябе! Для таго, каб праверыць, ці мае патрэбу Ваш сайт у аптымізацыі, можна выкарыстоўваць зручны інструмент PageSpeed ​​Insights ад Google. Дастаткова ўвесці адрас сайта - і Вы ўбачыце праблемныя месцы дэсктопнай і мабільнай версій, а таксама парады ад Google па іх ліквідацыі.

Прыклад паспяховай аптымізацыі галоўнай старонкі сайта tomahawk.in.ua

Прафесійная аптымізацыя галоўнай старонкі забяспечыць карыстачам камфорт і, адпаведна, добрае ўражанне ад узаемадзеяння з онлайн-праектам. А яшчэ - палепшыць пошукавую бачнасць сайта па ключавых словах.

Хопіць "тармазіць" на старце. Аптымізуе!