Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: Webgamers. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

Carpenter

Schüler

  • »Carpenter« ist der Autor dieses Themas

Beiträge: 83

Wohnort: München

Danksagungen: 19

  • Nachricht senden

1

Sonntag, 1. Januar 2017, 11:37

Pagespeed

Hallo,
ich würde gerne den Pagespeed meiner Seite erhöhen und finde dazu auch allerlei im Netz.
Ich bin aber eher im Backend zu Haus als im Frontend und würde mich über Tipps freuen.
Hauptsächlich geht es mir um Assets und eine anständige Nginx Konfiguration.

Was ich bisher gemacht habe:
- ein CDN verwendet (Bin ich aber weg von)
- Memcached für Doctrine installiert.
- Größe von Bildern reduziert und manche ins CSS File verlagert.
- Icons durch font-awesome ersetzt
- JS Dateien ans Ende verlagert

Was ich noch machen möchte:
- js und css Dateien zu einem File zusammen mergen.
- Nginx caching von Assets und ne schnelle auslieferung von diesen.
- Bildgrößen weiter reduzieren.
- Auf Bootstrap 4 migrieren und Sass verwenden anstatt css Klassen zu überschreiben :>
- require.js oder ähnliches verwenden (Eigentlich nicht mehr nötig wenn ich nur noch ein CSS und ein JS File habe).

Was könnte man noch machen?
Vor allem hab ich noch keinen Plan wie ich gescheit alles in ein File merge und das auch irgendwo vll ohne Buildprozess, denn der nervt mich beim entwickeln.
Ansonsten bin ich auch noch über jeden Configtipp über Nginx froh.

Im Moment lädt die Seite in ~1,2 Sekunden ohne Browsercache und mit in ~0,5 Sekunden.
Mein Ziel ist es, auf ca ~0,6 oder 0,7 Sekunden ohne caching zu kommen.

Fragen beantworte ich natürlich gerne.

Viele Grüße und ein frohes neues Jahr.
Carpenter

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Carpenter« (1. Januar 2017, 12:37)


Harald

Fortgeschrittener

Beiträge: 255

Danksagungen: 88

  • Nachricht senden

2

Sonntag, 1. Januar 2017, 11:51

Huhu,
ich habe mich gestern auch mit meiner Wordpress-Seite ein wenig beschäftigt, und wollte diese beschleunigen. Beim Apachee meines Providers ist allerdings das passende Modul für automatische GZIP-Kompression nicht installiert.

Für NGinx kannst du hier gucken http://nginx.org/en/docs/http/ngx_http_gzip_module.html (eben kurz gegoogelt - findest da noch mehr im Netz)

Ich habe mir auf meiner Wordpress-Seite jetzt so geholfen, dass ich eine php-ini auf der Root angelegt habe mit folgendem Inhalt:

Quellcode

1
2
zlib.output_compression = On
zlib.output_compression_level = 9


Das erkennt der Google-Page-Speed-Tester zwar nicht an... mein Blog ist aber dadurch gefühlt sehr viel schneller geworden... also richtig deutlich.

Darum gebe ich das auch weiter – ist schnell probiert und vielleicht wirkt es ja auch bei deinem System.

Frohes Neues,
Harald

Carpenter

Schüler

  • »Carpenter« ist der Autor dieses Themas

Beiträge: 83

Wohnort: München

Danksagungen: 19

  • Nachricht senden

3

Sonntag, 1. Januar 2017, 12:21

Vielen Dank,
das hat schon Mal geholfen! =)
Um gzip für nginx zu aktivieren habe ich folgendes Tutorial verwendet:
https://www.digitalocean.com/community/t…on-ubuntu-14-04


Um noch konkreter werden zu können, habe ich einen Screenshot vom Firebug Netzwerktab angehangen.
Vielleicht kommt so noch ein guter Tipp zustande :)



Viele Grüße
Carpenter

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Carpenter« (1. Januar 2017, 12:37)


Harald

Fortgeschrittener

Beiträge: 255

Danksagungen: 88

  • Nachricht senden

4

Sonntag, 1. Januar 2017, 13:00

Da das bei dir mit GZip klappt, ist es, denke ich, nicht so wichtig... aber es gibt vom "normalen" jquery auch eine min... du hast glaub ich noch die menschenlesbare drin? Wobei - die ist ja winizig mit 30 kb... das macht den Braten nicht fett.

Das war es aber auch schon von meiner Seite... freut mich, wenn der Tipp mit der Kompression etwas helfen konnte.

Irgendwo gestern hab ich auch Überschrift gelesen wegen "Reducing Http-Requests" – bezog sich glaub ich aber auf WordPress.

BlackScorp

Moderator

Beiträge: 1 242

Wohnort: 127.0.0.1

Danksagungen: 399

  • Nachricht senden

5

Sonntag, 1. Januar 2017, 13:42

Zitat

- Größe von Bildern reduziert und manche ins CSS File verlagert.
Du hast doch jezt nicht echt, base64 encoded strings in CSS file ausgelagert? das Sollte man eigentlich nicht tun.

JS und CSS files zusammenfügen ist eigentlich was gutes. Für die Entwicklung brauchst du die kompelation nicht. Du hast ja vorher requirejs angesprochen. In RequeJS kannst du skripte bzw module nachladen, außerdem kannst du mit NodeJS dann alle deine JS dateien zu einer zusammen fügen http://requirejs.org/docs/optimization.html#onejs

Das gleiche hast du mit Sass, in der haupt saas datei hast du nur imports von anderen sass files und während der Entwicklung kannst du diese anpassen, beim deployment kopelierst du es zu einer Datei.

Die Frage, die sich hier stellt, wie du eigentlich dein Script Deployst, spätestens wenn du mehrere Server haben wirst, brauchst du ein Deployment script. Es gibt sogar tools wie etwa https://deployer.org/ damit kannst du ein Script schreiben und alle deine zugangsdaten lokal haben und dieser Script würde dann dein Code auf alle server deployen. Du kannst da auch deine Compiler mit einbauen wie etwa Node und Sass.

Vorteil ist, wenn du später einen Weiteren Server dazukaufst, brauchst du nur deine Conifugration anzupassen. Lokal wird alles Compeliert, vorbereitet etc und anschließend auf den Servern verteilt.

Bilder Assets helfen auch sehr gut, zum Beispiel deine "en.png" und "de.png" die hättest du einfach zur assets.png hinzufügen können. Du kannst im Grunde alle nicht wiederholbaren Bilder auf deiner Seite zu einem PNG zusamenbauen diesen noch mit TinyPNG verkleinern.

Für die Bilder gibt es hier https://www.codeandweb.com/texturepacker Damit kannst du alle deine nicht widerholbaren bilder rein draggen und kriegst am ende eine .css Datei raus. Das tool ist kostenlos, hat aber Pro features, da wird die verteilung der PNGs optimiert.

https://tinypng.com/ hiermit kannst du bilder verkleinern. DIe haben ein Wordpress plugin https://github.com/tinify/wordpress-plugin man könnte es eventuell in eigenen Projekt benutzten.

HTTP 2 kann man auch auf dem Server aktivieren, damit werden Scripte und bilder asyncron geladen
Qualität eines Codes misst man in WTF/Sekunde

Carpenter

Schüler

  • »Carpenter« ist der Autor dieses Themas

Beiträge: 83

Wohnort: München

Danksagungen: 19

  • Nachricht senden

6

Sonntag, 1. Januar 2017, 15:07

Hallo,
jquery ist minified, aber ich habe die Datei umbenannt.

Zitat

Du hast doch jezt nicht echt, base64 encoded strings in CSS file ausgelagert? das Sollte man eigentlich nicht tun.

Bei kleinen Bildern sehe ich da eigentlich keine Probleme.

Mein deployment beschränkt sich auf ein post-commit hook für das stage system.
Wenn es tatsächlich Mal so groß sein wird, dass ich mehrere Webserver benötige, werde ich mich um ein gescheiteres deployment kümmern.
Allerdings nicht deployer (Hab ich mir sogar schon Mal installiert).

requirejs (auch headjs) habe ich mir schon angeschaut, vielleicht schreibe ich meine bereits vorhandenen JS Dateien darauf um. Allerdings würde es mir reichen wenn ich alle Files in eins merge anstatt mich jetzt darauf zu konzentrieren.

Bisher habe ich less mit einem kleinen progrämmchen verwendet wo automatisch compiled wurde sobald ich etwas geändert habe.
Das würde ich gerne auch mit SASS tun oder generell mit allen JS und CSS Dateien die ich eintrage. In diesem Zusammenhang habe ich mir bereits Koala angeschaut.

Wordpress verwende ich derzeit nicht.

HTTP2 werde ich heute ausprobieren und dann berichten.
Um die Bildgrößen weiter runter zu bekommen schaue ich mir deine vorgeschlagenen Tools gleich mit an.

Danke für die Tipps

Viele Grüße
Carpenter

BlackScorp

Moderator

Beiträge: 1 242

Wohnort: 127.0.0.1

Danksagungen: 399

  • Nachricht senden

7

Sonntag, 1. Januar 2017, 18:05

Zitat

Wenn es tatsächlich Mal so groß sein wird, dass ich mehrere Webserver benötige
Hast du doch schon, Stage und Live, ich wollte doch nur sagen, dass i.d.r. man kurz vor dem Deployment den Cache invaldiert und minified/uglified/merged usw.

In meinem Spiel habe ich eine Route für "assets/style.css" erstellt, diese Route nutzt intern https://packagist.org/packages/leafo/scssphp . Dann habe ich in meiner .htaccess Datei die Regel drin, dass wenn eine Datei existiert, soll diese direkt aufgerufen werden. (geht bestimmt auch auf nginx) Sprich im Live System erzeuge ich die Datei und speichere diese ab, lokal bei mir existiert die Datei nicht.

Zitat

requirejs (auch headjs) habe ich mir schon angeschaut, vielleicht
schreibe ich meine bereits vorhandenen JS Dateien darauf um. Allerdings
würde es mir reichen wenn ich alle Files in eins merge anstatt mich
jetzt darauf zu konzentrieren.
Bei der Geschichte geht es doch darum, dass du Lokal all die Tools nutzen kannst und im Live du am besten so wenig Code wie möglich änderst und dennoch statischen Content lieferst.

In commit hook kann man das schon einbauen, sowohl less als auch requirejs ist als node paket vorhanden, müsstest im Grunde nur 2 Befehele dort einbauen.

Und es ging hier nicht um die Größe der Dateien, sondern um die Anzahl der Requests, guck mal zum Beispiel auf Die Stämme, die haben so ein Bild


Damit haben die 12 Anfragen auf Bildchen in einen zusammengefasst. Im Css steht dann einfach nur sowas wie

Quellcode

1
2
3
4
5
6
7
8
9
10
.assets{
background:url('path/to/assets.png');
}
.assets-button{
background-position:-100px -200px;
height:100px;
widht:200px;
}

<div class="assets assets-button"></div>


(Achtung das ist Pseudo Code)

und das Tool, das ich davor gezeigt habe, generiert die CSS Datei automatisch.

Wenn du den Firebug Output anschaust, wartet der Browser ständig, um dieses Warten zu Verkürzen, sollte man die Anzahl der Reqests so weit herunter reduzieren wie möglich.

Und wegen Wordpress.. mir ist klar dass du das nicht nutzt, mir ging es darum, dass du sicherlich aus dem Plugin die PHP Schnipsel herausbauen könntest und das ganze in dein Build Script mit einfließen lassen um eben die Bilder zu verkleinern.
Qualität eines Codes misst man in WTF/Sekunde

Carpenter

Schüler

  • »Carpenter« ist der Autor dieses Themas

Beiträge: 83

Wohnort: München

Danksagungen: 19

  • Nachricht senden

8

Sonntag, 1. Januar 2017, 21:14

Hallo,
http2 habe ich gerade ausprobiert. Im Netzwerktab sehe ich jetzt, dass alle Dateien gleichzeitig geladen werden.
Mit aktiviertem Browsercache sind die Zeiten leicht angestiegen. Ohne Browsercache habe ich dadurch weitere ~0.2ms eingespart. Danke dafür.

Zitat

Hast du doch schon, Stage und Live, ich wollte doch nur sagen, dass i.d.r. man kurz vor dem Deployment den Cache invaldiert und minified/uglified/merged usw.

Im Moment habe ich einen Webserver mit dem Stage. Sollte das Live dann Mal dazu kommen, wird das erstmal der gleiche Webserver sein.

Assets werden bei mir bereits direkt ausgeliefert.
Ich werde Mal schauen dass ich beim Commit-Hook nen Command anstoße, dass die Dateien nach der Reihe merged/minified.
Nutzt du in der dev Environment dann ein anderes Basetemplate? Weil die style.css existiert ja nicht. Oder wie machst du das?

Node kenne ich nicht und ich würde es gerne vermeiden jetzt Energie in weitere Technologien zu stecken die für sich genommen sicher sehr sinnvoll sind, aber im Moment würde ich mich gerne auf das Spiel an sich konzentrieren, denn sonst wird es nicht fertig.

Zitat

Bei der Geschichte geht es doch darum, dass du Lokal all die Tools nutzen kannst und im Live du am besten so wenig Code wie möglich änderst und dennoch statischen Content lieferst.

Also im Live würde ich sowieso nie etwas von Hand ändern. Wenn ichs recht bedenke habe ich diesen Satz nicht so ganz verstanden. Vielleicht kannst du mir das nochmal erklären, denn statisch sind die Assets doch ohnehin?

Also requirejs habe ich mir heute nochmal angeschaut und schießt meiner Meinung nach über eine Lösung sozusagen hinaus.
Außerdem habe ich den Eindruck dass es nicht so gut hiermit funktioniert: http://ejohn.org/blog/simple-javascript-inheritance/
Oder ich habe etwas falsch gemacht. So wie ich das gesehen habe, müsste ich auch meine derzeitigen JS-Klassen umschreiben in "Module".
Alles in allem müsste ich tiefer eintauchen um was gescheites zu produzieren.
Eigentlich möchte ich nur, wie du schon vorgeschlagen hast, nach dem commit die css und js Dateien in eine Datei mergen und minifien. Requirejs liegt deswegen erstmal auf Eis =)

Zitat

Und es ging hier nicht um die Größe der Dateien, sondern um die Anzahl der Requests

https://tinypng.com/ aus deinem Vorschlag verkleinert die Dateien doch?

Zitat

Und wegen Wordpress.. mir ist klar dass du das nicht nutzt, mir ging es darum, dass du sicherlich aus dem Plugin die PHP Schnipsel herausbauen könntest und das ganze in dein Build Script mit einfließen lassen um eben die Bilder zu verkleinern.

Also groß Bilder habe ich nicht. Die würde ich erstmal selbst optimieren wenn dann Mal eins dazu kommt (Kategoriebildchen und so).
Sollten Mal Benutzer Bilder hochladen können, komme ich darauf zurück. Im Moment brauche ich das noch nicht.

Zur Anzahl der Request und zu dem CSS Asset Tool hätte ich noch eine Frage:
Ich habe 4-5 Screenshots die ich anzeigen möchte, Alle sind 600x400 Pixel groß. Würdest du diese zu einem großen Bild zusammen fügen?
Ein weiteres Bild ist 1920 x 1280 Pixel groß. Würdest du empfehlen dieses dann auch gleich mit dazu zu packen? Oder wäre das dann zu groß?
Gibts in dieser Hinsicht eine Grenze?

Viele Grüße und vielen Dank für die guten Hinweise an Alle
Carpenter

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Carpenter« (1. Januar 2017, 21:52)


BlackScorp

Moderator

Beiträge: 1 242

Wohnort: 127.0.0.1

Danksagungen: 399

  • Nachricht senden

9

Montag, 2. Januar 2017, 10:23

Zitat

Nutzt du in der dev Environment dann ein anderes Basetemplate? Weil die style.css existiert ja nicht. Oder wie machst du das?
Nein, im template wird ganz normal style.css eingebunden. Die Style.css ist aber nicht im Quellcode sondern wird im Deployment Script auf dem Server generiert. Lokal exestiert die Datei nicht und nur beim Deployment wird diese erzeugt.

Zitat

Node kenne ich nicht und ich würde es gerne vermeiden jetzt Energie in
weitere Technologien zu stecken die für sich genommen sicher sehr
sinnvoll sind, aber im Moment würde ich mich gerne auf das Spiel an sich
konzentrieren, denn sonst wird es nicht fertig.
Kann ich dich verstehen, irgendwann wird es sich aber schon lohnen, weil es eben minified und uglified. Alternativ. Beim Apache gibt es den mod_include https://github.com/h5bp/html5-boilerplat…/.htaccess#L937 vielleicht lohnt es sich sowas für nginx zu suchen, sowas müsste nginx bestimmt haben.

Zitat

Vielleicht kannst du mir das nochmal erklären, denn statisch sind die Assets doch ohnehin?
Ja du kannst ein Filewatcher im hintergrund laufen haben und dieser kompeliert dann deine .scss Dateien in .css um oder du kannst Routen zur verfügung stellen, die eben php seitig die assets kompelieren und das CSS ausgeben. Im zweiten fall wären die Assets dynamisch, weil die bei jedem Request neu kompeliert oder aus dem Cache geladen werden.

Zitat

Außerdem habe ich den Eindruck dass es nicht so gut hiermit funktioniert: http://ejohn.org/blog/simple-javascript-inheritance/
Doch, du würdest halt eine person.js haben mit so einem code

Quellcode

1
2
3
4
5
define('person',function(){
var Person....

return Person;
});


und in anderen Dateien, wo du es benutzen willst, würde es dann so aussehen

Quellcode

1
 var personInstance = require('person');


oder

Quellcode

1
2
3
requrejs(['jquery','person','bootstrap'],function($,person){
$('person').text(person.getName());
});


aber es ist in der Tat nicht ganz trivial. Hat aber den vorteil, dass du nicht ständig bei jeder weiteren Datei ein <script src.. in dein template eintragen musst oder sogar im controller sowas wie "$this->scripts[]='path/to/script.js'; " sondern das autoloading geschieht im JavaScript und mit NodeJS werden alle Dateien die der Autoloader kennt zu einer minified js zusammen gefasst.

Apropo autoloader. Wenn du composer im einsatz hast, lohnt es sich im commit hook "composer dump-autoload -o" auszuführen, damit werden alle Dateien in eine autoload.php als array gespeichert und der php autoloader muss nicht beim laden im Ordner nachschauen ob die Datei exestiert.

Zitat

https://tinypng.com/ aus deinem Vorschlag verkleinert die Dateien doch?
Ja genau, und dieses Wordpress plugin hat eine PHP Implementierung für Tinypng. Damit kannst du Bilder "on the fly" oder im commit hook automatisiert verkleinern. Es seidenn du hast die Zeit es manuell zu tun;)

Zitat

Ich habe 4-5 Screenshots die ich anzeigen möchte, Alle sind 600x400
Pixel groß. Würdest du diese zu einem großen Bild zusammen fügen?

Ein weiteres Bild ist 1920 x 1280 Pixel groß. Würdest du empfehlen
dieses dann auch gleich mit dazu zu packen? Oder wäre das dann zu groß?

Gibts in dieser Hinsicht eine Grenze?
Ich mach das mit den Assets zum Beispiel so, dass ich die Bilder, die überall zu sehen sind und nicht repeated werden, diese werden zu assets zusammen gefasst. Screenshots würde ich zum Bespiel nicht als assets zusammen fassen, aber in deinem Firebug konnte ich en.png und de.png sehen, die würde ich zu "flags.png" zusammen fassen. Ich hatte das mal so, dass ich alle bilder zu einer 4kx4k pixel großer datei gemerged habe, damit wurde die Ladezeit aber zu hoch, weil ich eben bereits auf der startseite schon bilder geladen habe, die evenutell viel später im Spiel vorkommen werden.

Bei den Screenshots, würde ich thumbs anbieten,die kann man schon in ein spritesheet zusammen fassen, und erst beim Klicken würde man das Große Bild laden. 600x400 finde ich zu groß für Thumbs
Qualität eines Codes misst man in WTF/Sekunde

Carpenter

Schüler

  • »Carpenter« ist der Autor dieses Themas

Beiträge: 83

Wohnort: München

Danksagungen: 19

  • Nachricht senden

10

Montag, 2. Januar 2017, 11:37

Zitat

Nein, im template wird ganz normal style.css eingebunden. Die Style.css ist aber nicht im Quellcode sondern wird im Deployment Script auf dem Server generiert. Lokal exestiert die Datei nicht und nur beim Deployment wird diese erzeugt.


Ich meinte, ob du die style.css dann auch lokal einbindest. Weil dort müsstest du ja dann immer ein 404 bekommen wenn diese lokal nicht existiert. Oder machst du im template dann ein if prod dann include style.css?
Wenn nur beim deployment sass comiled wird, wie entwickelst du dann lokal? Also wenn ich Änderungen im sass vornehme würde ich meine Änderungen ja gerne direkt sehen oder wie läuft das?
Vielleicht wäre Node ja dann doch Mal einen Blick wert, aber ich hätte es gerne instant bei Änderungen ohne dass ich etwas anstoßen muss. Würde das gehen?
Wenn das mit requirejs allerdings gut klappt und es keinen unterschied macht weil requirejs ja alles nachlädt, müsste ich das ja gar nicht mehr alles mergen. Oder hat das trotzdem nennenswerte Auswirkungen?
Denn dann würde ich js Dateien nur noch minifien und uglifien. Das könnte ich dann aber auch von nem php paket machen lassen.

Zitat

Doch, du würdest halt eine person.js haben mit so einem code

Ah so läuft das. Danke
Was wäre denn deiner Meinung nach besser hinsichtlich des Pagespeeds? Alles in ein File mergen und im template include oder requirejs verwenden (jetzt unabhängig vom minifien)?
Ich hatte da so meine Probleme mit der Config. Da ja alles mehr oder weniger voneinander abhängt, wurde meine shim Config richtig groß. Ich vermute da hab ich auch was falsch gemacht.
jquery, bootstrap etc hab ich als path definiert und in der shim dann die abhängigkeiten definiert.
Hast du dazu vielleicht noch ein Beispiel?

Zitat

Es seidenn du hast die Zeit es manuell zu tun;)

Also viele Bilder habe ich wie gesagt noch nicht. Aber das wäre sicher Mal ein nächster Step. Ich habe im Moment 8 Bilder oO.

Zitat

$this->scripts[]='path/to/script.js

Also sowas gehört doch verboten.

Zitat

Wenn du composer im einsatz hast, lohnt es sich im commit hook "composer dump-autoload -o" auszuführen, damit werden alle Dateien in eine autoload.php als array gespeichert und der php autoloader muss nicht beim laden im Ordner nachschauen ob die Datei exestiert.

Werde ich ausprobieren, danke.

Zitat

Bei den Screenshots, würde ich thumbs anbieten,die kann man schon in ein spritesheet zusammen fassen, und erst beim Klicken würde man das Große Bild laden. 600x400 finde ich zu groß für Thumbs

Ok, an Thumbs hab ich zuerst auch gedacht. Dann war ich da auf der richtigen Fährte.


Viele Grüße und Danke
Carpenter

BlackScorp

Moderator

Beiträge: 1 242

Wohnort: 127.0.0.1

Danksagungen: 399

  • Nachricht senden

11

Montag, 2. Januar 2017, 11:53

Zitat

Ich meinte, ob du die style.css dann auch lokal einbindest. Weil dort
müsstest du ja dann immer ein 404 bekommen wenn diese lokal nicht
existiert. Oder machst du im template dann ein if prod dann include
style.css?
Ne, ich habe ja eine Route erstellt.

index.php/assets/style.css liefert mir das Ergebnis der Kompelierten Sass datei. index.php muss man ja nicht angeben also steht ohne if im template

src="assets/style.css" , wie gesagt, in htaccess datei steht, wenn die Datei Physisch auf dem Server vorhanden ist, soll diese geladen werden. Sprich nach dem ich die style.css erzeugt habe, wird diese geladen, ist die datei nicht vorhanden wird die Route aufgerufen.

Zitat

Wenn nur beim deployment sass comiled wird, wie entwickelst du dann
lokal? Also wenn ich Änderungen im sass vornehme würde ich meine
Änderungen ja gerne direkt sehen oder wie läuft das?
Wie oben beschreiben, die Route zeigt kompeliert sass file. http://leafo.github.io/scssphp/

Quellcode

1
2
3
4
5
6
7
require_once __DIR__.'/bootstrap.php'; //autoloader und andere initialisierungen
use Leafo\ScssPhp\Compiler;

$scss = new Compiler();

header("Content-Type:text/css;charset=utf-8");
echo $scss->compile(file_get_contents('web/assets/src/style.scss'));


Zitat

Was wäre denn deiner Meinung nach besser hinsichtlich des Pagespeeds?
Alles in ein File mergen und im template include oder requirejs
verwenden (jetzt unabhängig vom minifien)?

Ich hatte da so meine Probleme mit der Config. Da ja alles mehr oder
weniger voneinander abhängt, wurde meine shim Config richtig groß. Ich
vermute da hab ich auch was falsch gemacht.

jquery, bootstrap etc hab ich als path definiert und in der shim dann die abhängigkeiten definiert.

Hast du dazu vielleicht noch ein Beispiel?

Da habe ich selber nicht so viel Erfahrung, wenn du nicht soo viel JS drin hast, wird es sicherlich nicht wehtun alles zusammen zu packen, wenn dein Spiel jedoch sehr JS lastig ist, würde man einfach RequireJS nutzen ohne dass man alles merged, schließlich landet ja sowieso alles im Cache.

Ich persönlich, würde eher versuchen die Startseite so schnell wie möglich zu machen, weil dort ja quasi das Interesse von neuen Spielern geweckt werden soll, später im Spiel könnte man sogar ein Ladebalken einbauen, daran sind die Spieler eh gewohnt.
Qualität eines Codes misst man in WTF/Sekunde

Carpenter

Schüler

  • »Carpenter« ist der Autor dieses Themas

Beiträge: 83

Wohnort: München

Danksagungen: 19

  • Nachricht senden

12

Montag, 2. Januar 2017, 13:15

Ahso, jetz rall ich das erst richtig und ich finds genial ^^

Dann erstelle ich heute Abend Mal ein Command der mir die style.css und script.js im commit-hook erstellt.
Und lokal dann halt otf (on the fly ^^) erstellt. Wobei ich da dann Mal schauen muss um wie viel sich der pagespeed dann erhöht. Soll ja praktikabel bleiben.
Dann noch die Bilder in ein asset file packen wie du es vorgeschlagen hast. Das sollte es dann auch gewesen sein, denke ich.

Ich bin jetzt bereits bei 0.7ms mit ausgeschaltetem cache. Bin guter Dinge dass es dann nochmal ein gutes Stück nach unten geht.
Damit wäre requirejs jetzt wirklich erstma auf Eis gelegt. ~0.5ms pder ~0.6ms ohne cache wollte ich ja erreichen und wirkt auf mich auch schnell genug, dass deswegen keiner abhaut.

Die Bootstrap4 Migration und SASS die ich oben angesprochen habe ist leider auch erstmal vom Tisch.
Ich warte bis zum release von BS4 damit, wegen Bugs und ändern soll sich ja auch noch einiges.
Manche Dinge sind auch raus gestrichen worden die ich verwende. Um das ordentlich zu machen brauch ich jetzt schon min. 2 Wochen.

Ansonsten habe ich jetzt eine klare Vorstellung von allem. Ich werde heute Abend berichten wie es sich auswirkt. Das oben ist ja schnell gemacht.
Andere Ideen was man machen könnte um den Pagespeed zu erhöhen sind natürlich weiterhin willkommen.

Offtopic:
Haben wir hier eigentlich Webdesigner oder kann mir einen empfehlen? So Design ist jetzt nicht meine Stärke.
Ich suche ein schönes BS3 Template (Mit gutem Navikonzept, schönem Hintergrundbild und Mobile tauglich natürlich) für ein Spacegame und (am liebsten erstmal alles im style tag, dann kann ichs in ruhe nach less portieren).
BS3 ist für son Spiel schon bisschen zu klinisch.

Viele Grüße und Danke für die Tipps
Carpenter

PS: Mir ist doch noch eine kleine Frage eingefallen.
Wo liegen deine Resourcen dann? In so nem Resource Ordner im Bundle/Modul oder legst du die direkt in public/assets ab?
Wenn diese im Resourceordner liegen, wie lädst du dann Bilder oder fonts? Schiebst du die beim deployment in den asset folder oder grefist direkt darauf zu?

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »Carpenter« (2. Januar 2017, 13:36)


BlackScorp

Moderator

Beiträge: 1 242

Wohnort: 127.0.0.1

Danksagungen: 399

  • Nachricht senden

13

Montag, 2. Januar 2017, 13:36

Zitat

Und lokal dann halt otf (on the fly ^^) erstellt. Wobei ich da dann Mal schauen muss um wie viel sich der pagespeed dann erhöht.
Ich glaube es wird eher langsam, weil on the fly wird erstmal die scss Datei eingelesen und in CSS konvertiert, das einzig gute ist, du kannst in die style css deine @imports reinschreiben, scss imports sind wie php includes, nicht wie css imports
Offtopic:
Haben wir hier eigentlich Webdesigner oder kann mir einen empfehlen? So Design ist jetzt nicht meine Stärke.
Ich suche ein schönes BS3 Template (Mit gutem Navikonzept, schönem Hintergrundbild und Mobile tauglich natürlich) für ein Spacegame und (am liebsten erstmal alles erstmal im style tag, dann kann ichs in ruhe nach less portieren).
BS3 ist für son Spiel schon bisschen zu klinisch.

Viele Grüße und Danke für die Tipps
Carpenter
Schau dir einfach andere spiele an;)

Zitat

Die Bootstrap4 Migration und SASS die ich oben angesprochen habe ist leider auch erstmal vom Tisch.

Ich warte bis zum release von BS4 damit, wegen Bugs und ändern soll sich ja auch noch einiges.
Ich denke du kannst dennoch eine style.scss Datei erstellen und da drin @import 'bootstrap.min.css' angeben, ich denke das müsste funktionieren, somit hast du quasi in deiner style.css am ende direkt bootstrap und jquery ui usw drin

Zitat



PS: Mir ist doch noch eine kleine Frage eingefallen.

Wo liegen deine Resourcen dann? In so nem Resource Ordner im Bundle/Modul oder legst du die direkt in public/assets ab?

Wenn diese im Resourceordner liegen, wie lädst du dann Bilder oder
fonts? Schiebst du die beim deployment in den asset folder oder grefist
direkt darauf zu?
ich habe direkt im projekt ein ordner web da drin habe ich index.php, .htaccess und assets ordner. web ist mein Document Root außerhalb von web liegen andere Dateien. Bilder, Fonts, Scripte etc alles liegt direkt im assets ordner. Der document root ist auch im git repository drin.
Qualität eines Codes misst man in WTF/Sekunde

Carpenter

Schüler

  • »Carpenter« ist der Autor dieses Themas

Beiträge: 83

Wohnort: München

Danksagungen: 19

  • Nachricht senden

14

Montag, 2. Januar 2017, 13:46

Zitat

Ich glaube es wird eher langsam, weil on the fly wird erstmal die scss Datei eingelesen und in CSS konvertiert

Also ich hab das so verstanden, dass du das auch machst? Wie schnell/langsam isn das bei dir?

Zitat

Schau dir einfach andere spiele an;)

Is ja gut... ich mach einfach alles aufeinmal :/

Zitat

ich habe direkt im projekt ein ordner web da drin habe ich index.php, .htaccess und assets ordner. web ist mein Document Root außerhalb von web liegen andere Dateien. Bilder, Fonts, Scripte etc alles liegt direkt im assets ordner. Der document root ist auch im git repository drin.


Ich habs derzeit wie du mit dem Unterschied dass ich keine .htaccess benötige (Schau dir nginx an... Bin begeistert).
Allerdings macht es für mich Sinn wie in Symfony die Assets im Modulordner zu haben. Wie das dann gut laufen kann ohne dass ich ständig neu builden muss, weiß ich nicht.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Carpenter« (2. Januar 2017, 13:53)


BlackScorp

Moderator

Beiträge: 1 242

Wohnort: 127.0.0.1

Danksagungen: 399

  • Nachricht senden

15

Montag, 2. Januar 2017, 13:55

Zitat

Also ich hab das so verstanden, dass du das auch machst? Wie schnell/langsam isn das bei dir?
Beim Spiel kann ich nicht sagen, aber ich habe das zum Beispiel hier in einem Blog von einer Verwandten http://www.lilacandthedonkey.de/ schau dort an was als CSS geladen wird. Kannst im Firebug nachschauen, dort habe ich keine style.css erstellt, weil sie ja die Styles im CMS anpasst und kein "button" hat um auf dem Server die style.css zu erzeugen. Also wird es on the fly compeliert.
Ich habs derzeit wie du mit dem Unterschied dass ich keine mehr .htaccess benötige (Schau dir nginx an... Bin begeistert).

Ich lass die .htacess trotzdem drin, damit kann ich sowohl apache als auch nginx bedienen.

Zitat

Allerdings macht es für mich Sinn wie in Symfony die Assets im
Modulordner zu haben. Wie das dann gut laufen kann ohne dass ich ständig
neu builden muss, weiß ich nicht.
Ich verstehe dein Ansatz, aber du musst auch bedenken dass es dann heißt dass ein PHP Script von nginx aufgerufen wird, dieser schaut ob eine Datei exestiert und gibt die datei dann aus. Ich weiß dass das gemacht wurde damit man die Module überschreiben kann ohne den Sourcecode des Modules anzufassen. Damit kann man quasi ein "Theme" wechseln. Jedoch mach ich das nicht weil meine Implementierungs Tests auf die selektoren zugreifen, um ein "Theme" zu wechseln, müsste ich eventuell Tests anpassen. Da ich weiß dass sowas nie passiert, pack ich alle assets direkt in public Verzeichnis
Qualität eines Codes misst man in WTF/Sekunde

Carpenter

Schüler

  • »Carpenter« ist der Autor dieses Themas

Beiträge: 83

Wohnort: München

Danksagungen: 19

  • Nachricht senden

16

Montag, 2. Januar 2017, 14:12

~250ms für die framework.extras.css
Aber ich probiers heute Abend einfach Mal aus.

Alles in den Asset Ordner zu hauen ist/war für mich auch das praktikablere.
Dann hab ich schon Mal ne Vorstellung von dem was noch zu tun ist. Danke

Viele Grüße
Carpenter

PS: Webdesigner so meldet euch ;(

BlackScorp

Moderator

Beiträge: 1 242

Wohnort: 127.0.0.1

Danksagungen: 399

  • Nachricht senden

17

Montag, 2. Januar 2017, 14:15

Zitat

250ms für die framework.extras.css
nee das ist einfach von der Platte geladen, die Datei exesiert, wird aber vom Modul bereitgestellt.

Ich meinte die "combine/sha hash" files (http://www.lilacandthedonkey.de/combine/…c1db-1475929465) das ist font awesome + bootstrap scss datei die über den PHP Script kompeliert wird
Qualität eines Codes misst man in WTF/Sekunde

Carpenter

Schüler

  • »Carpenter« ist der Autor dieses Themas

Beiträge: 83

Wohnort: München

Danksagungen: 19

  • Nachricht senden

18

Montag, 2. Januar 2017, 14:30

Jop, das geht doch noch für die dev.

Carpenter

Schüler

  • »Carpenter« ist der Autor dieses Themas

Beiträge: 83

Wohnort: München

Danksagungen: 19

  • Nachricht senden

19

Dienstag, 3. Januar 2017, 10:59

Hi
die Assets in der DEV environment on the fly zu mergen ist für mich noch nicht ganz zufriendenstellend.
Anfangs hat er dafür ca 2 Sekunden benötigt. Daraufhin habe ich das Dateisystem von Vagrant auf NFS gewechselt und das sparte ca 0.5 Sekunden ein.
Das war mir immer noch zu lang.

Dann habe ich angefangen lokal mein Nginx bissl besser zu konfigurieren (gzip, static, http2, etc)
Das hat weitere 0.5 Sekunden gebracht.

Daraufhin Cachte ich in der DEV Version die statischen libs (jquery, hammer und so) und hab dann meine eigenen js Dateien generiert und dran gehangen.
Das sparte ca. 0.5 Sekunde, war aber immer noch zu lang und auch keine gute Lösung. Es wächst ja alles.


Ich bin dann dazu über gegangen ne Config einzuführen, dass er mir assets in der DEV Version komplett cached. Wenn die config deaktiviert ist, merged er alles on the fly.
Allerdings bin ich damit auch nicht zufrieden, denn dann kann ichs auch direkt über ne Config steuern.
Für Ideen wär ich offen.

Im Stage System habe ich dann den Command erstellt der die minified Files dann nach nem commit generiert.
Das funktioniert außerordentlich gut.



Die Bilder muss ich noch zusammenfassen. Unabhängig davon sind mir 2 Dinge aufgefallen.
Wieso fängt er erst so spät an die Assets zu laden und wieso macht er das nicht gleichzeitig wenn ich doch http2 hab?
Das ist mir im Moment noch nicht so klar.

Viele Grüße
Carpenter

BlackScorp

Moderator

Beiträge: 1 242

Wohnort: 127.0.0.1

Danksagungen: 399

  • Nachricht senden

20

Dienstag, 3. Januar 2017, 11:10

wieso sind das alles 0 byte antworten? läuft das überhaupt? kannst du auch mal ein response header von einer Datei anzeigen? Die Balken sagen nichts aus wenn man kein Response Header dazu hat
Qualität eines Codes misst man in WTF/Sekunde

Ähnliche Themen

Social Bookmarks

Thema bewerten