Separates Template für Responsive-Ansicht laden

Ich möchte ein Theme aufbauen, in dem verschiedene Elemente in der Mobile-Version nicht oder an anderer Position geladen werden als in der Desktop-Ansicht. Das Ausblenden mit display: none über die Media Queries ist hierfür keine Option, da die Elemente im Hintergrund dennoch geladen werden. Aus Performance-Gründen also keine Lösung.

Auch die Funktion wp_is_mobile() scheint nicht wirklich hilfreich zu sein, wie ich in mehreren Foren-Kommentaren gelesen habe, weil sie als unsicheres Browser Sniffing arbeitet. Außerdem wird sie wohl mit Caching-Plugins in Konflikt geraten.

Meine Frage also: kennt ihr eine vernünftige Methode, mit der die device-width idealerweise auf PHP- oder notfalls auf JavaScript-Ebene ausgelesen werden kann und in Abhängigkeit dazu dann ein Element oder eine Template-Datei geladen werden kann? In etwa also nach diesem Prinzip:

Code:

Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

Meine PHP-Kenntnisse sind nicht besonders, sorry also, falls der Code eine schlechte Syntax hat.

Für eine nützliche Lösung wäre ich sehr dankbar und bin sicher, dass auch andere daran interessiert wären.

Gruß, benraaa