СПОДЕЛИ

Од појавувањето на интернетот, просечната големина на датотеките постојано расте. Она што некогаш беше килобајти, сега стана мегабајти (да, множина), а датотеките сé уште се зголемуваат.

Иако овој феномен, на прв поглед, не изгледа вознемирувачки, сепак неовото влијание на перформансите и одржувањето на веб сајтовите е ужасно. Додадете ги старите уреди, ограничувањата на протокот и спорото вчитување…. и ете уште поголем проблем. За среќа, ние имаме контрoла врз големината на нашите датотеки и врз начинот на кој нашите страници визуелно се обработуваат во прелистувачите. Оваа контрола им дава можност на развивачите да го олеснат проблемот и да го оптимизираат кодот.

Зошто воопшто да се мачиме?

Целосно го разбирам недостатокот на интерес, особено сега, кога повеќето интернет конекции се релативно брзи. Си велите, ако сé работи добро, зошто воопшто да се мачиме со оптимизација?

Изведбата и оптимизацијата на еден веб сајт се многу повеќе од фактот колку брзо може да се превземе содржината. Има неколку SEO и UX придобивки, а да не го споменуаваме и фактот дека намалувањето на кодот со оптимизација дополнително ги намалува трошоците за проток и ја намалува искористеноста на протокот и на корисничко ниво(мислете на  ISP (обезбедувачите на интернет услуги) и ограничувањето на трансфер на одредена количина податоци во даден период).

Модуларноста е првиот чекор

Модуларниот код обично додава големина во форма на повеќе опции. Овде, сакаме да гледаме на модуларноста како комбинирање на колку што е можно повеќе основни парчиња код. Ако може да комбинираме две CSS класи во една, и со помалку код да го добиеме истиот резултат, тогаш тоа треба и да го направиме.

Модуларноста не игра важна улога кога станува збор за основно HTML и CSS, но кога ќе влезете во комплексниот свет на JavaScript, преголемиот обем на кодот може негативно да влијае на сé – особено на мобилните уреди.

Минимизирајте ги HTTP и зависните барања

Барањата на зависности се најголемиот фактор во забавувањето на брзината на вчитување на страниците. Секое дополнително барање додава уште еден слој на комплексност во процесот на обработување и визуелно претставување на страниците. Понекогаш забораваме дека и сликите кои ги повикуваме од нашите листи на стилови се бројат, па затоа обидете се да ја ограничите нивната употреба и да работите со алтернативни методи за оптимизација, како спрјтови или SVG.

Додека зборуваме за надворешните зависности, ако вашиот веб сајт е доволно голем за да поднесува неколку барања…можеби е време да почнете да употребувате CDN. Употребувањето на CDN за да ја дистрибуирате вашата содржина нема да ја намали големината на датотеките и/или времето на вчитување онолку колку што тоа би го направило отстранувањето на сите дополнителни HTTP барања, но може да ги отстрани серверските конекции од равенката.

Основи на код во околина на продукција наспроти околина на развој

Мора да има многу јасна разлика кога ги споредувате базите на код во развој и продукција. Само овој чекор понекогаш може да значи најголемо намалување на големината на датотеките.

Денес, дизајнерите често зборуваат за нивната околина во “продукција” или “развој”, особено на големи проекти, но истото е многу корисно и кај помалите. Најголемата разлика помеѓу двете околини може да ја видиме во компресијата на сликите и во компресијата/минимизирањето на кодот. На крајот, целта е продукцијата да биде колку што е можно почиста и побрза. Истото важи и за развојната околина, но без компресијата на слики/код за оптимизација.

Со употреба на вградените алатки, како “Save for web” (Зачувај за веб) компресијата на Photoshop, имате одлична почетна точка кај сликите. Има многу што може да се научи и употреби, како конвертирање на формати на слики, алгоритми за компресија, конторла на квалитет и најдобрите практики.

Ако зборуваме за кодот, најдобрата употреба на компресија зависи од јазикот со кој работите. Дискутабилно е и дали компресијата на кодот им помага или пречи на другите програмери кои се обидуваат да го разберат туѓиот код. Кога станува збор за основна HTML и CSS, јас го употребувам html компресорот на Google и YUI компресорот за CSS.

Пишувајте попаметен и почитлив код

Понекогаш кодот  кој го пишуваме е најспората алка во синџирот. Неефикасно CSS, или надувана JavaScript, може да влијае полошо на времето на вчитување отколку што мислите. Оваа објава на Mozilla детално зборува за важноста на пишување на јасни CSS селектори, и објаснува како прелистувачите визуелно ги обработуваат. Накратко, запишувањето на истата патека долж синџирот на селектори е многу помалку ефикасно од употребата на помали, единстевни и препознатливи селектори. И двата го водат стилот кон истиот елемент, но вториот е многу побрз.

JavaScript може да е дури и полоша од лошо напишано CSS, а за жал, многу често се превидува. Колку пати сте копирале и вметнале надворешна JS библиотека во вашиот проект, без детално да го разгледате изворот? Typekit е одличен пример за ова. Кога неговите сервери откажуваат, веб страниците кои ги употребуваат нивните фонтови се поразени и потребни им се дополнителни 30 секунди, па дури и неколку минути дополнително време за вчитување.

За среќа, таквите настани се ретки, но сепак најдобро е да ја повикувате JavaScript последна, како во случајот со Google Analytics. Со тоа ќе му овозможите на прелистувачот визуелно да ги обработи главните датотеки (CSS, HTTP барањата,итн) и да ги прикаже ознаките, пред JavaScript да почне да ги успорува работите.

Пишувајте едноставно HTML

За да ја постигнете целта и да нашишете појасни CSS селектори, и да го сведете дополнителниот обем на минимум, приоритет мора да ви биде пишувањето на ефикаснен HTML.

CSS ресетирањата често целат на сите најчести елементи и наметнуваат  ресетирање на стиловите. Така, дури и да не целите на дополнителниот div, тој најверојатно сепак ги забавува работите со самото тоа што ги ресетирате неговото дополнување и маргини. Обично, еден или два дополнителни div-а никому не му пречат, но кога ќе почнете со десеттина такви, работите излегуваат од контрола. Со воведувањето на повеќе елементи во HTML5 спецификацијата, сите може да си дозволиме поголема флексибилност и во оаа област.

На Google му се допаѓа почистиот код

Приоритетот на Google е да го доведе интернетот во форма. За вашите страници да добијат видно место во резултатите од пребарувањето, вие мора да посветите посебно внимание на различните атрибутите на страниците кои се однесуваат на начинот на кои тие визулено се обработуваат. Повикувањето многу надворешни ресурси, апсурдно големите слики и лошо напишаната JavaScript може да ве симнат подолу во листата на пребарување и да го спуштат рејтингот на вашиот сајт.

Сево ова е со најдобри намери. Нивните барања за добро рангирање од пребарување се изградени околу добри практики на развој. Дополнително, Google ви нуди детално упатство за оптимизирање на различни аспекти од вашиот сајт за SEO — што паралелно  промовира одлични практики за развој.

Заклучок

Кога го оптимизирате кодот, мора да мислите на големината на датотеките и на начинот на кој тие ќе бидат прочитани, од прелистувачите, па дури и од луѓето. Исто така, мора да ја земете во предвид и употребата на мобилни уреди, со многу обезбедувачи на услуги кои нудат многу ограничен трансфер на податоци во единица време.

Иако ќе ви биде потребно подолго време за да ја завршите оптимизацијата, сепак она што ќе го добиете е неспоредливо. Ќе добиете подобра изведба кај прелистувачите и мобилните уреди и шанса да промовирате одличен начин на работа, и да ја рангирате содржината на сајтот повисоко кај пребарувачите како Google.

Следниот пат, пред да почнете да го поставувате сајтот на интернет, компресирајте ги сликите… и ќе се изненадите бројот на мегабајти од кои ќе успеете да се ослободите!

Извор: webdesignerdepot

Ти се допадна овој напис?
Стани член на клубот на веб професионалци Еверест и прв добивај информации кои можат да ти помогнат за твојот натамошен професионален развој.
И ние како и ти ги мразиме спамерите. Твојата email адреса никогаш нема да биде (про)дадена некому. Чесен збор.