WebApp: Ein sinnvoller Schritt für Ladezeitenoptimierung?

Derzeit schreibe ich eine Webapp, im Rahmen eines "Portfolio"-Projekts und Hobbys mit der Schwerpunktsetzung, dass das Projekt auf Vanilla-JavaScript, HTML und CSS bei der Umsetzung baut und weil mir auffiel, dass die Ladezeiten optimiert werden könnten, stell ich diese Frage.

Persönlich sehe ich mich vom Stand her als fortgeschritten was diese Sprachen angehet an, nehme jedoch, da ich mir nicht zu 100% sicher bin, jeden Rat und derartiges an - vielleicht hat der ein oder andere noch coole Vorschläge wie man das kann.

Ich bedanke mich für die Antworten im Voraus.

3 Antworten

Mirko Marek

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

02.04.2024, 23:00

Hi EGNUTV,

du kannst durch einige Dinge die Ladezeit optimieren. Und zwar kannst du für alle mögliche Dateien Preloads machen. Verwende wenige CSS-Dateien und wenige Javascript-Dateien. Versuche auf Frameworks wie jQuery zu verzichten und nutze lieber JavaScript-Libraries bei Bedarf. Nutze moderne Bildformate wie webp. Passe deine Bilder an um Ladezeiten zu optimieren. Verwende keine CSS-Frameworks wie Bootstrap und Tailwind. Diese führen zu zuviel Code-Overload, was die Perfomance beim rendern verlangsamt. Zudem bringen auch die eingebunden zusätzlichen JS und CSS-Dateien auch ordentlich Codeoverload mit sich.

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

02.04.2024, 16:03

Da gibt es viele Ansatzpunkte:

Ressourcencaching
Ressourcenbundling (CSS und JS jeweils bündeln und minifizieren/uglifyen, Redundanzen entfernen)
HTML minifizieren
Ressourcenkompression (Stichwort: GZIP)
Imagesets verwenden
Next-Gen-Bildformate wie WebP oder AVIF einsetzen
Font Swapping nutzen
Lazy-Loading für speicherlastige Ressourcen (wie Bilder)
Statt einer extra Font für Icons SVG nutzen
Generell Code optimieren

Nicht jeder dieser Punkte muss unbedingt zu großen, positiven Performancesprüngen führen. Es ist also auch etwas, was getestet werden muss.

Weitere Tipps kannst du dir via PageSpeed Insights einholen, wobei auch die Tipps aus dieser Analyse eine individuelle Prüfung benötigen. Nicht alles ist sinnvoll oder leicht umsetzbar.

Chris102004

02.04.2024, 15:48

Am Besten nutzt du bei den Bibliotheken von Vanilla oder auch jQuery immer die Dateien, die schon ein "min" im Dateinamen haben.

Diese sind bereits optimiert und "minified". HTML würde ich, genau wie CSS so lassen, da diese Dateien meist nicht so groß sind/werden.

Bei einer WebApp ist natürlich auch noch die Einstellung des Webservers wichtig, denn der bestimmt noch das Caching der Dateien - dies sollte 30 Tage (bei Javascript, CSS und Bildern) betragen.

Hi Leute, ich möchte eine kleine Homepage (HTML, CSS, JavaScript)erstellen und hätte gern eine Funktion, bei der man Text eingeben kann, der mir anschließend zugesendet wird. Bitte schreibt nicht, dass ich einfach eine E-Mail Adresse verlinken soll. Vielen Dank im Voraus. :-)

...zur Frage

App aus HTML Code?

Hallo,

ich habe einen HTML-Code und möchte diesen Code zu einer IOS App machen. Diese App soll dann auf Schulgeräten installiert werden. Wie kann ich das machen?

...zur Frage

Schnell Geld mit Html und Css?

Hallo ich habe gute Html und css kenntnisse ich muss schnell an geld kommen was würdet ihr mir empfehlen ich rede nicht von tausenden euros sondern ein bisschen

...zur Frage

Css div Container weissen Rand los werden?

Hey Leute, Lerne derzeit CSS und bin gerade bei einem Hindernis gelandet. Irgendwie ist ein weisser Rand aussen von meinem div Container entstanden und egal mit welchen Befehl, er geht einfach nicht weg. Habe es auch schon mit margin: 0%; versucht.

Nix hat funktioniert.

Ich würde den Code gerne einfügen jedoch ist er zu lang. Wenn jemand Interesse hat mir im privat Chat zu helfen kann ich gerne den Code zuschicken.

Hat jemand anderes trotzdem eine Ahnung was das sein kann und wie ich es loswerden kann? Habe den Code bereits kontrolliert und und nix finden können.

...zur Frage

Webentwicklung mit Baukasten oder selber programmiert?

Moin, ich frage mich zurzeit, macht es noch Sinn, eine Website selbst zu programmieren? Also zum Beispiel wenn man eine Restaurant Website oder eine Unternehmenswebsite entwickelt. Also mit zum Beispiel React und so. Oder auch React und ein Headless CMS? Weil viele verwenden ja oft Baukasten Systeme oder Templates. Ist man als Webentwickler noch gut, wenn man selbst programmiert?

...zur Frage

Wird HTMX JavaScript nutzlos machen?

...zur Frage

Wo kann man eine Internetseite selber programmieren (selbst HTMLund CSS Code schreiben)?

...zur Frage

Sollte man nach HTML/CSS nicht lieber PHP lernen, weil man damit die Formulare auf einer Webseite funktionstüchtig machen kann?

Weiß gerade nicht, was ich nach HTML und Css lernen soll... PHP oder Javascript.

Mit dem HTML und CSS kurs bin ich ja bald fertig. Aber wenn man zum Beispiel Formulare in die Seite einbaut, kann man sie doch ohne eine Programmiersprache nicht wirklich benutzen...

Ich hoffe ihr habt verstanden, was ich meine... Danke :)

...zur Frage

Zweitsprachige Webseite mit JS?

Ist es besser eine extra Seite für die zweite Sprache meiner Website zu machen also seite.com und seite.com/de, oder wäre es besser, die Texte direkt mit Js zu machen. Also wenn einer mit der Browsersprache Deutsch die Webseite betritt, soll Js es ermitteln und dementsprechend den Text einblenden ohne eine zweite Seite. Was wäre besser

...zur Frage

HTML Hilfe?

Ich habe meine erste HTML-Datei geschrieben.

Ich habe auf der Hauptseite einen Link eingebaut, der auf eine zweite Seite dieser Webseite weiterleitet. Also man klickt auf einen Button und kommt auf eine andere, interne Seite.

<a href="/Impressum.html" target="_blank">Impressum</a>

Aber wenn ich drauf klicke, dann werde ich zwar weitergeleitet, aber dann kommt das hier.

Und ja, die Seite, auf die man weitergeleitet werden soll existiert. Ich kann auch in meiner Datei drauf klicken und komme dann dorthin.

...zur Frage

wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?

<link rel="stylesheet" href="style.css">
<?php
$db = unserialize(file_get_contents('data.php'));
if($db == false){
        $db = array();
}
if($_POST['mail'] == ''){
        if($_POST['name'] == ''){
                if($_POST['pass'] == ''){a
                        if(!array_key_exists($_POST['mail'], $db){
                                $db[$_POST['mail']] = [$_POST['name'], []];
                                file_put_contents('data.php', serialize($db));
                        } 
                }
        }
}
?>
<form action="" method="post">
    <center>
        <label for="firma_name" >name:</label><br>
        <input type="text" class="input" name="name" autocomplete="off"><br>
        <label for="produkte">email:</label><br>
        <input type="text"  class="input" name="mail" autocomplete="off"><br>
        <label for="adresse">pass:</label><br>
        <input type="text"  class="input" name="pass" autocomplete="off"><br>
        <input type="submit" class="anmelde_button" value="anmelden">
    </center>
</form>

wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?

...zur Frage

Nav bar farb wechsel?

Hi ich möchte gerne das meine navbar die farbe wechselt wenn ich scrolle, was ich auch geschafft habe aber ich möchte gerne das sie erst die farbe wechselt wenn ich bis zu einer bestimmten höhe scrolle, also nicht direkt wenn ich anfange zu scrollen. Was muss ich da tun? :))) Hoffe man versteht was ich meine

<script>
 document.addEventListener('scroll',() => {
    const header =document.querySelector('header');
    
      if (window.scrollY >4) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  })
</script>

...zur Frage

"textarea" html Feld mitwachsen?

<textarea class="form-control" name="Adresse">{if $pdf}{$values.Adresse|nl2br}{/if}</textarea>

Kann man dieses Feld so schreiben, dass es mitwächst. Das KEIN Scrollbalken kommt, sondern wie schon gesagt mitwächst

...zur Frage

CSS Button und collapsible nebeneinander bekommen?

Hey, wie bekommt man den Button und das collapsible nebeneinander ?

Hier der HTML Code:

<div class="fach" id ="${nameDesFachs}"> <button type="button" class="collapsible">${nameDesFachs}</button><div class="content hidden"></div></div>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen