Divi – Fontawsome – Icons – CSS content Attribut

Bei Fragen zu gekauften Themes (hier: Divi) können wir dir nicht weiterhelfen, weil sie uns für einen kostenlosen Support nicht kostenlos zur Verfügung stehen.

Bitte wende dich bei Fragen zu diesem Theme an die Entwickler.

Die Icons zu Facebook, Twitter, LinkedIn und Xing werden mir in der Fußzeile angezeigt. Hast du mal den Browser-Cache geleert?

Die Ladezeiten der Website sind so noch nich akzetabel:

74 Anfragen
20,14 MB / 19,44 MB übertragen
Beendet: 21,95 s
DOMContentLoaded: 4,61 s
load: 35,01 s

Die Problematik schien mir allemeiner Natur, zumindest dachte ich, dass Font-Awsome zumindest zum Teil frei ist/wäre.

Wieso Font-Awesome? Das Theme verwendet den Elegant Icon Font. Auf der Webseite des Fonts siehst du auch eine Übersicht der Icons mit ihrem jeweiligen Unicode zur Einbindung. Zu xing scheint es aber kein Icon zu geben.

Was ich mal nicht so „nice“ fand, im SVG rumzufuhrwerken.

… verstehe ich nicht. Du kannst ein svg- oder auch png-Icon hochladen (spielt bei der Größe wahrscheinlich keine so große Rolle) und per CSS einbinden.

.et-social-xing a.icon::before {
  content: url(https://n***7.de/wp-content/uploads/2022/02/xing.png);
}

Wenn du eine beliebige svg-Datei verwenden möchtest und die Größe nach deinen Bedürfnissen anpassen möchtest, kannst du auch mit einem Background-Image arbeiten, sinngemäß sowas wie

.et-social-xing a.icon::before {
  background-image: url('/images/pdf.png');
  background-size: 10px 20px;
  display: inline-block;
  width: 10px; 
  height: 20px;
  content:"";}

Die Ladezeit, ja, das ist wohl _der_ Nachteil eines solchen Divi-Themes,

Multipurpose-Themes gelten oft als Performance-Bremse, weil die ganzen Einstellungsoptionen erst einmal abgerufen und aufbereitet werden müssen, um daraus dynamisch eine Website zu generieren. Das lässt sich mit einem Cache-Plugin wie z.B. Surge etwas abfangen, schützt aber nicht davor unsinnig große Bilder oder Videos hochzuladen.

Wenn ich mir Websites anschaue, verwende ich gerne die Entwickler-Tools des Browsers. Im Tab Netzwerk erhalte ich eine Übersicht aller geladenen Dateien und ihrer Größe, im Tab Inspektor kann ich mir ansehen, wie die Elemente eingebunden werden und welche Größe per CSS vorgegeben wird.
Dein Portraitfoto ist mit einer Auflösung von 1600 x 1600 Pixeln eingebunden, wird dann aber (abhängig von der Displaygröße) gerade mal mit 320 x 320 Pixeln angezeigt. Dafür eine Datei mit einem Volumen von 2 Megabyte einzubinden ist … wenig hilfreich. Die Bandbreite ist zwar inzwischen selbst bei Nutzung eines Smartphone in der Eifel besser beworden, aber 2MB nur für ein einziges Bild(chen – 320px!) ist einfach unvernünftig. Wieso als animierter Hintergrund (!) ein Video alle-farben-langsam.mp4 mit satten 1,5MB gleich fünfmal eingebunden wird, verstehe ich auch nicht. Hier ist wahrscheinlich einfach unkundig oder schlampig oder schnell und billig gearbeitet worden. Und so lässt sich die Liste der Fehler fortschreiben, sodaß ich in diesem Fall nicht unbedingt das Theme für die schlechte* Performance verantwortlich machen möchte.

(* wir halten uns hier mit der Beurteilung von Webseiten sehr zurück, weil wir die Hintergründe nicht kennen. Als Faustformel wird aber jede Webseite, die länger als 3 Sekunden braucht um Inhalte im sichtbaren Bereich zu laden, als zu langsam bewertet.
Google Pagespeed gibt für die Webseite verschiedene Empfehlungen ab, wobei nur „Erstreaktionszeit des Servers verringern“ möglicherweise auf die Verwendung eines Multipurpose-Theme zurückzuführen ist.)

• Diese Antwort wurde geändert vor 2 Jahren, 7 Monaten von Bego Mario Garde.