Avif Bilder nutzen und Schrift kommt später

  • Gelöst melojezzed

    (@melojezzed)


    vor 1 Jahr, 10 Monaten

    Hi zusammen,

    die Seite, die ich hier erstellt habe hat eine katastrophale Ladezeit. Außerdem taucht die Schrift der Überschriften immer etwas später auf als der Rest.

    Nun habe ich gelesen, dass das Bild-Dateiformat Avif wohl erheblich komprimiert und mittlerweile von Chrome, Safari, Firefox, Internet Explorer, Opera und Edge unterstützt wird. Ich habe also den Versuch gestartet ein paar Bilder zu komprimieren und diese in meiner Galerie hochzuladen (musste allerdings in die function.php einen Zusatz einfügen, damit ich es überhaupt hochladen durfte). Als nächste wollte ich im Elementor-Page-Builder das Bild im Bildkarussell einfügen und da wird mir die Datei als Auswahl leider nicht angezeigt (ich hab das Problem gegoogelt, aber scheinbar hat sonst keiner das Problem). Ich weiß, dass es Plugins gibt, um direkt alle Bilder konvertieren, aber es sind ziemlich viele Dateien und diese Seite muss leider ohne weiteres Budget bald stehen. Gibt es da eine Lösung?

    Weiterhin habe ich die ausgewählten Schriften über die Font-Face-Methode (also via FTP-Upload) hochgeladen, im Customizer mit H1-H4 definiert und über HTML-Tag festgelegt (nicht über Stile>Typografie). Allerdings erscheinen die Schriften nun immer etwas später. Liegt es daran? Oder liegt es daran, dass die Seite im Allgemeinen eine schlechte Leistung hat?

    Viele Dank für das Feedback!

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Jahr, 10 Monaten

    Hallo,
    bei der Website gibt es einige Probleme, die dazu beitragen, dass die Performance der Website ungünstig ist:

    • In der developer Console (Aufruf mit F12) findest du einige Fehler, die mit einer fehlerhaften Einbindung der Schriften zusammenhängen. Wie man Schriften lokal korrekt einbindet, findest du z. B. in dem folgenden Beitrag. Viele hilfreiche Informationen zum Thema Google Fonts findest du auch z. B. in dem folgenden Beitrag.
    • Keine Verwendung eines SSL-Zertifikats. In dem folgenden Beitrag findest du viele Hinweise, warum das wichtig ist.
    • In der developer Console (Aufruf mit F12) findest du über den Button „Lighthouse“ viele Informationen mit Ansätzen, wo Verbesserungspotential besteht. Die dort genannten Punkte solltest du zunächst abarbeiten.
    • Auch die Verwendung von Elementor wirkt sich auf die Performance einer Website nicht gerade positiv aus.

    Kurz gesagt: Erst solltest du die o. g. Dinge abarbeiten. Bilder sollten vor der Verwendung auf einer WordPress-Website bereits optimiert werden.

    Um auf deine Eingangsfrage einzugehen: Nein, aktuell wird das AVIF-Format in WordPress standardmäßig noch nicht unterstützt. Allerdings gibt es schon einige Plugins für diesen Zweck, wobei berücksichtigt werden sollte, dass noch nicht alle Browser dieses Format unterstützen. Weitere Informationen findest du z. B. in diesem Beitrag.

    Du findest unter Werkzeuge > Websitezustand > Info einen Bericht zur Website. Warte bitte einen Moment bis die Ladeanzeige ganz oben abgeschlossen ist und kopiere dann per Button den Website-Bericht in deine Zwischenablage. Über den Button „Bericht in die Zwischenablage kopieren“ kannst du den Bericht unverändert (bitte mit den Akzentzeichen am Anfang und Ende) einfügen und anschließend hier posten. Evtl. ergeben sich dann weitere Anhaltspunkte, ob und wo das Problem liegt.

    Viele Grüße
    Hans-Gerd

    • Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Hans-Gerd Gerhards. Grund: Tippfehler
    klingelfunk

    (@klingelfunk)

    vor 1 Jahr, 10 Monaten

    Bin neu im Forum und habe eine Frage. Wie kann man denn hier im Forum ein neues Thema erstellen? Ich finde hier kein Kästchen oder ähnliches um ein neues Thema zu erstellen.

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 1 Jahr, 10 Monaten

    Du liest dir den angehefteten Beitrag Bevor du ein neues Thema (Thread) erstellst durch. Anschließend wählst du eines der Foren aus, scrollst ganz nach unten und füllst das Formularfeld aus. Dann noch absenden und geduldig auf eine Antwort warten.

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 1 Jahr, 10 Monaten

    @melojezzed

    Im Moment überträgt die Startseite rund 42 Megabyte – kein Wunder, dass das etwas braucht. Da wird dir auch ein anderes Bildformat nicht viel bringen.

    Die Fonts sind falsch eingebunden – aktuell wird nach http://you…nck.com/wp-content/themes/oceanwp-child-theme-master/AGaramondPro-Regular.ttf gesucht und vermutlich gibt es das Child Theme so nicht oder der Fonts liegt woanders.

    Ohne Website-Bericht können wir sonst nicht viel helfen, aber das hat ja Hans-Gerd schon geschrieben.

    Thread-Starter melojezzed

    (@melojezzed)

    vor 1 Jahr, 9 Monaten

    Hi!

    Erstmal vielen Dank für die vielen Tipps!

    Hier findet ihr den aktuellen Zwischenbericht:

    "

wp-core

version: 6.2.2
    site_language: de_DE
    user_language: de_DE
    timezone: +00:00
    permalink: /%postname%/
    https_status: false
    multisite: false
    user_registration: 0
    blog_public: 1
    default_comment_status: open
    environment_type: production
    user_count: 1
    dotorg_communication: true

wp-paths-sizes

wordpress_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_03/app
    wordpress_size: 184,34 MB (193292405 bytes)
    uploads_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_03/app/wp-content/uploads
    uploads_size: 215,25 MB (225710277 bytes)
    themes_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_03/app/wp-content/themes
    themes_size: 27,39 MB (28717856 bytes)
    plugins_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_03/app/wp-content/plugins
    plugins_size: 113,92 MB (119457281 bytes)
    database_size: 37,48 MB (39305216 bytes)
    total_size: 578,39 MB (606483035 bytes)

wp-dropins (1)

advanced-cache.php: true

wp-active-theme

name: OceanWP Child Theme (oceanwp-child-theme-master)
    version: 1.0
    author: OceanWP
    author_website: https://oceanwp.org/
    parent_theme: OceanWP (oceanwp)
    theme_features: core-block-patterns, widgets-block-editor, align-wide, wp-block-styles, responsive-embeds, editor-styles, editor-style, menus, post-formats, title-tag, automatic-feed-links, post-thumbnails, custom-header, custom-logo, html5, woocommerce, wc-product-gallery-zoom, wc-product-gallery-lightbox, wc-product-gallery-slider, customize-selective-refresh-widgets, widgets
    theme_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_03/app/wp-content/themes/oceanwp-child-theme-master
    auto_update: Aktiviert

wp-parent-theme

name: OceanWP (oceanwp)
    version: 3.4.3
    author: OceanWP
    author_website: https://oceanwp.org/about-oceanwp/
    theme_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_03/app/wp-content/themes/oceanwp
    auto_update: Aktiviert

wp-themes-inactive (2)

Twenty Twenty-Three: version: 1.1, author: Das WordPress-Team, Automatische Aktualisierungen aktiviert
    Twenty Twenty-Two: version: 1.4, author: Das WordPress-Team, Automatische Aktualisierungen aktiviert

wp-mu-plugins (1)

WordPressSecureMode.php: author: (undefined), version: (undefined)

wp-plugins-active (16)

Antispam Bee: version: 2.11.3, author: pluginkollektiv, Automatische Aktualisierungen aktiviert
    Autoptimize: version: 3.1.7, author: Frank Goossens (futtta), Automatische Aktualisierungen aktiviert
    Contact Form 7: version: 5.7.6, author: Takayuki Miyoshi, Automatische Aktualisierungen aktiviert
    Custom links in Elementor Image Carousel: version: 1.1.1, author: Charlie Etienne, Automatische Aktualisierungen aktiviert
    Disable & Remove Google Fonts: version: 1.5.4, author: Fonts Plugin, Automatische Aktualisierungen aktiviert
    Elementor: version: 3.13.2, author: Elementor.com, Automatische Aktualisierungen aktiviert
    Limit Login Attempts Reloaded: version: 2.25.16, author: Limit Login Attempts Reloaded, Automatische Aktualisierungen aktiviert
    Ocean Extra: version: 2.1.6, author: OceanWP, Automatische Aktualisierungen aktiviert
    Ocean Stick Anything: version: 2.0.5, author: OceanWP, Automatische Aktualisierungen aktiviert
    Real Cookie Banner (Free): version: 3.6.10, author: devowl.io (latest version: 3.6.11), Automatische Aktualisierungen aktiviert
    Strato Assistant: version: 7.3.0, author: Strato, Automatische Aktualisierungen aktiviert
    TranslatePress - Multilingual: version: 2.5.3, author: Cozmoslabs, Razvan Mocanu, Madalin Ungureanu, Cristophor Hurduban, Automatische Aktualisierungen aktiviert
    UpdraftPlus - Backup/Restore: version: 1.23.4, author: UpdraftPlus.Com, DavidAnderson, Automatische Aktualisierungen aktiviert
    WP Super Cache: version: 1.9.4, author: Automattic, Automatische Aktualisierungen aktiviert
    Yoast Duplicate Post: version: 4.5, author: Enrico Battocchi & Team Yoast, Automatische Aktualisierungen aktiviert
    Yoast SEO: version: 20.7, author: Team Yoast, Automatische Aktualisierungen aktiviert

wp-media

image_editor: WP_Image_Editor_Imagick
    imagick_module_version: 1692
    imagemagick_version: ImageMagick 6.9.12-60 Q16 x86_64 17403 https://legacy.imagemagick.org
    imagick_version: 3.5.1
    file_uploads: File uploads is turned off
    post_max_size: 128M
    upload_max_filesize: 128M
    max_effective_size: 128 MB
    max_file_uploads: 20
    imagick_limits:
    imagick::RESOURCETYPE_AREA: 4 GB
    imagick::RESOURCETYPE_DISK: 9.2233720368548E+18
    imagick::RESOURCETYPE_FILE: 192
    imagick::RESOURCETYPE_MAP: 4 GB
    imagick::RESOURCETYPE_MEMORY: 2 GB
    imagick::RESOURCETYPE_THREAD: 1
    imagick::RESOURCETYPE_TIME: 9.2233720368548E+18
    imagemagick_file_formats: 3FR, 3G2, 3GP, A, AAI, AI, APNG, ART, ARW, AVI, AVS, B, BGR, BGRA, BGRO, BMP, BMP2, BMP3, BRF, C, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DNG, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, FAX, FILE, FITS, FRACTAL, FTP, FTS, G, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, H, HALD, HDR, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, JNG, JNX, JPE, JPEG, JPG, JPS, JSON, K, K25, KDC, LABEL, M, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPEG, MPG, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, O, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, POCKETMOD, PPM, PS, PS2, PS3, PSB, PSD, PTIF, PWP, R, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCREENSHOT, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIDEO, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMV, WPG, X3F, XBM, XC, XCF, XPM, XPS, XV, Y, YCbCr, YCbCrA, YUV
    gd_version: bundled (2.1.0 compatible)
    gd_formats: GIF, JPEG, PNG, WebP, BMP
    ghostscript_version: not available

wp-server

server_architecture: Linux localhost 3.10.0-1160.83.1.el7.x86_64 #1 SMP Linux localhost 3.10.0-1160.83.1.el7.x86_64 #1 SMP Linux localhost 3.10.0-1160.83.1.el7.x86_64 #1 SMP
    httpd_software: Apache/2.4.57 (Unix)
    php_version: 8.0.28 64bit
    php_sapi: cgi-fcgi
    max_input_variables: 4000
    time_limit: 240
    memory_limit: 512M
    max_input_time: 60
    upload_max_filesize: 128M
    php_post_max_size: 128M
    curl_version: 7.88.1 OpenSSL/1.1.1t
    suhosin: false
    imagick_availability: true
    pretty_permalinks: true
    htaccess_extra_rules: true

wp-database

extension: mysqli
    server_version: 5.7.41-log
    client_version: mysqlnd 8.0.28
    max_allowed_packet: 67108864
    max_connections: 3000

wp-constants

WP_HOME: undefined
    WP_SITEURL: undefined
    WP_CONTENT_DIR: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_03/app/wp-content
    WP_PLUGIN_DIR: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_03/app/wp-content/plugins
    WP_MEMORY_LIMIT: 40M
    WP_MAX_MEMORY_LIMIT: 512M
    WP_DEBUG: false
    WP_DEBUG_DISPLAY: true
    WP_DEBUG_LOG: false
    SCRIPT_DEBUG: false
    WP_CACHE: true
    CONCATENATE_SCRIPTS: undefined
    COMPRESS_SCRIPTS: undefined
    COMPRESS_CSS: undefined
    WP_ENVIRONMENT_TYPE: Nicht definiert
    DB_CHARSET: utf8
    DB_COLLATE: undefined

wp-filesystem

wordpress: writable
    wp-content: writable
    uploads: writable
    plugins: writable
    themes: writable
    mu-plugins: writable

"

    Also die Schriften habe ich eigentlich so eingebunden wie in der Anleitung. Das Childtheme musste ich nicht mal selbst bauen, das gab es bereits von OceanWP. In diesem Ordner habe ich den Ordner „fonts“ erstellt und die Schriftarten als eot, otf, ttf, woff, woff2 hochgeladen.

    Darüber hinaus habe ich im Childtheme Ordner eine style.css und function.php Datei erstellt:

    Die style.css:

    "

/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */
@font-face {
font-family: 'roboto-regular';
src: url('fonts/roboto-regular.woff2') format('woff2'),
url('fonts/roboto-regular.woff') format('woff'),
url('fonts/roboto-regular.ttf') format('truetype'),
url('fonts/roboto-regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'opensans-regular';
src: url('fonts/opensans-regular.woff2') format('woff2'),
url('fonts/opensans-regular.woff') format('woff'),
url('fonts/opensans-regular.ttf') format('truetype'),
url('fonts/opensans-regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'opensans-light';
src: url('fonts/opensans-light.woff2') format('woff2'),
url('fonts/opensans-light.woff') format('woff'),
url('fonts/opensans-light.ttf') format('truetype'),
url('fonts/opensans-light.eot') format('embedded-opentype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'AGaramondPro-BoldItalic';
src: url(./AGaramondPro-BoldItalic.eot);
src: url(./AGaramondPro-BoldItalic.eot?#iefix) format('embedded-opentype'),
url(./AGaramondPro-BoldItalic.ttf) format('truetype'),
url(./AGaramondPro-BoldItalic.woff) format('woff'),
url(./AGaramondPro-BoldItalic.woff2) format('woff2');
font-display: swap;
}

@font-face {
font-family: 'GaramondPremrPro-It';
src: url(./GaramondPremrPro-It.eot);
src: url(./GaramondPremrPro-It.eot?#iefix) format('embedded-opentype'),
url(./GaramondPremrPro-It.ttf) format('truetype'),
url(./GaramondPremrPro-It.woff) format('woff'),
url(./GaramondPremrPro-It.woff2) format('woff2');
font-display: swap;
}
@font-face {
font-family: 'AGaramondPro-Regular';
src: url(./AGaramondPro-Regular.eot);
src: url(./AGaramondPro-Regular.eot?#iefix) format('embedded-opentype'),
url(./AGaramondPro-Regular.ttf) format('truetype'),
url(./AGaramondPro-Regular.woff) format('woff'),
url(./AGaramondPro-Regular.woff2) format('woff2');
font-display: swap;
}
@font-face {
font-family: 'garamondpremrpro-meditcapt';
src: url(./garamondpremrpro-meditcapt.eot);
src: url(./garamondpremrpro-meditcapt.eot?#iefix) format('embedded-opentype'),
url(./garamondpremrpro-meditcapt.ttf) format('truetype'),
url(./garamondpremrpro-meditcapt.woff) format('woff'),
url(./garamondpremrpro-meditcapt.woff2) format('woff2');
font-display: swap;
}
"

    (Das „font-display: swap;“ hab ich neu da rein, hab gelesen, dass dann erstmal Systemschriften angezeigt werden, bis die eigentliche Schrift kommt)

    Die function.php:

    "

<?php

/**

 * OceanWP Child Theme Functions

 *

 * When running a child theme (see http://codex.wordpress.org/Theme_Development

 * and http://codex.wordpress.org/Child_Themes), you can override certain

 * functions (those wrapped in a function_exists() call) by defining them first

 * in your child theme's functions.php file. The child theme's functions.php

 * file is included before the parent theme's file, so the child theme

 * functions will be used.

 *

 * Text Domain: oceanwp

 * @link http://codex.wordpress.org/Plugin_API

 *

 */

/**

 * Load the parent style.css file

 *

 * @link http://codex.wordpress.org/Child_Themes

 */

function oceanwp_child_enqueue_parent_style() {

// Dynamically get version number of the parent stylesheet (lets browsers re-cache your stylesheet when you update the theme).

$theme   = wp_get_theme( 'OceanWP' );

$version = $theme->get( 'Version' );

// Load the stylesheet.

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'oceanwp-style' ), $version );

}

add_action( 'wp_enqueue_scripts', 'oceanwp_child_enqueue_parent_style' );

// Add custom font to font settings

function ocean_add_custom_fonts() {

return array( 'roboto-regular', 'opensans-regular','opensans-light', 'AGaramondPro-BoldItalic', 'GaramondPremrPro-It', 'AGaramondPro-Regular', 'Garamondpremrpro-medicapt' ); // You can add more then 1 font to the array!

}
"

    Seltsam ist, dass bei der Konsole steht: „[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (AGaramondPro-Regular.ttf, line 0)“ und die Schrift allerdings schon angezeigt wird, nur etwas später (also ich glaube „font-display: swap;“ hat schon geholfen).

    Lighthouse habe ich gefunden und werde das mal durchgehen. Sobald die Seite zu Ihrer eigenen Domaine umzieht, bekommt das http noch ein s.

    Vielen Dank!

    • Diese Antwort wurde vor 1 Jahr, 9 Monaten von melojezzed geändert.
    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 1 Jahr, 9 Monaten

    Das Childtheme musste ich nicht mal selbst bauen, das gab es bereits von OceanWP. In diesem Ordner habe ich den Ordner „fonts“ erstellt und die Schriftarten als eot, otf, ttf, woff, woff2 hochgeladen.

    Wenn die Schrift in wp-content/themes/oceanwp-child-theme-master/fonts/ liegt, du sie aber mit wp-content/themes/oceanwp-child-theme-master/ einbindest, wird sie eben nicht gefunden. ¯\_(ツ)_/¯

    @font-face {
font-family: 'AGaramondPro-BoldItalic';
…

    Richtig wäre es so, wie du es bei der Roboto auch gemacht hast:

    <code role="textbox" aria-multiline="true" aria-label="Code" class="block-editor-rich-text__editable rich-text" style="white-space: pre-wrap; min-width: 1px;" contenteditable="true">@font-face {
font-family: 'fonts/AGaramondPro-BoldItalic';
…

    Übrigens: es mag kleinlich erscheinen, aber der Tippfehler in

    Die function.php … 

    ist einer dieser kleinen, gemeinen Fehler, bei denen du ewig suchst bis du verstehst, dass die Datei nur geladen wird, wenn du sie richtig schreibst: functions.php – mit einem Plural-s.

    Thread-Starter melojezzed

    (@melojezzed)

    vor 1 Jahr, 9 Monaten

    Hi! Vielen Dank fürs Feedback, es hat funktioniert 🙂

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Das Thema „Avif Bilder nutzen und Schrift kommt später“ ist für neue Antworten geschlossen.