The impact of stickers on page speed and optimization for different formats
- Even though stickers may appear to be merely decorative, they are something that the page needs to handle.
- Why do mobile devices slow down first in posts with many stickers?
- The safest default settings are for small WebP and AVIF files.
- You can choose the format based on the appearance of the sticker.
- If the character is not moving, then…
- If movement is required,
- The misunderstanding that the problem can be solved simply by changing the format.
- What stickers should I choose?
- Using DecoBlocks to organize stickers and reading flow.
- Frequently Asked Questions.
- WordPress-related plugins
When I open a post on my mobile phone, the characters appear one by one, slowly. Even though I can see the post, if the stickers are missing and only empty boxes remain, the entire page feels frustrating.
In WordPress, emojis and character stickers can change the atmosphere, but they are also characters, images, and scripts that the browser must process. Even the same sticker can result in different loading times depending on the format used.
Even though stickers may appear to be merely decorative, they are something that the page needs to handle.
Standard emojis appear as characters. However, the default emoji functionality in WordPress uses a loader that adds emoji-specific styles and verifies that the browser can display them correctly.
When character stickers are added as images, the process also includes downloading files. PNG, WebP, AVIF, and GIF files have different file sizes, and images from external servers send requests outside the site.
Ultimately, the issue with the sticker’s speed is not a matter of its cuteness.
The issue is about what, how much, and where the browser is retrieving data from.
Why do mobile devices slow down first in posts with many stickers?
When a mobile phone displays a post with many stickers, the images may appear later than the text. Speed measurement tools sometimes indicate that image requests or scripts related to emojis are causing the issue.
The WordPress Trac system recorded an issue where an emoji script, not required by modern browsers, was being loaded, adding approximately 4.7 KB of JavaScript to each page. This issue was noted to have occurred because the method of verifying browser features was modified in WordPress 6.2.
This is because many users experience these inconveniences, and the emoji detection script, style, and plugins that remove external emoji processing are operated separately.
However, using a few emojis does not automatically mean that a feature should be removed.
The safest default settings are for small WebP and AVIF files.
The answer is as follows:
Instead of removing all stickers, it is safer to provide small, static stickers in WebP or AVIF formats, and to use animated GIFs and stickers that rely on external servers only when absolutely necessary.
The Chrome Lighthouse documentation states that, assuming the same quality, WebP and AVIF formats can create smaller files than JPEG and PNG. The WordPress 6.5 developer documentation also indicates that AVIF can be up to 50% smaller than JPEG at the same image quality.
However, simply changing the file format is not enough.
To reduce the actual data transmission, it is necessary to select the appropriate display size, in addition to using WordPress’s responsive images, deferred loading, and priority setting features.
You can choose the format based on the appearance of the sticker.
If the character is not moving, then…
Small static characters embedded within the main text often default to WebP format. Even when a transparent background is required, WebP supports transparency and offers both lossy and lossless compression.
If it is possible to verify the browser environment of the server and the visitor, AVIF can be transmitted first. In this case, alternative formats such as WebP or PNG should also be provided.
If it is a small and subtle sticker, the choice is straightforward.
If movement is required,
For decorative GIFs that do not require movement, it is better to convert them to static WebP or AVIF formats. If movement is absolutely necessary, consider reducing the frame rate and display size, and prioritize lazy loading that places the animation outside the initial viewport.
According to the WordPress block editor documentation, animated GIFs and WebP files, while maintaining all frames, can take longer to encode and result in larger files compared to static images when being re-encoded to a smaller size. Even when reducing the size, long animations can result in files that are close to the original size.
If movement is not absolutely necessary, it is generally faster to stop.
The misunderstanding that the problem can be solved simply by changing the format.
AVIF is not always the fastest. Lighthouse notes that browser support for AVIF may be more limited than for WebP, and therefore, alternative formats such as PNG or JPEG may be necessary for browsers that do not support AVIF.
Another issue with warships is that while the files may be updated, visitors may still receive the older versions. Images directly printed or images outside of the theme may not automatically convert to the latest format.
It is not sufficient to simply check in the management interface whether an AVIF file has been created.
It is necessary to verify which files are downloaded from the actual page’s HTML and network requests.
The most difficult part when trying to resolve this directly is right here. While it’s possible to change individual images, it’s difficult to locate and modify the hardcoded images associated with the theme, as well as external sticker requests and animation files, all at once.
WordPress 7.1 introduced a feature that allows the browser to handle the compression, resizing, and format conversion of JPEG, PNG, GIF, WebP, and AVIF images. However, it does not automatically organize all output methods for a website.
When evaluating a task, one should not only look at the speed score.
It is necessary to check both when the first screen appears on the mobile phone and the number of image requests.
What stickers should I choose?
- Small, static characters: WebP should be selected as the default format.
- AVIF support: It is provided along with alternative formats.
- Repeated Emojis: The system prioritizes checking for basic text emojis before examining images.
- Decorative GIF: Converts the image to a static image.
- Essential animation: Reduce the frame size and position it outside the initial screen view.
If you are running a regular blog that uses only a few emojis, do not automatically remove them. Instead, first check the page source and network tab to see if an emoji compatibility script is actually necessary.
If there are multiple GIFs moving in opposite directions, or if a large character is placed on the initial screen, then reducing the animation and shrinking the size should be prioritized over changing the format.
The key issue is not whether or not to leave a sticker.
It displays the smallest file for each scene that is necessary.
Using DecoBlocks to organize stickers and reading flow.
When organizing the flow of a post by distinguishing between scenes and descriptions where stickers are used, you can use DecoBlocks. The “Insert Character Sticker” function allows you to insert character stickers from the installed sticker pack into the post, and it supports both the block editor and the classic editor shortcodes.
Instructions or notices with stickers can be grouped and displayed using the Section Box (Solid) feature. If you want to create navigation paths based on H2 and H3 headings in a long document, you can use the Auto Table of Contents feature. However, these features are for enhancing the presentation and structure of the content, and they do not determine the format, size, or delayed loading of the sticker files.
Frequently Asked Questions.
Q. If you had to choose only one between WebP and AVIF, which one is better?
A. Small static stickers are easy to use with WebP as the default format. If AVIF is available, it is recommended to prioritize AVIF, but it is safer to also include WebP or PNG as alternative formats.
Q. Can the sticker issue be easily resolved using a tool? What kind of tool should be used?
A. You can use the image compression and conversion functions together with the browser’s developer tools. After the conversion, you should check the file format and size that are delivered to visitors in the actual HTML and network tabs.
Q. What should I check first on your website?
A. First, check the large image and animated GIF on the initial screen. Then, examine whether the smaller static stickers are converted to WebP or AVIF format, and whether an emoji compatibility script or external image requests are required.
Q. How are the sections of the long text containing stickers divided?
A. DecoBlocks’ Section Box (Solid) feature groups related content within a box, while the Insert Character Sticker function allows users to embed character stickers within text.
Based on the H2 and H3 headings, you can create an automatic table of contents, which helps organize the navigation paths within a long document. Checking the file format and display size should be done separately.
