Zbyt wolne pojawienie się warstwy po najechaniu Opcje

[wujek2009]

Hej,

Zacznę od struktury (łatwiej będzie to wyjaśnić)

[HTML] pobierz, plaintext 
<figure class="element">
	<img src="/produkt/{ID}/default.jpg" alt="Okładka produktu" />
 
	<figcaption class="content">
		<p>Ten element jest domyślnie ukryty. (display: none). Wyświetla się w momecie 'hoveru' na klasę '.element'</p>
	</figcaption>
</figure>
 
<figure class="element">
	<img src="/produkt/{ID}/default.jpg" alt="Okładka produktu" />
 
	<figcaption class="content">
		<p>Ten element jest domyślnie ukryty. (display: none). Wyświetla się w momecie 'hoveru' na klasę '.element'</p>
	</figcaption>
</figure>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
# less
 
.element {
  (...)
  position: relative;
 
  .content {
	display: none;
	background: transparent url('tlo.png');
	opacity: 0.7;
 
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
  }
 
  &:hover {
	.content {
		display: block;
	}
  }
}
[CSS] pobierz, plaintext 

Więc mamy tak: gdy pierwszy raz najedziemy na dany pojemnik produktu '.element' (pierwszy raz od wejścia/odświeżenia strony) to wyświetlenie pojemnika '.content' dla danego '.element' trwa około 3-5 sekundy.
Oczywiście gdy już się zaczyta to następnym razem hover to już płynna czynność. Oczywiście do momentu gdy odświeżymy www lub przejdziemy na jakąś podstronę. Później znowu potrzebujemy 3-5 sekundy.

Element '.content' to nic innego jak niebieski background z opisem (szczególami) produktu. Sama strona waży 41,7 KB natomiast css (skompresowany przez gulp'a) waży 263,6 KB
W tej chwili dodałem za pomocą 'htaccessa' dodałem nagłówki odpowiednie (aby zasoby nie były wczytywane w kółko). Wiec CSS + obrazki mają kod odpowiedzi: 304 Not Modified - więc zasoby wczytywane są z pamięci przeglądarki.

Jednak problem wciąż występuje - nie mam trochę pomysłu. Wstępnie zwalam na linuxpl (zwykły hosting, jeden z najniższych pakietów).
Bardziej się zastanawiam czy ktoś miał podobne problemy? Co mogę jeszcze zrobić?