loader

Оптимизация сайта

Կայքի օպտիմիզացում

Скорость загрузки сайта является одним из основных факторов, влияющих на позицию в рейтинге. Поисковые системы ранжируют веб-страницы не только по релевантности запросу, но и по удобству пользования. Низкая производительность, когда контент появляется долго, увеличивает количество прямых посещений. Это означает, что многие посетители покидают сайт, не переходя на другие страницы. По статистике, когда загрузка замедляется с одной секунды до трех секунд, показатель прямого возврата снижается на треть, а когда загрузка замедляется до шести секунд, показатель прямого возврата удваивает количество посещений. Загрузка осуществляется путем обмена данными между двумя сторонами: браузером (сторона пользователя) и сервером (где хранятся все файлы). Современные пользователи нетерпеливы и покидают сайт, если он не открывается быстро. Скорость загрузки также влияет на SEO-факторы. SEO (англ. Search Engine Optimization) – это комплекс мер по улучшению сайта для его ранжирования в поисковых системах.

Կայքի բեռնման արագությունը վարկանիշում դիրքի վրա ազդող հիմնական գործոններից մեկն է: Որոնման համակարգերը դասակարգում են վեբ էջերը ոչ միայն ըստ հարցման համապատասխանության, այլև օգտագործման հեշտության: Վատ կատարողականությունը, երբ բովանդակությունը երկար ժամանակ է պահանջում հայտնվելու համար, մեծացնում է ուղղակի այցելությունների թիվը։ Սա նշանակում է, որ շատ այցելուներ լքում են կայքը՝ չգնալով այլ էջեր։ Վիճակագրորեն, երբ կայքը դանդաղում է մեկ վայրկյանից մինչև երեք վայրկյան, ուղիղ վերադարձի արագությունը նվազում է մեկ երրորդով, իսկ երբ կայքը դանդաղում է մինչև վեց վայրկյան, ուղղակի վերադարձի արագությունը կրկնապատկում է այցելությունների թիվը: Վերբեռնումը կատարվում է տվյալների փոխանակման միջոցով երկու կողմերի՝ բրաուզերի (օգտագործողի կողմից) և սերվերի (որտեղ պահվում են բոլոր ֆայլերը): Ժամանակակից օգտվողները անհամբեր են և հեռանում են կայքից, եթե այն արագ չի բացվում: Բեռնման արագությունը նույնպես ազդում է SEO-ի գործոնների վրա: SEO-ն (Search Engine Optimization)-ը միջոցների մի շարք է որոնման համակարգերում կայքի վարկանիշը բարելավելու համար:

Куда бы вы ни посмотрели в наши дни, вы легко найдете 101 сайт на одну и ту же тему. И с каждым днем сайтов становится все больше, одни красивые, другие интересные, одни полезные, другие не очень, одни коммерческие, другие для себя. Конкуренция жестокая, и мы всегда хотим выделиться, но как это сделать? Именно этот вопрос и породил поисковую оптимизацию, которая позволяет бороться с многочисленными конкурентами. Другими словами, оптимизация сайта — это возможность сделать поисковые системы и сам сайт "лучшими друзьями", а лучшие друзья обычно не проявляют неуважения и не бросают друг друга. Результат — более высокий рейтинг в поисковых системах. Давайте перечислим несколько способов для улучшения скорости сайта:

Ուր էլ որ նայեք այս օրերին, հեշտությամբ կարող եք գտնել նույն թեմայով 101 կայք: Եվ ամեն օր ավելանում են կայքերը, մի քանիսը գեղեցիկ են, մյուսները հետաքրքիր են, որոշները օգտակար են, մյուսները շատ լավը չեն, որոշները կոմերցիոն են, մյուսներն իրենց համար են: Մրցակցությունը թեժ է, և մենք միշտ ցանկանում ենք աչքի ընկնել, բայց ինչպե՞ս դա անել: Հենց այս հարցն է առաջացրել որոնման համակարգերի օպտիմիզացում, որը թույլ է տալիս գործ ունենալ բազմաթիվ մրցակիցների հետ։ Այլ կերպ ասած, կայքի օպտիմիզացումը հնարավորություն է որոնման համակարգերին և հենց կայքին «լավագույն ընկերներ» դարձնելու համար, իսկ լավագույն ընկերները սովորաբար հարգումում են միմյանց և չեն լքում միմյանց։ Արդյունքը որոնման համակարգերում ավելի բարձր վարկանիշ է: Եկեք թվարկենք կայքի արագությունը բարելավելու մի քանի եղանակ.

1) Минимизация кода - это процесс удаления лишнего синтаксиса, не влияющего на функциональность ресурса, такого как комментарии, отступы и пробелы. Это позволяет уменьшить размер исходного файла CSS/JS. Для CSS минимизации лучше всего подойдёт сайт css-minifier.com либо cleancss.com.

1) Կոդի մինիմիզացնում - ավելորդ կոդի հեռացման գործընթաց է, որը չի ազդում ռեսուրսի ֆունկցիոնալության վրա, ինչպիսիք են մեկնաբանությունները, նահանջները և բացատները: Սա թույլ է տալիս նվազեցնել ձեր հիմնական CSS/JS ֆայլի չափը: CSS-ի փոքրացման համար լավագույն կայքը css-minifier.com կամ cleancss.com է:

2) Уменьшение количество HTTP-запросов - 80% загрузки страницы приходится на загрузку компонентов страницы (скрипты, фотографии, CSS файлы). Чем больше таких запросов, тем больше объем передаваемых данных и тем больше информации в заголовке запроса. Вы можете минимизировать количество запросов к серверу следующим образам:

  1. Использование CSS спрайтов - CSS изображения представляют собой комбинацию нескольких небольших изображений, которые обрезаются в нужное время для нужного элемента на странице с помощью свойств background-image и background-position.
  2. Использование встроенных изображений - Встроенные изображения вставляют изображение в саму страницу, используя свойства data: URL. Однако это увеличивает размер HTML-документа. Встраивание встроенных изображений в таблицу стилей уменьшает количество запросов к серверу и сохраняет размер HTML-документа прежним.
  3. Объединение нескольких файлов в один - Если на одной странице подключено несколько файлов css или js, их можно объединить в один. Таким образом можно сократить количество http-запросов к серверу.

2) HTTP հարցումների քանակի կրճատումը - էջի բեռնվածության 80%-ը պայմանավորված է էջի կոմպոնետներից (սկրիպտներ, լուսանկարներ, CSS ֆայլեր): Որքան շատ են նման հարցումները, այնքան մեծ է փոխանցված տվյալների քանակը և այնքան ավելի շատ տեղեկատվություն հարցման վերնագրում: Դուք կարող եք նվազագույնի հասցնել սերվերին ուղղված հարցումների քանակը հետևյալ եղանակներով.

  1. CSS Sprites-ի օգտագործումը - CSS sprite-ը մի քանի փոքր պատկերների համակցություն է, որոնք սեղմված են և կոգտագործվեն ճիշտ ժամանակին, օգտագործելով background-image և background-position.
  2. Օգտագործելով Ներկառուցված պատկերներ - պատկերը հենց էջի մեջ տեղադրելու համար՝ օգտագործելով URL-ի տվյալները՝ հատկությունները: Այնուամենայնիվ, սա մեծացնում է HTML փաստաթղթի չափը: Ներկառուցված պատկերների տեղադրումը css-ում նվազեցնում է սերվերին ուղղված հարցումների քանակը և պահպանում է HTML փաստաթղթի չափը նույնը:
  3. Մի քանի ֆայլի համադրում մեկում - Եթե մի քանի css կամ js ֆայլեր համակցված են մեկ էջում, դրանք կարող են միավորվել մեկի մեջ։ Այս կերպ Դուք կարող եք նվազեցնել http հարցումների քանակը սերվերին:

Про css спрайты мы подробно поговорим во время создания макета, а пока что давайте чуточку поговорим по поводу встроенных изображений. data:URL - это схема, определенная в RFC(Request for Comments(Заявка на обсуждение или Тема для обсуждения)) 2397, которая позволяет включать небольшие элементы данных в URL, как если бы они были ссылками на внешний ресурс. У него есть как свои плюсы, так и свои минусы. Плюсы в том что скорость загрузки будет высокая и http запросов будет меньше. Минусы в том что у него очень длинная ссылка и он будет занимать огромную площадь. Некоторые браузеры даже имеют ограничение на количество символов. Firefox поддерживает Data URL данных практически неограниченного размера. Например, Opera 11 ограничивает допустимую длину URL до 65535 символов. Теперь после того как вы узнали про плюсы, и минусы давайте посмотрим как добавлять их на сайт. Возьмите фотографию и конвертируйте его в формат base64 с помощью расширений. Для конверта фотографий в base64 исползайте данный сайт а для svg используйте этот сайт. После конвертации просто вставите код в html либо css. Если у вас есть несколько css стилей обедняете их в один файл чтобы запросов на сервер было меньше.

Մենք մանրամասն կխոսենք css sprites-ների մասին դասավորության ստեղծման ժամանակ, բայց առայժմ մի փոքր խոսենք ներկառուցված պատկերների մասին։ data:URL-ը RFC (Request for Comments (Request for Discussion) 2397) սխեմա է, որը թույլ է տալիս փոքր տվյալների տարրերը ներառել URL-ում, կարծես դրանք արտաքին ռեսուրսի հղումներ լինեն: Այն ունի իր դրական և բացասական կողմերը: Առավելությունները կայանում են նրանում, որ ներբեռնման արագությունը կլինի բարձր, և կլինեն ավելի քիչ http հարցումներ։ Թերությունները այն են, որ այն ունի շատ երկար կապ և հսկայական տարածք կզբաղեցնի: Որոշ բրաուզերներ նույնիսկ ունեն նիշերի սահմանափակում: Firefox-ն աջակցում է գործնականում անսահմանափակ չափի տվյալների URL-ներին: Օրինակ, Opera 11-ը սահմանափակում է URL-ի թույլատրելի երկարությունը մինչև 65535 նիշ: Այժմ, երբ իմացաք դրական և բացասական կողմերի մասին, տեսնենք, թե ինչպես դրանք ավելացնել կայքում: Լուսանկարեք և փոխարկեք այն base64 ձևաչափի` օգտագործելով ընդլայնումներ: Լուսանկարները base64-ի փոխարկելու համար օգտագործեք այս կայքը, իսկ svg-ի համար՝ այս կայքը: Փոխարկումից հետո պարզապես տեղադրեք կոդը html կամ css-ի մեջ: Եթե ​​ունեք մի քանի css ոճ, ապա դրանք ներառեք մեկ ֆայլի մեջ, որպեսզի ավելի քիչ հարցումներ լինեն սերվերին:

3) Размещайте элементы CSS в начале страницы - Рендеринг, или отрисовка содержимого браузером, выполняется шаг за шагом, начиная с верхней части страницы (<head>). Если стили размещаются в нижней части HTML-документа, то при низкой скорости Интернета может возникнуть ситуация, когда содержимое не успеет отрисоваться до загрузки стилей, и в этот момент пользователю будет представлен белый экран. Включение основного стиля в верхнюю часть заголовка обеспечивает последовательность процесса рендеринга, от рендеринга основных элементов до полной загрузки всех компонентов страницы.

3) Տեղադրեք CSS տարրերը էջի վերևում - Բովանդակության ցուցադրումը կամ բրաուզերի կողմից բովանդակության մատուցումը կատարվում է քայլ առ քայլ՝ սկսած էջի վերևից (<head>): Եթե ​​ոճերը տեղադրվում են HTML փաստաթղթի ներքևում, ապա ինտերնետի ցածր արագությամբ, կարող է պատահել, որ բովանդակությունը ժամանակ չունենա ցուցադրելու նախքան ոճերի բեռնումը, որի ժամանակ օգտագործողին կներկայացվի սպիտակ էկրան: Հիմնական ոճը վերնագրի վերևում ներառելը երաշխավորում է, որ մատուցման գործընթացը հետևողական է` սկսած հիմնական տարրերի ցուցադրումից մինչև էջի բոլոր բաղադրիչների ամբողջական բեռնումը:

4) Помещайте элементы JS в конец страницы - Размещая javascript в нижней части страницы, браузер может сначала загрузить страницу с содержимым, а затем начать загрузку javascript. Элементы javascript имеют относительно большой размер и загружаются синхронно. В верхней части HTML-документа. При размещении они могут препятствовать отображению других блоков. Чтобы ускорить загрузку страницы, рекомендуется добавлять скрипты в нижней части страницы.

4) Տեղադրեք JS սկրիպտերը էջի վերջում - Էջի ներքևում տեղադրելով javascript-ը, բրաուզերը կարող է սկզբում բեռնել էջի բովանդակությունը, այնուհետև սկսել բեռնել javascript-ը: javascript սկրիպտերը համեմատաբար մեծ են և բեռնվում են միաժամանակ: Երբ տեղադրվում են HTML փաստաթղթի վերևում, դրանք կարող են կանխել այլ բլոկների ցուցադրումը: Էջի բեռնումն արագացնելու համար խորհուրդ է տրվում էջի ներքևում տեղադրել սկրիպտերը։

5) Оптимизируйте ваши изображения - Тяжелые изображения часто являются причиной низкой скорости отображения страниц. Оптимизация изображений означает уменьшение их размера. Один из способов сделать это - сжать файлы. Другими словами, уменьшение веса изображений без ухудшения их качества. Необходимо определить подходящий формат изображения. Неправильный выбор формата изображения может значительно увеличить размер файла.
JPEG — отлично подходят для детализированных изображений с большим количеством цветов, такие как фотографии.
PNG — ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.
WebP ― относительно новый формат графических файлов, который обеспечивает отличное сжатие изображений при сохранении качества.
Иногда лучше всего использовать несколько форматов изображений сразу.

5) Օպտիմիզացրեք ձեր պատկերները - Ծանր պատկերները հաճախ դառնում են էջի ցուցադրման դանդաղ արագության պատճառ: Պատկերների օպտիմիզացումը նշանակում է նվազեցնել դրանց չափը: Դա անելու եղանակներից մեկը ֆայլերը սեղմելն է: Այլ կերպ ասած՝ նվազեցնելով պատկերների քաշը՝ չվնասելով դրանց որակը։ Դուք պետք է որոշեք պատկերի համապատասխան ձևաչափը: Պատկերի սխալ ձևաչափ ընտրելը կարող է զգալիորեն մեծացնել ֆայլի չափը:
JPEG-ները հիանալի են շատ գույներով մանրամասն պատկերների համար, ինչպիսիք են լուսանկարները:
PNG-ն ձեր ընտրությունն է, երբ ձեզ անհրաժեշտ է թափանցիկությամբ բարձրորակ պատկեր:
WebP-ն համեմատաբար նոր պատկերի ֆայլի ձևաչափ է, որն ապահովում է պատկերի գերազանց սեղմում՝ միաժամանակ պահպանելով որակը:
Երբեմն ավելի լավ է միանգամից մի քանի պատկերի ձևաչափեր օգտագործել:

Если браузер будет поддерживать формат webp, то он откроет его, а если нет, то откроет jpg формат картинки. Параметр loading="lazy" нужен для того чтобы картинки загрузились не сразу, а только тогда, когда пользователь дойдёт до него. Для конвертации формата изображения на другой формат, можете использовать Convertio.

Եթե բրաուզերը աջակցում է webp ձևաչափին, այն կբացի դա, իսկ եթե ոչ, ապա կբացի jpg պատկերի ձևաչափը: loading="lazy" պարամետրն անհրաժեշտ է, որպեսզի պատկերներն անմիջապես չբեռնվի, այլ միայն այն ժամանակ, երբ օգտատերը հասնի դրան: Պատկերի ձևաչափը այլ ձևաչափի փոխարկելու համար կարող եք օգտագործել Convertio.

Теперь давайте посмотрим какие инструменты есть для для того чтобы проверять скорость загрузки сайта, ошибки, недостатки, и seo оптимизацию. Мы будем использовать встроенную в браузер сервис: lighthouse; Для того чтобы воспользоваться им нужно зайти в панель разработчика (Нажатием f12 либо пкм(Правая кнопка мыши) и нажать Просмотреть код либо на английском inspect).

Այժմ տեսնենք, թե ինչ գործիքներ կան կայքի բեռնման արագությունը, սխալները, թերությունները և SEO-ի օպտիմալացումը ստուգելու համար: Մենք կօգտագործենք բրաուզերում ներկառուցված ծառայությունը՝ փարոս; Այն օգտագործելու համար հարկավոր է գնալ մշակողի վահանակ (սեղմելով f12 կամ աջ սեղմելով (մկնիկի աջ կոճակը) և սեղմել Դիտել կոդը կամ անգլերենով inspect)։

То как же им пользоваться мы поговорим при создании макета. А пока что начальное обучение окончена. Удачи вам при создании макета.

Մենք կխոսենք այն մասին, թե ինչպես օգտագործել այն մակետի ստեղծման ժամանակ։ Այդ ընթացքում ավարտվել է նախնական պարապմունքը։ Հաջողություն ձեր մակետի հետ:

<< Предыдущий Следующий >>
<< Նախորդը Հաջորդը >>