DEV Community: Nima Jafari

Stop MIME Sniffing with nosniff; Why SEO Pros Should Care

Nima Jafari — Tue, 12 Aug 2025 19:07:27 +0000

In technical SEO, we often obsess over speed, structured data, indexability, and crawlability.

But there’s a lesser-known HTTP header that won’t directly boost rankings, yet can strengthen your site’s security posture and help you pass important security audits:

X-Content-Type-Options: nosniff

While "X-Content-Type-Options: nosniff" primary purpose is to stop browsers from MIME sniffing (guessing the type of a file when the Content-Type is missing or wrong), its presence can indirectly support SEO by improving security credibility, avoiding certain browser warnings, and helping your site score better in automated audits like Lighthouse and securityheaders.com.

What problem does it solve?

Browsers sometimes try to “sniff” the file type of a resource rather than trusting the server’s Content-Type header. This can:

Introduce security risks (e.g., running untrusted scripts).
Leads to blocked resources in modern browsers when the type doesn’t match.

By sending:

X-Content-Type-Options: nosniff

you tell the browser: “If the type is wrong, block it, don’t guess.”

How to check HTTP header

You can easily check HTTP headers using Google Chrome DevTools or using curl.

Google Chrome DevTools

Open your site in Chrome
Press F12/Option + ⌘ + I, or right-click → “Inspect”
Go to the Network tab
Refresh the page
Click any resource and check the Headers panel
Look for: X-Content-Type-Options: nosniff

Command line

curl -I https://example.com

✅ If it’s missing, time to add it.

How to Implement

Adding X-Content-Type-Options: nosniff is quick and requires only a server or application configuration change. Below are examples for common environments.

Apache

<IfModule mod_headers.c> Header set X-Content-Type-Options "nosniff" </IfModule>

Nginx

add_header X-Content-Type-Options nosniff;

PHP

header("X-Content-Type-Options: nosniff");

Node.js (Express)

app.use((req, res, next) => { res.setHeader('X-Content-Type-Options', 'nosniff'); next(); });

The Takeaway

X-Content-Type-Options: nosniff is a small, easy-to-implement header that plays a role in site security, trustworthiness, and audit readiness.

It won’t boost rankings, but it’s part of delivering the technical quality and professionalism that modern SEO clients expect.

Pro Tip: Pair nosniff with other headers like Strict-Transport-Security (HSTS) and Content-Security-Policy (CSP) for a well-rounded security setup. Security and SEO often overlap more than most people think.

The Changes tab in Google Chrome DevTools

Nima Jafari — Mon, 16 Sep 2024 11:26:26 +0000

Working as a web developer always involves checking various elements which can become overwhelming when you make many changes while inspecting website elements in a browser and then by a simple page reload, all of them disappear. Google Chrome has a related feature, the “Changes” tab available from Chrome 65 which can become helpful in this case. With this feature, you will be able to see the changes you have made even after reloading the page. In this article, you will read more about how to enable this feature in the Google Chrome browser.

What does the Changes tab in DevTools do?

The Changes tab in Google Chrome DevTools is a feature with which you will be able to track the changes that you make across the page loads. By using the Changes tab, you can see the changes that you made in the:

HTML in Sources with enabled Local Overrides
CSS in Elements, Styles column, or Sources
JavaScript in Sources

What is Local Overrides and how to enable it?

The Local Overrides feature in Google Chrome lets you keep the changes that you make across page loads. Therefore, there is no need to make changes every time after each page reloads. By enabling this option in DevTools, you make a local directory on your end where all the changes are saved. While DevTools is open, each time you reload a page, the browser uses the local file that has been already saved on your device instead of network resources to show you the changes made by you. To enable Local Overrides in the Google Chrome DevTools, you can follow the steps below:

Open the DevTools > Sources tab
- Windows or Linux: F12 OR Ctrl + Shift + I
- Mac: Fn + F12 OR Cmd + Option + I
Select Overrides from the left column.
Click on Select folders for overrides and choose a directory on your end to save files.
Click on the Allow in the message on the top of the page which shows the need to read and write access to your directory. It is now ready to make your changes in DevTools and keep them even after reloading a page.

How to enable the Changes tab in DevTools?

To enable the Changes tab in Google Chrome DevTools, there are two ways.
Method 1:

Open the DevTools > Sources tab
- Windows or Linux: F12 OR Ctrl + Shift + I
- Mac: Fn + F12 OR Cmd + Option + I
Open the Command menu by pressing:
- Windows or Linux: Control+Shift+P
- Mac: Command+Shift+P
Type changes to find the Changes option, then press enter to enable it

Method 2:

Open the DevTools > Sources tab
- Windows or Linux: F12 OR Ctrl + Shift + I
- Mac: Fn + F12 OR Cmd + Option + I
Click on the 3-dots icon on the right side > More tools > Changes

How to view changes in the Changes tab in DevTools?

To observe the changes that you make on the page through DevTools:

Open Chrome DevTools
Make a change (changes) in:
- HTML in the Sources tab
- CSS in the Elements tab, Styles column, or in Sources tab
- JavaScript Sources tab
Open the Changes tab (you have earlier enabled it)

Now you can view the changes that have been made that are highlighted in red and green.

How to copy CSS changes in the Changes tab in DevTools?

To copy the CSS changes that you have made in the Elements > Styles column:

Open the Changes tab in DevTools
From the bottom of the tab, click on the Copy icon to copy CSS.

How to revert file changes from the Changes tab?

If you decide to revert changes that you have made whether in HTML, CSS, or JS, you can easily do it through the Changes tab. To do so, head over to the Changes tab in DevTools, then from the bottom of the tab, you will see a revert icon. By one time clicking on the icon, all changes will be reverted at once.

Remote debugging using Safari on iOS devices with macOS

Nima Jafari — Mon, 04 Mar 2024 06:47:40 +0000

Apple's integration between macOS and iOS provides a native and efficient pathway for developers to debug web content directly on an iOS device from a macOS computer. This guide will cover the essential steps and tools required to set up a remote debugging session between Safari on an iOS device and a macOS computer.

Before to start remote debugging:

Enable Develop on your Mac Safari through Safari Settings > Advanced Settings.
On your iOS device, head over to the Settings > Safari.
Find the Advanced section, then enable Web Inspector there.

You can now start remote debugging:

Connect your iOS device to your Mac using a cable.
On the Safari browser on your iOS device, open the desired URL that you are going to debug.
On your macOS system, from the Develop menu on Safari, find your iOS device name and click on the page that you have already opened on your phone or tablet.

In the opened Web Inspector, you are able to debug the web page.

Conclusion

In this article, the remote debugging steps with an iOS device on a macOS system using the Safari browser on both sides was explained.
It is a practical web page investigation method which provides your the possibility to find mobile issues including mobile-friendliness and user experience with an iPhone or iPad view.

ℹ️ You may also want to read:
🔗Remote debugging using Google Chrome on Android devices with Windows
🔗Remote debugging using Firefox on Android devices with Windows
🔗Remote debugging using Google Chrome on iOS devices with macOS

📝Resource: https://www.oxyplug.com/optimization/ultimate-guide-to-remote-debugging-webpages/

Remote debugging using Google Chrome on iOS devices with macOS

Nima Jafari — Mon, 04 Mar 2024 06:47:32 +0000

This guide focuses on the specifics of remote debugging using Google Chrome on iOS devices with macOS. Throughout this guide, we will explore the setup process, including the necessary tools and configurations required to establish a remote debugging session between your iOS device and macOS system using Google Chrome browser.
First you need to make sure about:

iOS version: 16.4 or greater
Chrome version on your iOS phone or tablet: 115 or greater

Before you start remote debugging, on your macOS system:

Head over to the Safari application settings > Advanced settings.
Enable Develop on Safari browser.

On your iOS device:

Open Google Chrome.
Go to the Settings section in the application.
Enable Web Inspector in Content Settings.
Relaunch the app to save the changes.

Now, start remote debugging:

Connect your device with a cable to your Mac.
On iOS device Google Chrome, open a URL that you want to debug.
Look for the Develop menu on Safari on your Mac.
From the Develop menu, click on your iOS device name, then select the page which has been already opened on your iOS phone or tablet.
The opened Web Inspector helps you debug the web page.

💡In the Web Inspector, the mobile frame view, which is visible on Google Chrome mobile simulator, is not shown.

Conclusion

Whether you're troubleshooting a specific issue or aiming to optimize your site's mobile responsiveness and performance, mastering remote debugging with Google Chrome on iOS devices using macOS will equip you with the skills to ensure your web applications deliver a seamless user experience across iOS devices.

ℹ️ You may also be interested to read:
🔗Remote debugging using Google Chrome on Android devices with Windows
🔗Remote debugging using Firefox on Android devices with Windows
🔗Remote debugging using Safari on iOS devices with macOS

📝 Resource: https://www.oxyplug.com/optimization/ultimate-guide-to-remote-debugging-webpages/

Remote debugging using Firefox on Android devices with Windows

Nima Jafari — Mon, 04 Mar 2024 06:47:24 +0000

It is possible to do remote debugging using the Firefox browser on Android devices like Google Chrome. Throughout this guide, we will explore the setup and configuration necessary to initiate a remote debugging session between Firefox on an Android device and Windows.

To do so, you need an Android device and a Windows system. Before to start remote debugging, you need to enable Developer Options then Remote debugging on your Android device:

1- Go to the Settings > About phone.
2- Find your phone’s Build Number. Its location may be different based on the Android device model and brand.
3- Tap 7 times on the Build Number until the message “You are now a developer!” appears.

4- In Developer Options on your Android phone or tablet, turn on Enable USB Debugging.

After enabling Developer Options and then Remote debugging on your Android device, follow the steps below to start debugging:

1- On the debugging system (PC or laptop), open about:debugging on Firefox.
2- Activate USB debugging by pressing Enable USB Devices on Firefox.

3- Connect your Android device with a USB cable to the laptop or PC.
4- On the Firefox app on your Android device, open the desired page URL that you are going to investigate.
5- On the other side, click on the Android device name on the computer to establish the connection between computer and Android phone or tablet.
6- In the Tab list on Windows Firefox, find the page that you have recently opened on your Android phone or tablet and click on the Inspect button to start debugging.

7- In the opened Developer Tools window, you can now inspect the page from a mobile device aspect.

ℹ️ You may also be interested to read about:
🔗Remote debugging using Google Chrome on Android devices with Windows
🔗Remote debugging using Google Chrome on iOS devices with macOS
🔗Remote debugging using Safari on iOS devices with macOS

📝Resource: https://www.oxyplug.com/optimization/ultimate-guide-to-remote-debugging-webpages/

Remote debugging using Google Chrome on Android devices with Windows

Nima Jafari — Mon, 04 Mar 2024 06:47:08 +0000

Remote debugging is a method with which you can debug your website pages using a real mobile device on a debugging machine (PC or laptop), therefore you will be able to find mobile UI, UX, and technical issues. In the following, the remote debugging steps using Google Chrome browser and Android devices on Windows. Before you start, you need:

An Android device
A USB cable
A PC or laptop as a debugging machine

How to do remote debugging using Android devices and Google Chrome on Windows?

Before starting remote debugging on an Android device, first you need to enable Developer Options, then remote debugging feature on your Android device. To enable Developer Options on your phone or tablet:

Head over to the Settings > About phone.
Find your phone’s Build Number. It can be in a different location based on your Android device model and brand.
Tap 7 times on the Build Number until you see the message “You are now a developer!”.

Start remote debugging on your Android device using Google Chrome and debugging machine with Windows:

1- On your Android device, in Developer Options, Enable USB Debugging.

2- On your debugging device (laptop or PC), open chrome://inspect#devices on Google Chrome.
3- Enable Discover USB devices.

4- Connect your Android device to the PC or laptop with a USB cable. If it is the first time connection, you need to accept the prompt message that appears on your Android device to establish the connection between two devices successfully.

5- Open Chrome browser on the Android device and open the URL that you are going to debug.
6- You can also enter a URL in the Open tab with url box on the Chrome (chrome://inspect#devices) on your laptop or PC.
7- Click the Inspect on your debugging machine to start debugging.

In the opened DevTools, you can now inspect pages from a mobile device view.

💡In remote debugging, the version of Google Chrome on your Android device is important because the remote debugging is done based on its version. So, if you are using an old version of Chrome on your phone or tablet, you may see a different DevTools while debugging. It is highly recommended to use the latest version of Chrome browser on your Android device.

ℹ️ You may also be interested to read:
🔗Remote debugging using Firefox on Android devices with Windows
🔗Remote debugging using Google Chrome on iOS devices with macOS
🔗Remote debugging using Safari on iOS devices with macOS

📝Resource: https://www.oxyplug.com/optimization/ultimate-guide-to-remote-debugging-webpages/

How can the contrast ratio have an impact on SEO?

Nima Jafari — Mon, 29 Jan 2024 08:20:36 +0000

Accessibility is one of the important metrics that is measured strictly by almost all web page auditing tools such as Google Lighthouse. The accessibility report contains information like font size, font weight, contrast ratio, and everything else that can impact the readability of a text.

Contrast ratio is one of those accessibility metrics that focuses on the visibility of the text from the color contrast aspect. A web page elements’ colors should be visible enough to be seen and read for all the people with vision problems. In this article, the contrast ratio context is going to be discussed, and you will read about contrast ratio measurement methods.

What is the contrast ratio and how is it calculated?

The “contrast ratio” is a metric that shows an element's color contrast with its background. The higher contrast ratio an element has, the more visible it becomes. As a deeper definition, the color contrast ratio is the ratio of the element’s color based on the background or foreground luminance. For instance, the white color has a luminance of 100% and the black color luminance is 0%.

contrast ratio = (L1 + 0.05) / (L2 + 0.05)
# L1 = Luminance 1 = Light color relative luminance level 
# L2 = Luminance 2 = dark color relative luminance level

💡The contrast ratio can be a number between 1 to 21 that is shown as 1:1 or 1:21 (or 21:1 based on the background and foreground dark or light color).

Why is the contrast ratio important?

According to the statistics, 1 man in a 20-male population and 1 woman in a 200-female population are suffering from color blindness and vision problems. So, it is really important to provide suitable visibility and readability on web pages from a design perspective. As a result, contrast ratio as a critical accessibility metric should be of high priority in the web page UI/UX designing process. Google recommends following Web Content Accessibility Guidelines (WCAG) accessibility and contrast ratio standards.

AA/AAA contrast ratio standard

Concerning the WCAG standard, the minimum passing contrast ratio is 4.5 as AA, and the best contrast ratio is 7 which is considered as AAA in the AA/AAA standard.

💡The minimum contrast ratio should be at least 4.5:1 for individuals aged 80 or above, and people with color recognition problems. This contrast ratio for people with color blindness is at least 7.

Text type	AA	AAA
Text < 24px	4.5	7
Text > 24px	3	4.5
UI (icons, graphs, etc.)	3	N/A

Contrast ratio measurement in Google Chrome based on AA/AAA standard

Contrast ratio can be measured based on AA/AAA standard by using Google Chrome browser. To do so, you can follow the steps below:

Open the Chrome DevTools using Control+Shift+C or F12 on Windows, Linux, and Chrome OS, or Command+Option+C on macOS.
On the Elements tab, from the style section, select a color to open the color picker.

If the browser can recognize the background, you will see the selected color contrast ratio in the color picker box. If the contrast ratio is less than 4.5, which means failed, is shown with🚫sign, between 4.5 to 6.99 is considered as AA shown with one ✔, and 7=< is AAA and shown with ✔✔.

💡The two easiest ways for measuring contrast ratio based on the AA/AAA standard are using the Google Chrome DevTools color picker that is explained above, and Accessibility Insights for Web Chrome extension, or the contrast ratio checker tool created by Alvaro Montoro.

APCA contrast ratio standard

APCA stands for Accessible Perceptual Contrast Algorithm, which is another contrast ratio standard that considers font size, font weight, and text role on a page while calculating contrast ratio. The APCA standard is more accurate than AA/AAA. You can learn the details of APCA contrast ratio standard in the table below:

Text type	100	200	300	400	500	600	700	800	900
Font Size
10px	⊘	⊘	⊘	©§™	©§™	©§™	©§™	⊘	⊘
11px	⊘	⊘	⊘	©§™	©§™	©§™	©§™	⊘	⊘
12px	⊘	⊘	©§™	©§™	x100	x90	x80	⊘	⊘
14px	⊘	⊘	©§™	100	90	80	60	x60	⊘
16px	⊘	⊘	100	90	80	60	55	x50	x50
18px	⊘	⊘	90	80	60	55	50	x40	x40
24px	⊘	100	80	60	55	50	40	38	x35
30px	⊘	90	70	55	50	40	38	35	30
36px	⊘	80	60	50	40	38	35	30	25
48px	100	70	55	40	38	35	30	25	>20
60px	90	60	50	38	35	30	25	>20	>20
72px	80	55	40	35	30	25	>20	>20	>20
96px	70	50	35	30	25	>20	>20	>20	>20
120px	60	40	30	25	>20	>20	>20	>20	>20

⊘: Text with those font-size and font-weight should not be on a page except decorative texts.

©§™: There can only be texts with non-content usages like copyright. Otherwise, there should not be any texts with those font size and font weight.

x: x-number like x100 indicates that font size or font-weight is not suitable to be used in the body of content on a page. It is recommended to use them for larger text elements such as headlines, titles, or large elements.

<20: It is recommended not to use the text with the mentioned font weight and font size.

Contrast ratio measurement in Google Chrome based on APCA standard

To measure contrast ratio based on the APCA standard, you need to first enable this option. You can enable this standard by following the steps provided here:

Open the Chrome DevTools using Control+Shift+C or F12 on Windows, Linux, and Chrome OS, or Command+Option+C on macOS.
Click on the settings icon ⚙️ on the top right side of the DevTools.
From the left side, select the Experiments tab.
Select Enable new Advanced Perceptual Contrast Algorithm (APCA).
Reload DevTools for new changes to be applied.

After enabling the APCA in Chrome DevTools, head over to the Elements tab and select a color from the style section. If the background of the element was known by the browser, then in the opened color picker, you will see the contrast ratio, which is a number in percent, based on the APCA standard.

Contrast ratio measuring tools

There are different ways for measuring contrast ratio based on the AA/AAA standard or even APCA standard. Here are our suggestions as the contrast ratio measurement tools:

Google Chrome DevTools color picker (with APCA support)
Accessibility Insights for Web Chrome extension
contrast ratio checker tool created by Alvaro Montoro.
A11y – Color Contrast Checker Figma plugin
Contrast Figma plugin (with APCA beta support)

Checking the contrast ratio of a page with CSS Overview in Google Chrome

CSS Overview is another feature with which the contrast ratio of a whole page will be measured. This feature is available on Google Chrome and can be enabled using the instructions below:

Open the Chrome DevTools using Control+Shift+C or F12 on Windows, Linux, and Chrome OS, or Command+Option+C on macOS.
In DevTools, open the command palette by pressing Control+Shift+P on Windows, Linux, and Chrome OS, or Command+Shift+P on macOS.
In the command palette, search “CSS”, then select Show CSS Overview.

In the CSS Overview tab, press the Capture overview button to see the page’s contrast ratios. Whether you use AA/AAA or APCA contrast ratio standards, here are both reports:

Automatic contrast ratio report in Google Chrome DevTools

Another way to investigate the contrast ratio issues on a page is to use Google Chrome DevTools automatic contrast ratio report. To enable this automatic report in the DevTools:

Open the Chrome DevTools using Control+Shift+C or F12 on Windows, Linux, and Chrome OS, or Command+Option+C on macOS.
From the top right side, click on the ⚙️ icon.
Select Experiments from the left side.
Look for Enable automatic contrast ratio reporting and enable it.
Reload DevTools.

By enabling this feature, if a page has contrast ratio issues, the number of the issues will appear on the top right side of the DevTools, then by clicking on it, the list of issues will be available.

Checking the contrast ratio of a page with Google Lighthouse

Google Lighthouse is a free page auditing tool with which a page is audited from performance, accessibility, SEO, and PWA perspectives, and it will suggest some best practices to improve the page status. Contrast ratio issues are listed In the accessibility report of the Lighthouse as shown in the image below:
To use the Lighthouse auditing tool, here are some methods you can try:

PageSpeed Insights
Lighthouse in Google Chrome DevTools
Lighthouse CLI
Lighthouse Chrome extension
GTmetrix
WebPageTest

How to emulate color blindness in Google Chrome?

Color blindness is a health issue that about 5% of people around the world are suffering from. Some people have some color recognition problems like red, green, or blue, and others are not able to recognize any colors. Google Chrome has the color blindness emulation feature which helps websites find a better view about a specific vision issue. Therefore they can provide a better user experience. You can enable the Emulate vision deficiencies following the steps below:

Open the Chrome DevTools.
Open the command palette window by using Control+Shift+P on Windows, Linux, and Chrome OS, or Command+Shift+P on macOS
Search rendering and add Show rendering to the DevTools.
From the opened list, find Emulate vision deficiencies, and select the suitable option from the dropdown.

Sum up

UI/UX designing is an important step in creating a website. During this process, every aspect of website accessibility from appearance aspect must be considered to provide the best view experience for all types of users. Contrast ratio is a critical part of the website accessibility and can be easily measured and respected using online tools and browsers like Google Chrome capabilities.

How resource hints can help to improve website performance?

Nima Jafari — Mon, 15 Jan 2024 12:32:21 +0000

Website performance improvement is one of the main concerns for webmasters. There are numerous methods and tips with which a website performance can be improved. Resource hints are one of those technical solutions that can perform a significant role in case of web page performance optimization.

Resource hints introduction

Resource hints are used to notify the browsers how to behave with a page’s resources, so the page’s loading time will be decreased and the users will experience a better and faster web page visit experience. Resource hints are mostly used with the <link> rel attribute, but there are some other types of resource hints that are used differently.

Resource hints can be used in the HTML as <link> in the <head>, <script>, or they can be set as HTTP header.

As shown above, it is more common to use resource hints in the HTML in preference to the HTTP header, because it is much easier to add or modify them in the HTML.

What are the types of resource hints?

preconnect, preload, prefetch, and dns-prefetch are four resource hint types that are used with the <link> rel attribute.
There are also Fetch Priority API and speculation rules API which are considered resource hints as well.

1. preconnect

The preconnect resource hint is used to connect to crossorigin servers before the crossorigin resources are requested shortly. It is recommended to use the preconnect resource hint for the critical resources when there are many external resources to be loaded.

As an example, if you use Google fonts on your website, it is better to preconnect the fonts and add crossorigin attribute to the <link>, because it tells the browser that the preconnected resources are fetched through Cross-Origin Resource Sharing (CORS) mechanism, so the browser will use the same opened connection to access the fonts, otherwise, a new connection will be opened.

<link rel="preconnect" href="https://example.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

💡To preconnect the Google fonts, you need to preconnect to the https://fonts.googleapis.com where the @font-face is served, and to the https://fonts.gstatic.com where the font files are served.

2. dns-prefetch

The dns-prefetch is another resource hint which is used for crossorigin resources and is less costly than preconnect. This resource hint only does the DNS lookup on crossorigin servers. When there are many connections to crossorigin resources to be established, it is recommended not to overuse preconnect feature, but to use dns-prefetch resource hint instead.

💡Some old browsers may not support preconnect, you need to add dns-prefetch in an extra after preconnect resource hint as a fallback.

💡The dns-prefetch must be loacated AFTER the <link rel="preconnect">.

<link rel="dns-prefetch" href="https://example.com">
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

3. preload

The preload resource hint is used to download the critical resources that are needed for the initial page loading like the font files and the LCP element like featured image or image background in the CSS. By using preload, the browser downloads the resources before the parser arrives at their line in DOM. The preload can be used for both the website’s and crossorigin resources.

<link rel="preload" href="/lcp-image.jpg" as="image">
<link rel="preload" href="/critical.css" as="style">

If you want to use this resource hint for the external CORS resources, you need to use the crossorigin attribute to avoid downloading resources twice which causes more bandwidth usage. There is the opposite story for the non-CORS resources as well. You should NOT use crossorigin for those non-CORS resources to avoid downloading files for the second time.

<link rel="preload" href="/font.woff2" as="font" type="font/woff2 crossorigin>

As shown above, the “as” attribute should be used for crossorigin resources which is another important attribute that prevents the browsers from downloading resources more than one time.

In the same example, the as="font" type="font/woff2 tells the browser to download this resource as a font, so the browser will consider the resource type while prioritizing the resource downloading queue.

💡Fonts are considered as CORS resources, so it is mandatory to use the crossorigin attribute for fonts, even if they are self-hosted.

💡Avoid excessive use of preload resource hint as it downloads the resources with a high priority and overusing it can cause higher bandwidth usage and has negative effects on some Core Web Vitals (CWV) metrics’ scores and every rendering process-related parameter.

Oxyplug Preload WordPress plugin can help WordPress websites in preloading featured images without any need to make changes to the websites’ codes.

4. prefetch

The prefetch is another practical resource hint with which the browser can request the next-navigation resources with low priority. This resource hint can help to reduce loading time for next pages and is helpful in many cases. For example, if there is a specific user behavior pattern on your website, you can decide which resources be prefetched to boost loading speed, but in general, this feature can be costly too due to fetching resources that may not be utilized in the near future.

<link rel="prefetch" href="/next-page.html">
<link rel="prefetch" href="/next-page.css" as="style">

💡It is possible to inject <link rel=”prefetch”> in a page dynamically.

💡Google recommends using the speculation rules API for prefetching instead of <link rel=”prefetch”>.

💡The rel=”prefetch” caches the resources in the HTML cache, while by using speculation rules API, the resources will be processed and kept in the memory and are available when they are requested.

Oxy Prefetch and Prerender is a light WordPress plugin with which prerendering and prefetching pages can be easily done without making changes to the website’s codes manually.

5. Fetch Priority API

The Fetch Priority API is another resource hint with which the priority of the resources on a page can be increased, so they can be loaded sooner. In modern browsers, page loading is done in two phases, first, the resources that are critical resources for initial page loading are loaded, and in the second phase, the rest of resources with a lower priority are fetched. By changing the priority of resources using fetchpriority=”high”, the resources with the high value will be fetched sooner during the mentioned first phase.

One of the effective usages of Fetch Priority API is for LCP images. By using fetchpriority=”high”, the LCP image can be fetched with a high priority and it can directly impact the LCP score.

<div class="gallery">
  <div class="lcp">
    <img src="img/lcp-element.jpg" fetchpriority="high">
  </div>
  <div class="thumbnails">
    <img src="img/thumbnail-2.jpg" fetchpriority="low">
    <img src="img/thumbnail-3.jpg" fetchpriority="low">
    <img src="img/thumbnail-4.jpg" fetchpriority="low">
  </div>
</div>

💡The fetchpriority attribute can be used in <link>, <img>, and <script> elements.

💡Before, the images on a page were loaded with a low priority, but after the Chrome 117 update, the first five images that are in the viewport, have the medium priority and the first two images are loaded immediately after the initial page loading. By changing the fetchpriority of the important images to high, they can be loaded sooner.

6. Speculation rules API

The speculation rules API is a method that is used to prefetch or prerender next-navigations. Earlier prerendering was done using rel=”prerender” attribute, but after getting deprecated, the prerendering process is done through speculation rules API.

💡The <link rel=”prefetch”> is only supported on the Chromium-based browsers. For other browsers, you need to use speculation rules API to prefetch resources.

<script type="speculationrules">
{
  "prefetch": [
    {
      "source": "list",
      "urls": ["next.html", "next2.html"]
    }
  ]
}
</script>

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["next.html", "next2.html"]
    }
  ]
}
</script>

Which browsers do support resource hints?

The resource hints are almost supported in almost all modern browsers. You can find general information about resource hints browser support in the table below:

Resource hint	Chrome	Edge	FireFox	Opera	Safari
preconnect	✔️	✔️	✔️	✔️	✔️
dns-prefetch	✔️	✔️	⚠️	✔️	✔️
preload	✔️	✔️	✔️	✔️	✔️
prefetch	✔️	✔️	✔️	✔️	❌
Fetch Priority API	✔️	✔️	❌	✔️	✔️
Speculation rules API	✔️	✔️	❌	✔️	❌

⚠️FireFox only supports dns-prefetch on HTTP origins, but it does not support dns-prefetch on HTTPS origins.

ℹ️ The table above was prepared based on the information provided here: https://caniuse.com/?search=resource%20hints

Conclusion

To sum up, by using resource hints, the page loading speed can be improved significantly, and it can result in better page performance and user experience. However, the way the resource hints are used is important as well, because overusing them can cause high bandwidth consumption and may have a negative impact on the loading speed.