2016-06-27 8 views
-4

Ich habe meine Website so gestaltet, dass der obige Inhalt optimiert wird, indem nur ein winziger Bruchteil des Twitter-Bootstrap-Frameworks oberhalb der Falte meiner Site verwendet wird unter der Falte.slice up twitter bootstrap, um die Seitenladegeschwindigkeit zu erhöhen

Ich habe eine schwebende Navigationsleiste verwendet, die verkleinert, einige Elemente aus der Containerklasse, und das ist der ganze Twitter-Bootstrap-Inhalt, der über den Falte geladen wird.

Ich fragte mich, könnte ich die bootstrap.css Datei bearbeiten, um diese Teile und inline sie in den Kopf meiner HTML-Seite, dann verschieben Sie das Laden des Rests der CSS, da ich es nicht so schnell brauchen .

Meine Frage; ist es möglich, den twitter-Bootstrap zu editieren und nur die benötigten Teile auszuziehen, um zuerst geladen zu werden, ohne Bootstrap zu zerstören?

+0

Ja, natürlich ist es in Ordnung. –

+0

Inlining wird die Dinge * langsamer machen *. Sie werden das gesamte CSS für jeden Seitenaufruf über die Leitung senden, anstatt einmal für eine zwischengespeicherte CSS-Datei. Das ist eine sehr, sehr schlechte Art, mit Dingen umzugehen. – ceejayoz

+0

@ceejayoz nginx behandelt Caches ziemlich gut und ich würde eher den Teil, der über die Falte lädt, verkleinern und in den Header der Webseite einfügen und dann den Rest nach allem anderen laden. – user1610950

Antwort

2

Dies sind Mikro-Optimierungen, die Ihnen Kopfschmerzen nur für sehr wenig, wenn überhaupt, Nutzen bringen werden.

Es sei denn, Sie haben eine Website, die Millionen von Benutzern pro Tag dient oder Tonnen von Inhalten auf einmal anzeigt (und ich meine wirklich Tonnen, in diesem Fall, vereinfachen Sie Ihre Website!) Sie sehen keinen wirklichen Nutzen mit was Sie schlagen vor.

Was Sie tun können, ist schlau, was Sie optimieren und wie. Für den Anfang, wenn Ihre gesamte Website nur bestimmte Teile von Bootstrap verwendet (d. H. Sie verwenden nie Modals), machen Sie einen benutzerdefinierten Build von Bootstrap von ihrer Website mit dem Zeug, das Sie nicht ausziehen wollen. Dadurch erhalten Sie eine kleinere Menge an Dateien und Sie senden weniger Daten an den Benutzer, was Ihre Website beschleunigt.

Alternativ können Sie, wenn Sie große Mengen der Bibliothek verwenden, einfach ihr vorhandenes CDN (Content Distribution Network) verwenden. Dies wird die js/css-Dateien von einer einzigen URL, die viele Leute verwenden, dienen, was den doppelten Vorteil hat, dass Sie keinen Inhalt von Ihrem eigenen Server ausliefern müssen, nur eine Verbindung zu jemand anderen, und es besteht auch eine gute Chance Wenn der Benutzer eine Site besucht, die dieselbe CDN verwendet hat, würde ihr Browser sie zwischengespeichert haben, sodass sie ohne die Netzwerkanrufe erscheint. Das ist schnell!

Am Ende gibt es eine ganze Reihe von Dingen, die Sie besser optimieren sollten, bevor Sie überhaupt über diese Art von Sache nachdenken. Ich empfehle Ihnen, einen Blick auf die YSlow plugin und Best Practices zu werfen. Es gibt viele Dinge dort, die Sie tun können, um Ihre Website zu optimieren, ohne Bootstrap nur für "über den Fold" Inhalt zu zerhacken.

+0

Vielen Dank, eine sehr detaillierte Antwort, die mir definitiv geholfen hat, das Problem zu lösen. – user1610950