[2.8.+] Problem Ladezeiten

You have a suggestion for a future version of phpMyFAQ? Then post it here!

Moderator: Thorsten

Post Reply
minipipes
Posts: 10
Joined: Sun Jun 23, 2013 11:43 am

[2.8.+] Problem Ladezeiten

Post by minipipes »

Hallo,

für mobile Geräte mit Drosselung auf 64 kbit/s ist die Ladezeit der Startseite einfach zu lang. Daher arbeite ich gerade daran das CSS zu zerlegen und je nach Anwendung und browser das CSS mit PHP entsprechend zusammen zu setzen.
Desweiteren brauchen touchscreens keine hover-Definitionen. Ich selber verwende für :hover lediglich opacity 0.86 und kann die langen gradienten weglassen. Für alte browser ändert man lediglich die Textfarbe.

Braucht man die JavaScripts jquery auf der Startseite ? Die 50 kB jquery-Datei ist schon ein mächtiger Brocken. Zusammen mit dem style ergibt das schon gut 200 kB.
In der FAQ, die ich auch noch verwende (2.6.17) gibt's im Ladezeitencheck eine 1- (ca. 87 kB groß) und für das neue Layout von 2.8.0 eine 6 (ca. 345 kB groß) !

Das script style.php wird im Hauptverzeichnis von phpMyFAQ gespeichert und mittels mod_rewrite hübsch versteckt.
RewriteRule style.css$ style.php [L]
oder
RewriteRule style_(.*)\.css$ style.php?v=$1 [L]

Nach der Devise mobile first, wird erst ein minimales CSS geladen: layout.min.css.tpl für screens mit 200x240px - im script style.php wird bei mobilen Geräten Zeilen mit :hover herausgefiltert !
Auf meinem smartphone (Android,Safari) gibt es zudem einen undefinierten Absturz bei :hover !
in min.css sind dann auch alle Farben (color, background-color) gespeichert, mit Ausnahme von gradienten und browser-spezifischen Anpassungen. Ich selber habe die Mindestbreite für body auf 300px festgelegt !

Dann folgt eine browser-Erkennung, bei mobilen Geräten steht im User-Agenten meist dabei, um welches Gerät es sich handelt und man kann dann CSS mit passenden Dimensionen laden (als Ersatz oder Ergänzung für Media Query):
480x320.css.tpl // für die geringe Höhe muss das Kategorienmenue versteckt und eine alternative Lösung programmiert werden.
320x480.css.tpl
640x480.css.tpl
480x640.css.tpl
800x600.css.tpl
600x800.css.tpl
1024x768.css.tpl
1280x1024.css.tpl
layout.max.css.tpl
layout-IE8.min.css.tpl // minimale layout-Regeln für alte IE (ich habe das mit fixen mit margin zentrierten layout auf 960px Breite gemacht !)

Da ohnehin JavaScript verwendet wird, kann man die Auflösung auch per JavaScript ermitteln und als Parameter für style.php übergeben.

Das sieht kompliziert aus, aber mittels PHP kannst Du das sicherlich in einem Rutsch umrechnen lassen. Auch kann man die Styleregeln für bestimmte browser aus dem jetzigen CSS mittels PHP extrahieren und in einzelnen CSS-Dateien abspeichern.
css3-valid.css.tpl reine valide CSS3-definitionen
moz.css.tpl CSS für alte firefox
webkit-old.css.tpl für alte webkit mit -khtml- und alte -webkit-Regeln
webkit-new.css.tpl für neuerere webkit-Browser
o.css.tpl für Opera
ms.css.tpl für Internet Explorer
ms-old.css.tpl alte filter-definitionen
mobile.css.tpl spezielle Regeln für mobile Geräte

in den Adminbereich kommt dann noch ein CSS-Editor mit HTML5-Farbwähler und einem UTF8-fähigen Texteditor. Die CSS-Templates könnten daher auch in der Datenbank gespeichert werden. Eine style.css im template fällt dann weg und man muß keine Schreibrechte im template-Bereich setzen. Der Anwender entscheidet dann selber ob er alte browser noch unterstützen möchte (Checkbox für IE alt, -ktml- oder so !), muss die Regeln dann selber festlegen ! Oder man nimmt einfach ein altes phpMyFAQ-Layout und Farben werden dann automatisch mit PHP eingesetzt.

In meiner diashow, die ich gerade entwickle, versuche ich Ladezeiten zu ermitteln und passende Bilder für jeweilige Auflösung zu laden (alpha-Status). Siehe Code in dieser demo:
http://webmaster.fniffi.de/demo/neueDiashow.html

Navigationspfeile mit gradient und :hover mit opacity.
http://webmaster.fniffi.de/demo/pfeile.html


hier meine ersten Schritte, die Ausgabe ist noch fehlerhaft, aber zumindest ein Anfang:

zuerst extrahiere ich style.css und speichere das in css_expand ab.

<?php
$css=file_get_contents("assets/template/default/css/style.css");
$css=str_replace(";",";\r\n",$css);
$css=str_replace("}","}\r\n",$css);
$css=str_replace("{","{\r\n",$css);
file_put_contents("assets/template/default/css/css_expand.css",$css);
?>



der zweite Schritt:

<?php
$css=file("assets/template/default/css/css_expand.css");
$search="-webkit-";$lastrule="";$output="";

foreach($css as $zeile){

if(strstr($zeile,"{")){
$lastrule=$zeile;

}
if(strstr($zeile,$search)){

echo $lastrule." ".$zeile."}\r\n<br>";

$output.=$lastrule.$zeile."}";


$lastrule="";
}

}



#file_put_contents("assets/template/default/css/webkit.css",$output);
?>

die Ausgabe müsste man manuell nach editieren oder den Code verfeinern. Sehe das bitte als Anregung, bin nur Hobbyprogrammierer !
Thorsten
Posts: 15560
Joined: Tue Sep 25, 2001 11:14 am
Location: #phpmyfaq
Contact:

Re: [2.8.+] Problem Ladezeiten

Post by Thorsten »

Hi,

die 2.8 ist derzeit nicht wirklich mobil-optimiert, wir optimieren auch nicht die Nutzung von Bootstrap. Mit Version 2.8.1 liefern wir übrigens minified CSS und JS aus, das sollte die Ladezeiten auch verbessern, ausserdem haben wir den JS Code um nicht genutzte Sachen verkleinert.

Evtl können wir uns mal per Mail oder Skype oder Jabber unterhalten.

bye
Thorsten
phpMyFAQ Maintainer and Lead Developer
amazon.de Wishlist
Post Reply