wykorzystanie css @media i display:none, a ładowanie się treści

[kuba098]

Cześć, tworzę prosty szablon reaktywny pod smartfony i tablety. Dla urządzeń o rozdzielczości większej niż 760px na stronie pokazuje się dodatkowa kolumna. Poniżej tej szerokości lewa kolumna rozciąga się do 100% a prawa znika przy użyciu display:none w css.
Mam takie pytanie, może głupie - czy na urządzeniach gdzie strona ładuje się bez prawej kolumny mimo to, że jest ona niewidoczna w czasie wczytywania strony pobierana jest jej zawartość, czy nie ?

Pytam bo nie wiem i nie widzę odpowiedzi w sieci, a nie chciałbym obciążać użytkowników smartfonów czymś czego nie widzą ;)

[sunpietro]

Z tego co mi wiadomo, elementy z ustawionym display: none nie są wczytywane przez przeglądarki. Można to zweryfikować za pomocą Mozilla Developer Tools i poprzez włączenie widoku responsywnego w przeglądarce Mozilla Firefox.

===== EDIT
Właśnie sprawdziłem. Obrazki umieszczone w tagu:

<img/>

są pobierane. Lecz jeśli ustawisz obrazek jako tło za pomocą CSS:

background: url();

to wtedy dla elementu z:

display: none;

obrazki tła nie będą pobierane.

[kuba098]

Hmm, umnie sytuacja jest nieco bardziej rozbudowana niż ta, którą opisujesz bo ja ukrywam całą kolumnę, w której znajduję się dość sporo zapytań do bazy danych, obrazków, htmla itp.
Chodzi mi o to dokładnie
<style>
.right {display: none; }
</style>
<div class="right">
<--ZAWARTOŚĆ-->
</div>

Czy przy takiej budowie zawartość bloku o klasie right będzie się pobierać ?

[sunpietro]

Oczywiście, że zapytania do bazy danych będą wykonane. Jeśli te zapytania zwracają obrazki w postaci tagów HTML to te obrazki zostaną pobrane.
Blokada pobierania elementów za pomocą

display: none;

działa tylko w części frontendowej i to tylko jeśli obrazki zostały użyte w arkuszach stylów. Dane będą pobierane standardowo.
Podsumowując; tak, zawartość bloku z klasą .right będzie pobrana.

[kuba098]

Hmm, z jednej strony to nie dobrze, a z drugiej bardzo dobrze bo np użytkownicy tabletów, którzy w pionowej orientacji nie widzą kolumny, po przekręceniu tabletu musieli by czekać na doładowanie się kolumny, co nie wyglądało by fajnie.
Hmm no trudno. A macie jakieś sposoby, przydatne skrypty w jQuery, które przyśpieszą działanie strony, poza standardowymi zasadami optymalizacji, wykorzystaniem CSS Sprite itp... ?
Ponieważ na stronie jest sporo obrazków, zainstalowałem skrypt Lazy Load, który blokuje ładowanie grafik dopóki nie są widoczne. (Dołożę to też do grafik w prawej kolumnie, co może rozwiąże po części problem problem bo powinno to blokować obrazy dopóki będzie ustawione display: none).

Coś byście jeszcze polecili ?

P.S Jeśli zawartość kolumny będzie w znaczny sposób ingerować w czas ładowania strony może zdecyduje się na dodatkowy szablon z zastosowaniem nagłówków HTTP Vary. Wyjdzie w praniu ;)