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

Предимствата на този вид разработване са много и твърде съществени и на тази тема ще отделим достатъчно време в друга статия.

Затова тук ще дам пример, който може да послужи за отговор на многото въпроси от рода защо сайта ми работи бавно? и напълно незаслужено се хвърля вината върху хостинг компанията, докато отговора трябва да се търси на съвсем друго място.

Какво представлява един сайт от гледна точка на кода?

С инструментите на програмен език HTML и CSS по определен начин се подреждат визуалните елементи на сайта по начин, по който уеб дизайнера желае.

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

Това естествено води въпросът, кой начин на писане е доказано най-ефективен и защо.

Ще се опитам да отговоря на тези въпроси в следващите редове.

Нека разгледаме класически сайт с главно изображение (header 1), лява навигационна лента (2), основна статия (3) , дясна навигационна лента (4) и спомагателна навигацинна секция (footer 5).

Кода се чете отляво надясно и отгоре надолу.

При класическа структура елементите ще се заредят в следния ред:
1 > 2 > 3 > 4 > 5 (графиката по-долу) като важното поле 3, което съдържа най-важният таг h1 се зарежда по средата на кода.

На следващата графика съм премахнал реалният код и съм го заменил със структурни коментари за по-лесна ориентация.

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

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

И ако допуснем, че индексиращия скрипт е ограничен да търси h1 заглавието в първите хиляда думи от кода, при описаната структура той никога няма да достигне до този таг и уеб страницата никога няма да види бял свят (предно класиране) в резултатите на търсещите машини.

Написаното по-горе е само предположение, но неслучайно многократно в блоговете на Google полу-несериозно се споменава, че googlebot е един вечно бързащ робот.

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

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

Тук се дефинира позицията на целият елемент – отляво, 23% от общата ширина, разстоянието между отделните блок елементи в ul (unordered list) списъка – 2 пиксела, цвят на линка и на фона, широчина на лявата лента 4 пиксела, промяната на цвета при посочване на линка a:hover и т.н.

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

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

Защо сайта ми работи бавно?

Поради много причини един сайт може да работи бавно и тези са най-често срещаните:

Зареждане на твърде много вмъкнати файлове с функцията include(); - до зареждането на всички файлове съдържанието на сайта не може да се визуализира.

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

Друга причина са неграмотно написани заявки към базата данни (select * или вмъкнати заявки) при които при всеки клик се проверяват всички записи без да се ползват индекси или разделяне на продуктите на подкатегории, същото се отнася и за събиране на тонове ненужна информация.

Нямам логично обяснение защо базовата инсталция на Magento съдържа 250 MySQL таблици или защо базовата инсталация на Joomla е над 5000 файла?

Много разпространен недостатък при изграждане на сайтове са неоптимизираните и голям брой изображения. На тази тема ще отделим няколко допълнителни статии, но просто погледнете началната страница на yahoo.com – компания, която може да си позволи всякакъв ресурс и технология е избрала пестелив дизайн с малки оптимизирани изображения и много текстови линкове.

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