Question - Are there any quick wins for performance?

[AmnestyAM]

Performance Concerns: We use a combination of page caching via our host (Raidboxes) and edge caching via Cloudflare. Cloudflare also automatically optimizes images (size and format), etc. We achieve about 80 out of 100 points in Google’s PageSpeed for mobile: https://pagespeed.web.dev/analysis/https-amnesty-dialog-de/pdy6mfq06z?form_factor=mobile

To investigate further improvements, I analyzed the page loading https://www.webpagetest.org/result/240726_AiDcPD_E60/ particularly the waterfall diagram that shows when components are loaded:

• The infogram script is likely not needed on every page. There also seem to be a couple of other scripts whose necessity on the frontend is unclear (I18n.min.js, siteeditor.js).
• It is unclear if all CSS files are required on the frontend. The editor.css and siteeditor.css might only be needed on the backend and could potentially be removed?
• Preloading fonts might improve page loading times. Currently, they are loaded late, causing layout shifts.
• The largest request is the image in the hero block (“amnesty-dialog....markt-1468x710.jpg”). While the image is as optimized as possible, it still delays the render process. Preloading or fetching the hero block image eagerly could be beneficial.
• Google also flags a missing tag.

To quickly test these out, I uploaded a static copy of the homepage to our web server. One version is unchanged, one version implements the changes above. While the results are not strictly comparable to implementing the changes in the theme, the changes improve the PageSpeed score from 84 to 99.

To be clear, I am not an expert in optimizing web performance, so maybe there are good reasons to not implement some of these.

Question from @amnesty-service

[paulHasselkuss]

I am responsible for the website at @amnesty-service and originally raised the issue. I'd like to add two more things.

In the waterfall diagram above, the hero image is already preloaded. This improvement is thanks to the Performance Lab plugin by the WP performance team, specifically the Image Prioritizer. Without this plugin, the performance is noticeably worse. For instance, check the results for wordpresstheme.amnesty.org. You can see that the hero image uploads/2022/11/286252-1444x710.jpg is loaded very late, which blocks the rendering of the page.

For amnesty-dialog.de, I have now added preloading of the hero image, fonts, and removed the infogram script because we don't need it. The result was an improvement on Google's PageSpeed from 80 to 99.

Here is the code, if you are interested:

function ais_companion_preload_assets(array $preload_resources): array
{
    if (is_plugin_active("wp-plugin-amnesty-branding/amnesty-branding.php")) {
        // AI brand fonts
        $plugin_dir_url = plugins_url(
            "",
            WP_PLUGIN_DIR . "/wp-plugin-amnesty-branding/amnesty-branding.php"
        );
        $path_to_font =
            $plugin_dir_url . "/assets/fonts/TradeGothicLTW05-Light.woff2";
        $path_to_font_bold =
            $plugin_dir_url . "/assets/fonts/TradeGothicLTW05-BdCnNo.20.woff2";

        $preload_resources[] = [
            "href" => $path_to_font,
            "as" => "font",
            "type" => "font/woff2",
        ];
        $preload_resources[] = [
            "href" => $path_to_font_bold,
            "as" => "font",
            "type" => "font/woff2",
        ];

        // Hero
        $hero_id = get_post_thumbnail_id(get_the_ID());
        if ($hero_id) {
            $preload_resources[] = [
                "href" => wp_get_attachment_image_url($hero_id, "hero-md"),
                "as" => "image",
            ];
        }
    }

    return $preload_resources;
}
add_filter("wp_preload_resources", "ais_companion_preload_assets");

function ais_companion_dequeue_script()
{
    wp_dequeue_script("infogram-embed");
}
add_action("wp_print_scripts", "ais_companion_dequeue_script", 100);