DW2021 Ladezeiten reduzieren - Page Speed

Community Beginner ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

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

Views

129

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Dec 29, 2021 Dec 29, 2021
quote

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/

Likes

Translate

Translate
Adobe Community Professional ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

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!

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

quote

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

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

quote
...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. 😥

 

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

quote

 

 

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

What's the URL to your site please? 

WebP is no guarantee your image is smaller.

 

 

 

 

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 29, 2021 Dec 29, 2021

Copy link to clipboard

Copied

quote

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/

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 30, 2021 Dec 30, 2021

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 30, 2021 Dec 30, 2021

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines