Magento Forum

   
CSS-Datei inline einbinden
 
tease
Sr. Member
 
Total Posts:  115
Joined:  2010-10-06
 

Hallo zusammen,
vor dem GoLive meines Shops (Magento 1.7.0.2.) versuche ich nun etwas an der Geschwindigkeitsschraube zu drehen und stehe nun vor dem Problem, dass ich nicht weiß, wie ich bei Magento eine externe CSS-Datei inline einbinden kann. Die Website Analyse mit GTMetrix brachte, dass die vielen HTTP-Requests meinen Shared-Server in die Knie zwingen (ja, ich weiß Magento sollte nicht auf einem Shared Server laufen, aber hilft ja nun nicht mehr) und deshalb möchte ich kleine Dateien, wie eben die print.css Datei inline einbinden, damit es wenigstens 1 HTTP-Request weniger ist.

Nachdem ich zuerst das Problem lösen wollte, in dem ich den Code in einer PHTML-Datei einbinde (so hätte ich es bei einer statischen Seite gemacht, ist hier aber wohl der Holzweg) wollte (http://www.magentocommerce.com/boards/viewthread/297119/), hat mein weitere Recherhce ergeben, dass diese externen CSS-Dateien von der page.xml, im Verzeichnis app/design/frontend/default/meinTheme/layout/ geladen werden. Das stimmt doch so, oder?

Darin befindet sich diese Zeile:

<action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
Ich gehe davon aus, dass diese für das Laden der externen CSS Datei zuständig ist, oder?

Nun habe ich versucht den Code folgendermaßen umzugestalten:

<style type="text/css">
@
media print{
  
*     { background:none !importanttext-align:left !important}
html  { margin
:!importantpadding:!important}
body  { background
:#fff !important; font-size:9pt !important; padding:0 !important; margin:10px !important; }
a     { color:#2976c9 !important; }
th,td { color:#2f2f2f !important;  border-color:#ccc !important; }

.header-container,
.
nav-container,
.
footer-container,
.
pager,
.
toolbar,
.
actions,
.
buttons-set { display:none !important}

.page-print .data-table .cart-tax-total { background-position:100% -54px}
.page-print .data-table .cart-tax-info { display:block !important}
}
</style>

Aber das scheint nix zu bringen, denn wenn ich die Website neu im Browser lade und ich in den Quellcode schaue, sehe ich dass immer noch eine externe Print-CSS-Datei geladen wird. Dieser Lade-Befehl scheint also von einer anderen Datei zu kommen. Aber welcher?
Seltsam finde ich auch die komischen Zahlen ("amp;1350393629") hinter dem print.css. Hier ein Ausschnitt aus meinem Quellcode:

<link rel="stylesheet" type="text/css" href="http://www.meine-website.de/min/?f=/skin/frontend/default/default/css/print.css&amp;1350393629" media="print" />

In welcher Datei kann man diese CSS-Datei ändern?
Oder geht man gleich ganz anders vor, um eine CSS-Datei inline einzubetten?

Wie macht ihr das?

 
Magento Community Magento Community
Magento Community
Magento Community
 
sepplind
Jr. Member
 
Avatar
Total Posts:  15
Joined:  2009-08-24
 

Hallo tease,

ss gibt verschiedene Möglichkeiten, Styles in eine Seite einzubetten:

1. Import einer externen Styledatei im Head:
<style type="text/css"> <!--@import url (mystyle.css);--> </style>
(wird weder vom IE 3.0 noch von Netscape 4.x erkannt)
2. Die Link Referenz im Head:
<link rel="stylesheet" href="mystyle.css" type="text/css" media="screen">
(wird von allen Browsern erkannt)
3. Direkte Notation im Style Container im Head:
<style type="text/css">
<!--
body{background:yellow;}
--> </style>
4. die Inline Referenz im Tag:
<body style="background:yellow;color:blue;">

Dein Wunsch ist es ja, wie bei Nummer 4 eine Inline Referenz einzubetten. D.h. man deklariert direkt in der php/html Datei im jeweiligen Tag den Style sodass keine CSS Datei geladen werden muss.

Eine sehr effektive Maßnahme ist das Nutzen eines Whole-Page-Caches außerhalb von Magento. Dabei wird der Großteil der Anfragen auf einen Shop abgefangen, ohne dass Magento selbst bemüht werden muss.

Oder du nutzt ein Magento Plugin um die Perfomance zu erhöhen:

http://www.magentocommerce.com/magento-connect/catalogcache.html

http://www.magentocommerce.com/magento-connect/pagecache-powered-by-varnish.html

http://www.magentocommerce.com/magento-connect/symlink-cache.html

http://www.magentocommerce.com/magento-connect/zoom-full-page-cache-1742.html

Beste Grüße
Sebastian

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top