Как да измерим производителността на уебсайта

Говоренето за оптимизационния процес почти не съществува сред новите уеб дизайнери. Дори много уеб дизайнери, които са били в бизнеса от десетилетие или повече, не разбират напълно значението на оптимизацията на сайта.

След продължителен период от време даден уебсайт ще започне да се изчерпва. Файловете на интерфейса могат да съдържат преувеличени блокове код или заключени, скрити битове. Това най-често се среща в JavaScript файлове или изображения. Може да е важно да създадете приятен уебсайт за потребителския опит, но без оптимизиран уебсайт дизайнът може дори да няма шанс за пълно натоварване на нетърпеливите потребители.

Съветите по-долу са предназначени за начинаещи и междинни уеб разработчици оптимизиране на техните страници в пълна степен. Има много налични техники и всеки от тях ще се държи по различен начин в зависимост от това от какви проблеми страда вашият уебсайт. Опитайте да подредите няколко области и да видите дали можете да приложите тези техники в собствените си марки.

HTTP Заявки

Всеки път, когато уебсайтът ви се зарежда, той изпраща HTTP заявка до отдалечен сървър. Този тип пренос на данни се нарича a мрежов протокол използвани специално за разпространение и съхраняване на текстови файлове. Те често включват основния код на frontend, като HTML, CSS и JavaScript.

След като заявката бъде изпратена, браузърът ви ще анализира всеки елемент на страницата. В зависимост от машината за синтактичен анализ, всеки уебсайт ще се зарежда различно и елементите ще се появяват в различен ред въз основа на скоростите на прехвърляне. Например, Internet Explorer ще направи страници, различни от Chrome или Safari, и всички те работят малко по-различно от Firefox или Opera.

Това, което трябва да се има предвид, е колко време е времето за заявката за всеки файл и дали тази тенденция се запазва последователно. Помислете за получаване на повече от 100 000 или 1 милион посетители за един месец. Работата на браузъра е да събере всеки елемент на страницата и да зареди външни файлове в паметта.

Често факторите, задържащи оптимизирания скоростен JavaScript на уебсайта, включват или големи файлове с изображения. С популяризирането на Verizon FiOS е обичайно скоростта на интернет да достигне 600kbps и да продължи да се изкачва! За съжаление това не е норма и дори при високоскоростни връзки е възможно да се получат грешки в оптимизацията.

Средства за ефективност на сайта

Ние не сме сами в областта на уеб разработките и оптимизацията на frontend. За да бъде завършена правилната работа, са необходими някои инструменти, за да се справи с работата.

Google пусна проект, озаглавен Page Speed, който е създаден, за да помогне на разработчиците да оптимизират своите уебсайтове и да проверят за най-добрите нива на производителност. Първоначално проектът стартира като Firebug добавка с отворен код и сега се приема като референция от трета страна за тестване на уебсайтове.

Друга възможност за потребителите на Firebug е добавката YSlow на Yahoo! Скриптът анализира всяко искане за уеб страница и предлага най-често срещаните начини за подобряване на ефективността. Тези предложения се основават на Yahoo! Разработчици за най-добри практики за оптимизация в уеб дизайна.

Първоначално програмата може да е малко абразивна, тъй като съдържа толкова много информация. Просто се придържайте към основите и като следвате проста документация, процесът трябва да бъде парче торта.

Разработчиците винаги се интересуват от прескачане на проект, за да разбият кода, така че това трябва да е безпроблемно. За малко помощ можете да проверите ръководството за помощ на YSlow.

Техники на скоростта

Има няколко прости трика, които можете да приложите незабавно към уебсайта си, за да ускорите изпълнението. Първият и най-лесен начин е да разделите вашите CSS и JavaScript файлове.

CSS кодът принадлежи към заглавието на документа ви. Това е полезно, защото CSS свойствата трябва да бъдат анализирани, докато DOM се зарежда. След като уеб браузърът разпознае вашите CSS стилове в заглавието, той ще изчака напълно да покаже уеб страницата, докато всички стилове бъдат заредени. Също така всички изображения, използвани за икони или дизайн на фона, ще отнемат време за зареждане и трябва да направят това първо.

От другата страна, преместването на всички JavaScript файлове в долния колонтитул на сайта може драстично да разреши закъснението. Много браузъри блокират паралелни файлове за изтегляне, което означава, че преди да се превърне страницата, уеб браузърът на потребителя може да спре за 4 секунди, за да зареди напълно външния JS включва.

Това не винаги е възможно и не е необходимо за всеки уебсайт. Ако вашите страници зареждат едни и същи с равна продължителност на отговора, независимо от включените файлови разположения, не се притеснявайте да маневрирате с някоя игра.

Динамичното съдържание не може да се зареди, докато не се завърши целият DOM, но понякога това ще доведе до грешки. Тествайте CSS / JS, за да видите дали можете да върнете всички ползи за оптимизация.

Компресиране на размера на файла

Компресирането на големи файлове стана много популярно. Сега той може дори да бъде използван в уеб страници, за да намали времето за зареждане и да запази размера на файла много нисък. Голяма част от работата вече е свършена и с инструменти като мини-файловете на YUI Compressor мини-процесите не са енергийни.

Има и много други безплатни услуги в мрежата, които също помагат за тази задача. Намалете CSS има цял CSS интерфейс за компресиране, за да направи процеса лесен. Същият уебсайт има и персонален JavaScript компресор, който изпълнява много от същите задачи, но поддържа скриптовете.

Можете също така да обмислите компресирането на най-големите изображения в уеб страниците си. Това може да бъде направено с всеки софтуер за редактиране на снимки, като Adobe Photoshop или GIMP, като просто преразгледате изображението при по-ниска резолюция. PNG изображенията ще изнасят много по-малко от jpg или TIFF формати. Има и много онлайн инструменти като Image Optimizer, които да помогнат в процеса на компресиране.

Проверка на източника и показатели

Това е рутина, която често не се практикува от уеб разработчиците, което може да предложи невероятни резултати. Чрез анализиране на всички елементи на страницата в уебсайта можете да видите кой е най-дълъг за зареждане и реда, в който е заредена всяка част..

Най-популярният инструмент Mozilla Firebug е плъгин за браузъра Firefox. Това приложение инсталира малка лента с инструменти в долната част на браузъра ви, за да провери времето за отговор, информацията за заглавието, елементите на страницата и скриптовете за всеки уебсайт. Скриптът също е пренесен в Firebug Lite като разширение за Google Chrome.

Apache с mod_pagespeed

Не всички настройки ще работят с Apache уеб сървър, така че тази опция не винаги е достъпна. Този модул е ​​пряко свързан с Google Page Speed ​​монитор по-рано. Всъщност, кодът за mod_pagespeed първоначално се базираше на много библиотеки от базите данни на Google Code.

Apache позволява на сървърните администратори да инсталират малки пакети, наречени модули, за да подобрят производителността на техните сървъри. mod_pagespeed е един от тези модули, който изпълнява оптимизационни техники автоматично по време на изпълнение. Има прекалено много процеси, които трябва да бъдат изброени, въпреки че някои от основните приложения включват компресиране на HTML / CSS / JS в движение и кеширане на изображения.

В момента проектът се помещава в Google и е отворен за разработчици. Google работи с GoDaddy за внедряване на mod_pagespeed във всички хостинг сметки, работещи с Apache HTTP сървър.

Въпреки че съществуват много други опции, разработката на интерфейса е част от най-интензивните, особено като се има предвид предварителната оптимизация за важни уеб страници. Оптимизирането на заглавията на сайта и големите изображения може да бъде изключително досадна, но въпреки това възнаграждаваща задача.

Помислете за някои от техниките, представени в тази статия, и вижте как те могат да бъдат приложени във вашите уеб проекти. Често разработчиците не отделят достатъчно време, за да оценят работата си и да изчистят старите кодове. Ако все още желаете да получите някои съвети, трябва да прочетете нашето ръководство за най-добра уеб оптимизация за указатели за поддръжката на интерфейса и удобни подобрения в производителността..