Sobes.tech
Интервиев Хелп
Ресурси
Припрема за интервју
Ресурси
Тражење посла
Ресурси
Правна
Назад на питања
Middle

Koje metode optimizacije stranice poznajete?

sobes.tech АИ

Одговор од АИ

  • Минификација и компресија ресурса:

    • HTML, CSS, JavaScript: Уклањање сувишних размакника, коментара, нових линија, скраћивање имена променљивих.
    • Слике: Оптимизација формата (WebP, AVIF), компресија без губитака, коришћење одзивних слика.

  • Користите CDN (Content Delivery Network): Распоређивање статичних ресурса са најближим серверима кориснику смањује кашњење.

  • Кеширање у прегледачу: Подешавање одговарајућих HTTP заглавља (Cache-Control, Expires) за кеширање статичних ресурса на страни клијента.

  • Ленијско учитавање (Lazy Loading): Одложено учитавање слика, видео снимака и других тешких ресурса до тренутка када се појаве у видљивом делу екрана корисника.

  • Асинхроно и одложено учитавање JavaScript и CSS: Коришћење атрибута async и defer за не блокирајуће извршавање скрипти, учитавање CSS ван критичког пута рендеринга.

  • Оптимизација критичног CSS: Уметање минималног скупа CSS за приказ првог екрана странице директно у HTML <head>, остали CSS се учитава асинхроно.

  • Смањење броја HTTP захтева:

    • Уједињење CSS и JavaScript фајлова.
    • Коришћење спрајтова за мале слике.

  • Оптимизација фонтова:

    • Коришћење формата WOFF2.
    • Примена font-display.
    • Предзагрузка критичних фонтова.

  • Користите Server-Side Rendering (SSR) или Static Site Generation (SSG): Рендеровање дела или целе странице на серверу пре слања клијенту, што побољшава време до првог садржаја и индексирање.

  • Оптимизација слика:

    • Правилне величине за различите уређаје.
    • Коришћење <picture> и srcset.
    • Компресија уз губитак квалитета.

  • Користите Resource Hints (preconnect, prefetch, preload): Савети прегледачу о ресурсима који ће можда бити потребни ускоро.

    <!-- Повезивање са доменом пре захтева ресурса -->
<link rel="preconnect" href="https://example.com">
<!-- Предзагрузка ресурса -->
<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Предварско преузимање ресурса -->
<link rel="prefetch" href="/next-page.html">

  • Оптимизација DOM: Минимализација дубине DOM стабла, избегавање скупа операција читања/писања DOM у циклусима.

  • Оптимизација рендеринга (Layout, Paint, Composite): Избегавање принудних поновних калкулација стилова и распореда, коришћење CSS својстава која не изазивају поновно приказивање целе странице (нпр. transform, opacity уместо top, left).

  • Користите Web Workers: Пренос ресурсоемких израчунавања у одвојене токове како бисте спречили блокирање главног UI тока.

  • Прогресивно учитавање: Приказивање садржаја постепено током његовог учитавања.

ПретходноСледеће