Қаріпті пайдалану көптеген веб-беттерде кең таралған және жиі қателерді қамтиды. Бұл қателердің көпшілігі веб өнімділігі бюджетіне теріс әсер етеді. Бұл мақала веб-қаріпті пайдалану туралы ақпарат беруге және веб өнімділігін жақсартуға көмектесуге бағытталған.
Кез келген веб-бетті көрсету кезінде қолданылатын иерархияда көрсетілгендей, қаріп элементтері басқа элементтердің көрсетілуін олар жүктелгенше кейінге қалдырады. Бұл кешіктіруді дұрыс басқару жиынтық орналасу ауысуы (CLS) үшін де, пайдаланушы қабылдауы үшін де маңызды.
Қаріпті жүктеу мәселесі
Бет қаріптері жүктелмейінше, HTML және CSS көрсету процесі кезінде қаріптердің көрінуі браузерден браузерге дейін өзгереді. Мұнда әртүрлі браузерлер бұл жағдайды қалай өңдейтінінің қысқаша мазмұны берілген:
| Браузер | Қаріп дайын болмаса, әдепкі әрекет… |
|---|---|
| Edge | Қаріп дайын болғанша жүйелік қаріпті пайдаланады. Қаріпті ауыстырады. |
| Chrome | Мәтінді 3 секундқа дейін жасырады. Мәтін әлі дайын болмаса, қаріп дайын болғанша жүйелік қаріпті пайдаланады. Қаріпті ауыстырады. |
| Firefox | Мәтінді 3 секундқа дейін жасырады. Мәтін әлі дайын болмаса, қаріп дайын болғанша жүйелік қаріпті пайдаланады. Қаріпті ауыстырады. |
| Safari | Қаріп дайын болғанша мәтінді жасырады. |
Бұл мәселені сенбей шешу үшін шолғыш әрекеті туралы, font-display параметрі енгізілді. Қазіргі уақытта браузерлердің 92%-ы font-display параметрін қолдайды.
Қаріп-дисплей не істейді?
Бетті жүктеу процесі кезінде қаріптердің көрінісі шолғышқа байланысты толық жүктелгенше өзгеруі мүмкін. Мысалы, Safari браузерінің кейбір нұсқалары қаріп жүктелгенше мәтінді жасырады. The шрифт-дисплей: ауыстыру CSS параметрі қаріп файлдары жүктелгенше жүйелік қаріпті пайдаланып мәтінді көрсету арқылы осы әрекетті стандарттайды. Қаріптер жүктелгеннен кейін жүйе шрифті тағайындалған қаріпке ауыстырылады. Міне мысал пайдалану:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Қаріптерді алдын ала жүктеу
Қолдану критикалық көрсету жолына дейін қаріптерді жүктеу қаріптер жүктелу кезінде бос орындардың алдын алады.
БОНУС: Қаріптерді пайдаланудың салалық тәсілі
SimilarTech деректеріне сәйкес, интернет әлемінің маңызды трендін және суретін қарастырайық. Төмендегі бірінші график қаріпті пайдалануды көрсетеді жоғарғы 10,000 100,000 бетте, ал екінші график ең жақсы XNUMX XNUMX сайтта шрифт пайдалануын көрсетеді. Алдымен мына графиктерді қарастырайық:
Үздік 5 10,000 сайт пен ең жақсы 100,000 XNUMX сайт арасында Google Font және Font Awesome қолдануында XNUMX% айырмашылық бар.. Бұл бізге ең жақсы 10,000 XNUMX сайттың шрифт пайдалануын оңтайландырғанын көрсетеді. Мұны назар аударарлық тақырып ретінде қарастыруды ұсынамыз. Веб-қаріптерді өзіңіздің шешімдеріңізбен қалай енгізуге болатынын қарастырыңыз.
2-БОНУС: Google қаріп пен қаріп тамашасын пайдалану статистикасы
Бірінші бонусқа сілтеме жасай отырып, біз ең көп қолданылатын қаріптер кітапханаларының сандық көлемін көрсететін екі графикті қарастыруды ұсынамыз. Мұнда бірегей домендердің саны миллионнан асады, және бұл миллиондар сіздің SEO бәсекелестеріңізді білдіреді. Бұл кітапханаларды басқаларға қарағанда жақсырақ және оңтайлы пайдалану сізге ерекшеленуге көмектеседі.
Осы кеңестерді орындау және қаріпті пайдалануды оңтайландыру арқылы веб өнімділігін және пайдаланушы тәжірибесін айтарлықтай жақсартуға болады.
