QGIS and Chrome Browser showing different resolution for same WMTS?

By the looks of it you render the QGIS WMTS in a different projection than the original WMTS. This can be seen by the angle of intersection of the highways. In QGIS this seem to be a perfect 90 degree angle, in the browser it is not. The reprojecting is done locally in QGIS, not at the server side. Therefore the original image gets distorted resulting in the blurred/distorted view.

Try changing the projection in QGIS to the same as the original WMTS is in, that should resolve the problem.

The zoomscales in QGIS probably differ from the configured grid set in GeoServer. This causes resampling of the images in QGIS resulting in less sharp images and less performance.

See GeoServer documentation.

You can change the zoomscales in QGIS via:

• Settings
• Options
• Map Tools
• Predefined zoomscales

Different sets I use are: (Copy paste to XML, then import XML in QGIS config.)

Google maps:

<qgsScales version="1.0">
    <scale value="1:591657551"/>
    <scale value="1:295828775"/>
    <scale value="1:147914388"/>
    <scale value="1:73957194"/>
    <scale value="1:36978597"/>
    <scale value="1:18489298"/>
    <scale value="1:9244649"/>
    <scale value="1:4622325"/>
    <scale value="1:2311162"/>
    <scale value="1:1155581"/>
    <scale value="1:577791"/>
    <scale value="1:288895"/>
    <scale value="1:144448"/>
    <scale value="1:72224"/>
    <scale value="1:36112"/>
    <scale value="1:18056"/>
    <scale value="1:9028"/>
    <scale value="1:4514"/>
    <scale value="1:2257"/>
    <scale value="1:1128"/>
</qgsScales>

PDOK:

<qgsScales version="1.0">
    <scale value="1:12288000"/>
    <scale value="1:6144000"/>
    <scale value="1:3072000"/>
    <scale value="1:1536000"/>
    <scale value="1:768000"/>
    <scale value="1:384000"/>
    <scale value="1:192000"/>
    <scale value="1:96000"/>
    <scale value="1:48000"/>
    <scale value="1:24000"/>
    <scale value="1:12000"/>
    <scale value="1:6000"/>
    <scale value="1:3000"/>
    <scale value="1:1500"/>
    <scale value="1:750"/>
    <scale value="1:375"/>
    <scale value="1:188"/>
    <scale value="1:94"/>
</qgsScales>

ESRI:

<qgsScales version="1.0">
    <scale value="591657528"/>
    <scale value="295828764"/>
    <scale value="147914382"/>
    <scale value="73957191"/>
    <scale value="36978595"/>
    <scale value="18489298"/>
    <scale value="9244649"/>
    <scale value="4622324"/>
    <scale value="2311162"/>
    <scale value="1155581"/>
    <scale value="577791"/>
    <scale value="288895"/>
    <scale value="144448"/>
    <scale value="72224"/>
    <scale value="36112"/>
    <scale value="18056"/>
    <scale value="9028"/>
    <scale value="4514"/>
    <scale value="2257"/>
    <scale value="1128"/>
    <scale value="564"/>
    <scale value="282"/>
    <scale value="141"/>
    <scale value="71"/>
</qgsScales>

Try using the TileMapScaleLevels plugin, which accounts for the different sets of scales needed by the usual EPSG3857 projection (web mercator) and typical zoom levels: https://plugins.qgis.org/plugins/TileMapScaleLevels/

Besides, you can enable and disable as needed, without changing your usual QGIS scales.