DW2021 Ladezeiten reduzieren - Page Speed

[christiana99055644]

Guten Tag, ich teste seit Tagen DW2021, habe jetzt eine Website veröffenlticht. Die gleiche war vorher mit DW CS6 erstellt. Optisch etwa gleich, Umfang und Inhalt identisch. Ich habe beide bezüglich Page Speed getestet und die neue aus DW2021 ist viel schlechter. Ladezeiten deutlich länger. Das liegt an den relativ großen Dateien von Bootstrap (css über 200kB, js etwa 250kB).

Gibt es eine Möglichkeit, die Bootstrap-Dateien vom System zu reduzieren? Ich brauche keine 10% der Funktionalität. So dass man nur eine reduzierte Version von Bootstrap auf den Server läd?

Alternativ könnte eine einfache Variante ausreichen wie z. B. die einfache Startvorlage mit multiColumnTemplate.css. Aber so etwas kann ich doch mit DW CS6 auch bauen.

Hat jemand eine Idee, wie ich die Ladezeiten runter bekomme?

Vielen Dank für Tipps oder Ideen!

Christian

[Nancy OShea]

This is not a Dreamweaver question as Dreamweaver is merely a code editor.  Page speed optimization is something all developers must cope with regardless of which code editor they use.

OPTION 1:  Speed begins at the server level.  Get better web hosting  on VPN or dedicated server.  Cheap, shared hosting plans with one server that supports 500+ websites is not good for you or your site visitors.

OPTION 2: Use minified scripts from the Bootstrap Content Distribution Network (CDN).

https://www.bootstrapcdn.com/

OPTION 3: Customize your Bootstrap build with SASS variables to turn off unwanted components.

https://getbootstrap.com/docs/4.0/getting-started/theming/

Optimize your site's images and other assets.  Perform page speed tests to ensure your sever and page are running efficiently.

https://gtmetrix.com/

https://pagespeed.web.dev/

Good luck!

[osgood_]

OPTION 4: Dont use Bootstrap - although being fair its probably not Bootstrap which is all of the problem (only part of it) as a couple of reasonable sized images will most likely be more than 450k

[Nancy OShea]

...although being fair its probably not Bootstrap which is all of the problem (only part of it) as a couple of reasonable sized images will most likely be more than 450k

=========

I completely agree that Bootstrap alone is not sufficient to impact page load speed much. I also resist the "throw baby out with the bathwater" approach since the problem is likely something much deeper.  But sadly without more information (a URL would help), we may never know what the deeper issue is. 😥

[christiana99055644]

I try in English and Thank you for komments!

It is a question of dreamweaver and bootstrap.

I made a test:

1. Old website with DW CS6, some littel pictures as .jpg
   css: 18kb, js: 4kb
   Result:
   PageSpeed Insights mobile: 97
   time to interactive: 1,1s
2. New website with DWCC 2021, the same URL and content, same server, same pictures now as .webp
   css: 200kb, js: 250kb
   Result:
   PageSpeed Insights mobile: 85
   time to interactive: 3,3s

@ Nancy OShea: Option 3 ist a possible way to go

@ osgood: I will try a version without bootstrap

I wish to find a tool, like a switch to turn off unwanted js- and css-components.

[osgood_]

I wish to find a tool, like a switch to turn off unwanted js- and css-components.

By @christiana99055644

Well if you only include the code you have written it's not a problem. The problem is when you use a lot of 3rd party solutions like frameworks, plugins, libraries - they tend to be bloated for a reason (they are a Swiss army knife) and whilst I dont think these days, given your webpages are hosted on a decent http/2 fast server, speed should not be much of a problem. 

My objection to frameworks, plugins etc, rather than possible speed issues, is its just damn right lazy and unprofessional.

Have you checked the size of your webp images against the size of your jpgs - sometimes webp can be much larger than jpgs.

[Nancy OShea]

What's the URL to your site please? 

WebP is no guarantee your image is smaller.

[B i r n o u · Accepted solution]

Gibt es eine Möglichkeit, die Bootstrap-Dateien vom System zu reduzieren? Ich brauche keine 10% der Funktionalität. So dass man nur eine reduzierte Version von Bootstrap auf den Server läd?

By @christiana99055644

In diesem fall könnten sie ihren eigenen code schreiben.
Wie dem auch sei, um ihnen zu helfen, zu sehen, was in der aktuellen version nicht nützlich ist, probieren sie das webentwicklungswerkzeug https://developer.chrome.com/docs/devtools/coverage/

[christiana99055644]

Das ist richtig. Ich sollte meinen Code selber schreiben, aber da müsste ich viel Zeit investieren, Grundlagen lernen, üben, üben, Fehler machen...

Ich habe mich jetzt anders entschieden. Meine Zeit investiere ich lieber, um Inhalte zu schreiben. Die neue DW2021 habe ich erst mal wieder gekündigt und verwende zunächst weiter meine alte CS6. Mein Standard-Layoutkonzept habe ich überarbeitet. So kann ich in etwa die gleiche Optik erreichen und kann auf Bootstap verzichten. Allerdings noch ohne das Hamburgermenü.

Vielen Dank für die Hilfe, um meine Entscheidung zu treffen!

Und guten Rutsch!

[B i r n o u]

Ich freue mich, dass es ihnen bei der entscheidungsfindung geholfen hat.

Wenn sie kein anderes problem haben, als sich mit dem Hamburger-Menü zu beschäftigen, können sie nach diesem thema googeln, sie werden dutzende von beispielen und lösungen finden ... Aber bedenken sie, dass sie keine neuen, schwerfälligen bibliotheken verwenden müssen.

Wenn sie ein problem haben, zögern sie nicht, ein neues thema zu eröffnen