Оптимизиране скоростта на зареждане на сайт с responsive дизайн

abakadaba

abakadaba

Member
Трудно ми беше да измисля подходящо заглавие, но питането ми е следното.
Правя сайт който е с респонсив дизайн. В пълната версия имам един слайдер с банери, който не ми трябва при зареждането на сайта от телефон.
От там, не ми трябва и зареждането на един два външни файла (.js и .css). Какви са ми опциите?
 
От: Оптимизиране скоростта на зареждане на сайт с responsive дизайн

Можеш да криеш слайдера под дадена ширина на екрана. Как обаче някой друг да ти каже, защото аз си нямам на представа
 
Криенето е проста работа, ама не това иска човека.

Код: 
@media (max-width: 440px) { 
.theslider{display:none}
}

И няма да се вижда.

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

Прегледай тези две теми и виж дали метода ще ти свърши работа:
http://css-tricks.com/forums/topic/...t-only-if-the-screen-is-over-a-certain-width/
http://stackoverflow.com/questions/19438786/disabling-specific-javascript-loaded-with-the-script-tag
 
От: Оптимизиране скоростта на зареждане на сайт с responsive дизайн

В CSS файла към стойностите за мобилната визуализация добавяш името на слайдъра както е зададен в самия HTML код на страницата. Пример: сладъра е s id или class - задаваш съответно #slider или .slider.

HTML: 
@media only screen and (max-device-width: 320px) {
    #slider {display:none;}
}

Ако слайдъра е изнесен в JS файл, то трябва да му зададеш една от стойностите за id или class в кода на страницата:

HTML: 
<div id="slider"><script src="js/slider.js" async></script></div>

или

HTML: 
<div class="slider"><script src="js/slider.js" async></script></div>

Отговорът на Ktomov е точен, извинявам се за повтарянето. Интернет връзката ми е бавна от флашката (на село) и едва след постването на мнението ми видях неговото писание.
 
Последно редактирано:
Петя, това мисля няма да спре зареждането на джаваскрипта, просто няма да визуализира банерите. Човека иска да си спести 5х30 килобайта снимки + 15 килобайта джаваскрипт + 5 килобайта цсс от зареждане. Иначе казано - каква полза като ще ги скрие от потребителя, ако пак ще се теглят от устройствата им тези 170 килобайта?

Отделно на това съм попадал на не един и два джаваскрипта, които изобщо не функционират, ако са заредени асинхронно.
 
От: Оптимизиране скоростта на зареждане на сайт с responsive дизайн

Може да не допълва стойността за асинхронното зареждане - да, не винаги функционират джавите, ако са в кода, но в хедъра не съм срещала проблеми. Най-добре е да ги изреди преди затварящият се body таг, без async. Зареждането на джавата е възможно да се спре само, ако добави в кода на самата страница един от посочените id, class маркери и в css файла ги добави към стойностите за определените мобилни параметри, за които не желае да се визуализират. Поне до момента не съм срещала проблеми с този вариант. :)
 
На различни езици ли говорим или аз нещо не схващам, или има проблем в комуникацията.

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

Чрез display: none; се скрива всичко, което е в даденият айди/клас, в медиа куерито.

Това, което аз не разбирам е следното: освен, че се СКРИВА самото съдържание на даденият айди/клас, зарежда ли даденият джаваскрипт след рендването на страницата? Според мен, да.

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

Иначе казано, това което се иска:
На пс сайта да прави 30 заявки и да е 300 килобайта.
На мобилно устройство да прави 28 заявки (една по-малко за цсс и една по-малко за джаваскрипт) и да е 280 килобайта.
 
От: Оптимизиране скоростта на зареждане на сайт с responsive дизайн

abakadaba каза:
Трудно ми беше да измисля подходящо заглавие, но питането ми е следното.
Правя сайт който е с респонсив дизайн. В пълната версия имам един слайдер с банери, който не ми трябва при зареждането на сайта от телефон.
От там, не ми трябва и зареждането на един два външни файла (.js и .css). Какви са ми опциите?
Увеличете...

Варианти бол
1. Решаваш проблема на ниво web сървър с пренасочване към подходящата версия на страницата.
2. Решаваш проблема на ниво цмс с генериране на подходящ вариант за всеки дивайс. Ако не използваш кеширане е елементарно.
3. Решаваш проблема на ниво клиент - трябва да се напише custom javascript loader. С едно мъничко скриптче да се проверява дали е на мобилен дивайс и ако не е качваш и слайдера заедно с цсс-а. С малко повече играчка може и да се направи lazy load на снимките.

Виж тук как да провериш дали е мобилен дивайс.
 
От: Оптимизиране скоростта на зареждане на сайт с responsive дизайн

Ние си пишем тука разни неща, ама човека задал въпроса - никакъв го няма.
Хубаво щеше да е също така като се задават такива въпроси в тая секция, да има някакво уточнение.
Ако сайта е писан изцяло на ръка и от нулата - решението е едно, ако е ползван фрейм - друго, ако е CMS - трето.
 
От: Оптимизиране скоростта на зареждане на сайт с responsive дизайн

Човека си е на линия, просто не можем да сме 100% от времето онлайн.
Сайта ползва CMS който аз съм си разработвал така че описанието "на ръка от нулата" също важи.

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

Пробвах с това което Petya77 предложи, но това изобщо не се отрази на скоростта на зареждане.
Правя тестове с инструмента на Google - Page Speed Insight и виждам, че в проблените области, файловете на слайдера продължават да фигурират.
 
Последно редактирано:
От: Оптимизиране скоростта на зареждане на сайт с responsive дизайн

Page Speed Insight винаги ще ти 'казва' да оптимизираш зареждането на JS файловете, ако не са асинхронни. Проблемът е, че асинхронното зареждане работи само в head секцията. Бих могла да ти помогна, ако погледна какви са стойностите за слайдъра в кода - предполагам, че има още класове за фиксиране. На 22.08 ще съм с редовна интернет връзка, ако не бързаш, можем да комуникараме в скайп (посочен е в профила ми).
 
Последно редактирано:
От: Оптимизиране скоростта на зареждане на сайт с responsive дизайн

Аз до 23-ти няма да мога да реагирам, защото излизам в отпуска.
Ако до 28-ми не измисля нищо, ще ти пратя сайта да го погледнеш. Благодаря предварително.
 
От: Оптимизиране скоростта на зареждане на сайт с responsive дизайн

Не се притеснявай, когато ти е удобно. И на лични да ми го изпратиш тези дни, ще намерим решение, докато се върнеш онлайн. На разположение ще съм.
 
От: Оптимизиране скоростта на зареждане на сайт с responsive дизайн

Два варианта с JavaScript.

Вар1. Само с JavaScript:
HTML: 
var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");

js.type = "text/javascript";

if (screen.width > 500)
{
    js.src = "js/jquery_computer.js";
}
else
{
    js.src = "js/mobile_version.js";
}

head.appendChild(js);


Вар2. - С jQuery и matchMedia.js
HTML: 
$(function(){
    if (matchMedia('only screen and (max-width: 500px)').matches) {
        $.getScript(...);
    }
});
 
От: Оптимизиране скоростта на зареждане на сайт с responsive дизайн

Само да допълня madseason, че същите скриптове чудесно ще сработят и за каскадни стилове.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Горе