DEV Community: Stanchev

Оптимизация на производителността в Next.js

Stanchev — Fri, 20 Mar 2026 18:24:04 +0000

Next.js 14/15 - важни бележки преди да започнем

Минималната версия на Node.js е вече 18.17
Командата next export е заменена с output: 'export' в next.config.js
Пакетът @next/font е премахнат - използвай вградения next/font
API-та като cookies, headers и draftMode са вече async в Next.js 15 (изисква await)
fetch заявките вече не се кешират по подразбиране - използвай cache: 'force-cache' ако ти трябва кеширане
Някои конфигурационни опции са променени (experimental-edge → edge)
Ако използваш TypeScript, обнови @types/react и @types/react-dom

Изграждането на бързи уеб приложения е от ключово значение. Next.js предоставя много вградени функции за производителност, но разработчиците все пак трябва да ги използват разумно. В това ръководство ще разгледаме практически техники за ускоряване на Next.js приложения - оптимизация на изображения, code splitting, lazy loading, статично генериране, оптимизирано зареждане на шрифтове и намаляване на размера на JavaScript bundle-а.

Оптимизация на изображения

Големите или неоптимизирани изображения са един от най-честите проблеми с производителността. Вграденият компонент <Image> на Next.js помага да ги оптимизираш автоматично. Той сервира изображения в правилния размер, в модерни формати (WebP/AVIF) и включва lazy loading по подразбиране.

import Image from "next/image";

export default function Hero() {
  return (
    <div>
      <Image
        src="/images/hero.jpg"
        alt="Hero banner"
        width={1200}
        height={600}
        priority
      />
      <p>Добре дошли в сайта!</p>
    </div>
  );
}

Какво прави `<Image>` компонентът

Responsive изображения - автоматично сервира размера, подходящ за устройството на потребителя
Lazy loading - изображенията се зареждат само когато влязат във viewport-а, което ускорява началното зареждане
Blur placeholder - добавя blur ефект докато изображението се зарежда чрез placeholder="blur"
Custom loader - за напреднали случаи можеш да дефинираш собствена функция за зареждане

<Image
  src="/images/hero.jpg"
  alt="Hero banner"
  layout="responsive"
  width={1200}
  height={600}
  priority
/>

Code Splitting и Lazy Loading

Code splitting е техника за разделяне на кода на по-малки bundle-и, които се зареждат при нужда. Next.js прави това автоматично за страниците, но можеш и ръчно да разделяш компоненти.

Dynamic Imports

Използвай dynamic imports за да зареждаш компоненти само когато са необходими:

import dynamic from "next/dynamic";

const DynamicComponent = dynamic(() => import("../components/HeavyComponent"));

export default function Page() {
  return <DynamicComponent />;
}

Route-Based Code Splitting

Next.js автоматично разделя кода на ниво страница - всяка страница зарежда само JavaScript-а, от който се нуждае. Можеш да оптимизираш допълнително чрез dynamic imports за компоненти, които не са нужни веднага.

Статично генериране

Статичното генериране е предпочитаният начин за генериране на страници в Next.js. Страниците се пре-рендират по време на build-а и се сервират като статични файлове - идеално за производителност и SEO.

`getStaticProps`

Използвай getStaticProps за да извличаш данни по време на build-а:

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

Incremental Static Regeneration (ISR)

Next.js 12 въведе ISR, което ти позволява да обновяваш статично съдържание след като сайтът е built. Използвай свойството revalidate в getStaticProps:

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 10, // Регенерира страницата максимум веднъж на 10 секунди
  };
}

Оптимизирано зареждане на шрифтове

Шрифтовете могат да бъдат значителна част от размера на bundle-а и да влияят на производителността. Next.js 13 въведе пакета next/font за оптимизирано зареждане на шрифтове.

Използване на `next/font`

Импортирай шрифтове от next/font вместо да използваш традиционни CSS @font-face правила:

import { Roboto } from "next/font/google";

const roboto = Roboto({
  subsets: ["latin"],
  weight: "400",
});

export default function Page() {
  return (
    <div className={roboto.className}>
      <h1>Здравей, свят!</h1>
    </div>
  );
}

Предимства на `next/font`

Автоматично subsetting - зареждат се само символите, използвани на страницата
Variable fonts — поддръжка за variable fonts, което намалява броя на нужните файлове
Оптимизирано зареждане - шрифтовете се зареждат по начин, който не блокира рендирането

Намаляване на размера на JavaScript bundle-а

По-малкият JavaScript bundle означава по-бързо зареждане. Ето няколко стратегии:

Анализирай bundle-а си - използвай @next/bundle-analyzer за да видиш какво е в JavaScript bundle-а ти
Премахни неизползвани зависимости - редовно одитирай пакетите и премахвай тези, които не се използват
Използвай по-леки алтернативи - например date-fns вместо moment.js за работа с дати
Оптимизирай lodash imports - вместо целия lodash, импортирай само функциите, от които се нуждаеш

Bundle Analyzer - стъпка по стъпка

Инсталирай:

npm install @next/bundle-analyzer

Обнови next.config.js:

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});
module.exports = withBundleAnalyzer({});

Стартирай анализа:

ANALYZE=true next build

Извод

Оптимизацията на производителността е от ключово значение за бързо и приятно потребителско изживяване. Next.js предлага мощни функции, които помагат на разработчиците да оптимизират приложенията си ефективно. Чрез оптимизация на изображения, code splitting, статично генериране, оптимизирано зареждане на шрифтове и внимателно управление на bundle размера можеш значително да подобриш производителността на Next.js приложенията си.

Следи последните версии на Next.js и актуалните добри практики — framework-ът се развива бързо.

Как изградих WordPress тема с Lighthouse 95+ от нулата

Stanchev — Thu, 19 Mar 2026 18:46:26 +0000

Когато започнах PressGrid, целта беше проста: WordPress тема за новинарски сайтове, която не зарежда jQuery, не се нуждае от плъгини за перформанс и минава Lighthouse с 95+.

Повечето теми идват с Bootstrap, jQuery, слайдери и десетки HTTP заявки. За новинарски сайт с висок трафик това е смърт - render-blocking ресурси убиват LCP, всяка допълнителна заявка вдига TTFB.

Решението: нулеви JS зависимости извън WordPress core, ~22KB CSS без framework overhead, и всичко написано ръчно.

Архитектура: какво направи разликата

1. Deferred JS навсякъде

Всички скриптове се зареждат с defer - навигация, progress bar, share бутони, back-to-top. Браузърът парсва HTML без прекъсване. Нито един скрипт не блокира рендиране.

wp_enqueue_script(
    'pressgrid-main',
    get_template_directory_uri() . '/assets/js/main.js',
    [],
    PRESSGRID_VERSION,
    [ 'strategy' => 'defer' ]
);

2. Transient caching + `no_found_rows`

Hero, trending, category grid - всичко минава през set_transient(). Само post ID-та се кешират, заявката се реконструира от кеша.

$cached = get_transient( 'pressgrid_hero_posts' );

if ( ! $cached ) {
    $query = new WP_Query([
        'posts_per_page' => 4,
        'no_found_rows'  => true, // пропуска SQL_CALC_FOUND_ROWS
        'fields'         => 'ids',
    ]);
    set_transient( 'pressgrid_hero_posts', $query->posts, 5 * MINUTE_IN_SECONDS );
}

Резултат: от ~8 DB заявки при зареждане до 1-2 при cache hit.

3. LCP оптимизация

Hero изображението получава fetchpriority="high" + loading="eager". Всички останали - loading="lazy" + decoding="async". Preconnect hints се добавят само когато съответните функции са активни.

// Preconnect само ако weather widget-ът е включен
if ( get_theme_mod( 'pressgrid_weather_api_key' ) ) {
    echo '';
}

4. CSS без framework - ~22KB

Целият стилинг е нативен CSS Grid + Flexbox. Никакъв Bootstrap. CSS custom properties за theming с live Customizer preview чрез postMessage транспорт - без page reload.

:root {
    --pg-primary:    #cc0000;
    --pg-secondary:  #990000;
    --pg-text:       #1a1a1a;
    --pg-bg:         #ffffff;
    --font-display:  'Playfair Display', Georgia, serif;
    --font-ui:       'Barlow Condensed', Arial, sans-serif;
}

SEO от ден едно

Lighthouse Performance е само половината. За новинарски сайт SEO е също толкова важен.

NewsArticle JSON-LD (автоматично)

function pressgrid_newsarticle_schema() {
    if ( ! is_single() ) return;

    $schema = [
        '@context'      => 'https://schema.org',
        '@type'         => 'NewsArticle',
        'headline'      => get_the_title(),
        'datePublished' => get_the_date( 'c' ),
        'dateModified'  => get_the_modified_date( 'c' ),
        'author'        => [ '@type' => 'Person', 'name' => get_the_author() ],
        'publisher'     => [
            '@type' => 'Organization',
            'name'  => get_bloginfo( 'name' ),
        ],
    ];

    echo ''
        . wp_json_encode( $schema )
        . '';
}
add_action( 'wp_head', 'pressgrid_newsarticle_schema' );

Google News изисква NewsArticle schema за Discover. Излиза автоматично на всеки single post - нулева конфигурация.

Open Graph + Twitter Cards на всяка страница

Не само на постове - на архиви, категории, статични страници. Featured image-ът се дърпа автоматично.

Reading UX: 6 неща без нито един плъгин

Reading progress bar

const bar = document.querySelector('.pg-progress');
window.addEventListener('scroll', () => {
    const h = document.documentElement;
    const pct = ( h.scrollTop / ( h.scrollHeight - h.clientHeight ) ) * 100;
    bar.style.width = pct + '%';
}, { passive: true });

Тънка червена линия в горната част на viewport-а. Само на single posts. passive: true — не блокира scroll thread-а.

Estimated read time (server-side)

function pressgrid_reading_time( $post_id ) {
    $content = get_post_field( 'post_content', $post_id );
    $words   = str_word_count( wp_strip_all_tags( $content ) );
    return max( 1, (int) ceil( $words / 200 ) );
}

Native share buttons — нулев external JS

async function sharePost() {
    if ( navigator.share ) {
        await navigator.share({ title, url });
    } else {
        await navigator.clipboard.writeText( url );
        btn.textContent = 'Копирано ✓';
    }
}

Web Share API на мобилни, clipboard fallback на desktop. LinkedIn - обикновен <a href>. Никакъв SDK.

Останалите три без ред JS

Related posts — WP_Query по същата категория с orderby=rand, без плъгин
Sticky sidebar — position: sticky; top: 2rem — буквално един ред CSS
Card hover animations — translateY(-3px) + box-shadow, чист CSS

Forex ticker, който се самоактивира

Едно от любимите ми неща в PressGrid: форекс тикерът се активира автоматично когато Layout Builder има секция с Business/Finance категория. Нулева конфигурация.

function pressgrid_has_business_section() {
    $cached = get_transient( 'pressgrid_has_biz_section' );
    if ( false !== $cached ) return (bool) $cached;

    $slugs    = [ 'business', 'finance', 'бизнес', 'финанси', 'economy', 'пазари' ];
    $sections = get_option( 'pressgrid_layout_sections', [] );
    $result   = false;

    foreach ( $sections as $section ) {
        if ( empty( $section['enabled'] ) || empty( $section['category'] ) ) continue;
        $cat = get_category( $section['category'] );
        if ( $cat && in_array( $cat->slug, $slugs, true ) ) {
            $result = true;
            break;
        }
    }

    set_transient( 'pressgrid_has_biz_section', $result, 5 * MINUTE_IN_SECONDS );
    return $result;
}

Данните идват от Frankfurter (ECB) - безплатно, без API ключ, кешира се 6 часа.

Security hardening

Всеки $_POST минава през wp_verify_nonce() + current_user_can(). Всеки output — esc_html(), esc_url(), esc_attr(). Ad HTML минава през wp_kses() со strict whitelist.

Нещото, което ме радва най-много: font upload-ът валидира WOFF2 magic bytes (0x774F4632) преди да запише файла. Не разчитам само на extension-а.

$handle  = fopen( $tmp_path, 'rb' );
$magic   = fread( $handle, 4 );
fclose( $handle );

if ( $magic !== "\x77\x4F\x46\x32" ) {
    wp_die( 'Invalid WOFF2 file.' );
}

Резултатът

Метрика	Стойност
Lighthouse Performance	95+
Render-blocking JS	0
External JS зависимости	0
CSS размер	~22KB
DB заявки при cache hit	1-2
PHP файлове	25
Преводими стрингове	182

Какво следва

В момента работя по Sofia Vital - Next.js 18 проект, където прилагам същите принципи: Core Web Vitals first, structured data, нулев layout shift.

Ако искаш да разгледаш кода на PressGrid:

Въпроси? Drop ги в коментарите — отговарям на всичко.

10 Lesser-Known WordPress Plugins to Improve SEO Performance

Stanchev — Fri, 23 May 2025 07:50:33 +0000

Most WordPress site owners rely on popular SEO plugins like Yoast or Rank Math. However, several lesser-known plugins offer powerful SEO enhancements that can help your website stand out in search results. Using these hidden gems can improve site speed, metadata management, link building, and content analysis — key factors for better SEO performance.

Here are 10 effective but less popular WordPress plugins worth considering:

Schema & Structured Data for WP & AMP
This plugin adds rich schema markup to your content, improving how search engines understand your site. Enhanced snippets can increase click-through rates by making your listings more attractive.
WP Meta SEO
WP Meta SEO simplifies bulk metadata editing, allowing you to optimize titles, descriptions, and images efficiently. It also monitors broken links and generates XML sitemaps for better crawlability.
SEO Optimized Images
Automatically adds missing alt and title attributes to images based on configurable templates. Optimizing image SEO improves your chances of ranking in image search and boosts overall page relevance.
Internal Link Juicer
This plugin automates internal linking by inserting keyword-based links within your content. It strengthens site architecture and distributes link equity, which positively impacts SEO.
WP Speed of Light
Site speed directly affects SEO rankings. WP Speed of Light offers caching, minification, and database optimization features to improve loading times and enhance user experience.
Autoptimize
Autoptimize aggregates, minifies, and caches scripts and styles. It helps reduce page size and improves load speeds, factors that Google’s algorithm rewards.
Broken Link Checker
Search engines penalize websites with broken links. This plugin scans your content for dead links and missing images, alerting you to fix issues quickly.
Rankie
Rankie tracks your keyword rankings in real time and generates reports. Understanding how your keywords perform enables data-driven SEO strategies.
SEO Redirection Plugin
Managing 301 redirects is crucial during site restructuring or URL changes. This plugin makes redirect management easy, helping preserve link equity and user experience.
W3 Total Cache
Though not obscure, W3 Total Cache is less discussed compared to competitors. It optimizes caching, CDN integration, and browser caching, improving speed and SEO metrics.

Integrating these lesser-known WordPress plugins can complement your main SEO tools, creating a robust SEO strategy that covers technical optimization, content enhancement, and user experience. For professional help with SEO strategies and implementation, check out SEO Услуги.

Behind the Build: Portfolio Process

Stanchev — Thu, 08 May 2025 09:15:03 +0000

Building a portfolio is more than just throwing together a collection of projects. It's about showing off your skills, but also about making sure that everything works seamlessly and efficiently. In this article, I'll walk you through the behind-the-scenes process of how I built my portfolio site from scratch using Vite, Tailwind CSS, and TypeScript—with a big emphasis on speed, SEO optimization, and modern design.

Setting the Stage: Defining the Project's Core Goals

Before diving into the code, I took time to set some key objectives for the project. These goals would guide every decision I made throughout the development process:

Speed – I wanted the site to be as fast as possible, because no one likes slow-loading pages.
SEO Optimization – A beautiful site is useless if no one can find it, so ensuring the site was built with SEO best practices in mind was a priority.
Minimalist Design – I wanted the design to be clean, simple, and focused on content.
Scalable Code – The last thing I wanted was to end up with a messy, unmaintainable codebase, so I made sure the architecture was structured for scalability.

Each of these goals was taken into consideration as I chose tools, set up the project, and wrote the code.

The Tools I Chose

1. Vite for Fast Development
The development environment needed to be fast and efficient. That's where Vite comes in. It's a next-generation build tool that gives you a lightning-fast development server and an optimized production build. It's not just fast—it also helps with code splitting, hot module replacement, and ensuring that the app loads quickly.

2. TypeScript for Better Code Quality
I chose TypeScript to add strong typing and improve code quality. TypeScript is a game-changer for catching errors early and making sure everything is properly structured. It also makes the codebase easier to maintain and scale as the project grows.

3. Tailwind CSS for Custom, Responsive Design
Designing a portfolio requires balance. I wanted the site to look polished but not bloated. Enter Tailwind CSS. It's a utility-first CSS framework that lets you build custom designs quickly. With Tailwind, I could write clean and responsive CSS without worrying about overriding styles or bloating the page with unnecessary classes.

4. PostCSS for CSS Enhancements
PostCSS was used to extend the capabilities of CSS. It allows for transformations like automatically adding vendor prefixes, optimizing the final CSS, and enabling modern CSS features that aren’t yet supported by all browsers.

5. ESLint for Clean Code
Maintaining a clean and readable codebase was important to me, so I integrated ESLint. ESLint ensures that all code adheres to the same formatting rules and helps avoid common mistakes, improving code quality and maintainability.

SEO Optimization: Behind the Scenes

SEO is not just about keyword stuffing. It’s about creating a website that both users and search engines can understand. Here's how I approached SEO during the build:

Semantic HTML – I made sure to use semantic tags (like , , ) to structure the content properly. This not only helps search engines crawl the site but also improves accessibility.
Optimized Assets – I compressed and resized images to ensure fast load times, which is essential for both user experience and SEO.
Responsive Design – Since mobile traffic is huge, I made sure the site looks great on all devices. Tailwind’s responsive utilities made this task much easier.
Clean URL Structure – The URLs are clean and descriptive, which improves both user experience and SEO.

Building a portfolio site isn’t just about showing off your skills; it’s about creating a user-friendly, fast, and SEO-optimized website that reflects your approach to development. By focusing on speed, SEO, and modern design, I built a portfolio that not only looks great but also performs well. I hope this behind-the-scenes look into my process has been insightful and helps you in your own projects.

You can check out the full source code for Stanchev's project on GitHub, or view the live version of the site here.