Etwas reaktionsschneller 1C-Bitrix-Website, analog zu Bootstrap-Sichtbarkeitsklassen

Wie wir alle wissen, wird Google ab dem 21. April 2015 Websites pessimisieren, die für die Anzeige auf Mobilgeräten beim Ranking nicht geeignet sind. CSS-Frameworks wie Bootstrap, CMS-Einstellungen, insbesondere 1C-BUS der neuesten Versionen, helfen bei der Bekämpfung vieler Probleme. Sie alle lösen jedoch kein anderes, sehr wichtiges Problem: Es reicht nicht aus, nur unnötigen Inhalt auf bestimmten Geräten zu verbergen. Sie müssen verhindern, dass er geladen wird.

In diesem Artikel werde ich über die Erweiterung sprechen, die ich für die 1C-Bitrix-Site-Verwaltung geschrieben habe und die das oben angekündigte Problem löst.

Google selbst bevorzugt reaktionsfähige Websites. Eine Website ist inhaltlich besser als zwei identische, jedoch in der Form unterschiedlich. Für Studios und ihre Kunden sind adaptive Websites auch aus wirtschaftlicher Sicht attraktiv. Eine adaptive Website ist günstiger in der Entwicklung und im Support als eine Online- und Mobilversion.

Wir haben also eine Site auf 1C-Bitrix, ein integriertes Layout auf Bootstrap3 und den Wunsch, unseren mobilen Benutzern zu helfen.

Zuvor verwendeten Layout- und Content-Manager die wunderbaren Sichtbarkeitsklassen ".hidden-lg, .hidden-md, .hidden-sm und .hidden-xs", um ein mehr oder weniger anständiges Erscheinungsbild der adaptiven Version der Website zu erzielen. Dies reicht aus, um unnötige Blöcke bei verschiedenen Bildschirmauflösungen der Benutzer auszublenden.

"Aber was ist mit den Ressourcen?" Bilder und Videos wurden sowohl hochgeladen als auch auf die Geräte der Benutzer hochgeladen. Manchmal sind es Megabytes an unnötigem Datenverkehr, und wenn wir über mobile Benutzer sprechen, dann über teuren und langsamen Datenverkehr. Hier können Sie natürlich ablehnen - "es gibt ein Tag und checkt js ein!", Aber wir verstehen, dass derselbe Content Manager das Problem mit diesen Tools nicht lösen kann.

Als ich darüber nachdachte, kam ich zu dem Schluss, dass Sichtbarkeitsklassen natürlich eine gute Sache sind, aber ein wirksameres Instrumentarium muss geschaffen werden. Das Tool sollte es Ihnen ermöglichen, den Download von Inhalten auf dem Gerät des Benutzers abzubrechen. Mit anderen Worten, der Server selbst sollte keinen bestimmten Code angeben, damit er nicht vom Benutzer heruntergeladen wird. Gleichzeitig sollte das Tool so einfach wie möglich und so einfach wie Sichtbarkeitsklassen sein.

Zunächst suchte ich nach Lösungen, mit denen ich feststellen konnte, ob der mobile Benutzer noch unterwegs ist, und nicht beim Rendern der Seite. Diese Lösung stellte sich als PHP-Bibliothek Mobile Detect heraus (Link im Keller). Mit dieser PHP-Bibliothek können Sie den Benutzer eines Smartphones / Tablets / Desktops ermitteln und zahlreiche Hintergrundinformationen zum Gerät des Benutzers bereitstellen, der die Site besucht hat. Aus der ganzen Vielfalt der Bibliothek wählte ich nur eine Methode, sie beantwortete die Frage: "Ist es ein mobiler Benutzer oder nicht?". Natürlich war es möglich, auch die Tablets zu isolieren, aber ich habe sie mit Smartphones auf einen Haufen geschaufelt.

Der Anfang ist gemacht, wir können mobile Benutzer von Desktop-Benutzern trennen, dann müssen wir das Tool selbst machen.
Hier hilft die 1C-Bitrix-API, insbesondere das Ereignis OnEndBufferContent (Link in der Fußzeile). Die Methode wird aufgerufen, wenn gepufferte Inhalte angezeigt werden, und ermöglicht deren Manipulation.

Nach und nach fangen wir das Ereignis OnEndBufferContent ab, verbinden die Mobile Detect-Bibliothek und stellen fest, ob der Benutzer vor uns mobil ist. Als nächstes werfen wir abhängig von der Antwort unnötige Blöcke aus dem Inhalt und übertragen den Rest zur Ausgabe an den Benutzer.

Für Inhaltsmanager habe ich die einfachste Option für das Seitenlayout gewählt. Inhalt eingewickelt in, wird nur auf Desktops angezeigt, und - nur auf mobilen Geräten. Klar, einfach und effektiv. Wenn unerwünschte Blöcke abgefangen werden, werden natürlich auch Markup-Tags aus dem Code herausgeschnittenDadurch können Sie die Semantik des Layouts nicht beeinträchtigen.

Dies hätte abgeschlossen sein können, aber das Studio hat eine Menge Projekte, es ist unpraktisch, den Code hin und her zu kopieren + Sie müssen ihn irgendwie aktualisieren. Daher habe ich meine Betriebszeit in ein Modul und dann in eine separate Erweiterung für Marketplace eingepackt. Im Zuge der Arbeiten an der Erweiterung wurden im Verwaltungsbereich angezeigte Anweisungen zur Verwendung sowie eine API-Methode zur Beantwortung der gleichen Frage "Mobil?" Die neueste Innovation ermöglicht es Ihnen, das Modul beim Schreiben Ihrer Komponenten und Vorlagen für diese zu verwenden. Hier ist die Vorstellungskraft unbegrenzt, Komponentenvorlagen können transformiert und an den Benutzer angepasst werden, und vor allem ist das Ganze mit dem integrierten Bitrix-Cache sehr benutzerfreundlich.

Als Ergebnis gelang es mir, ein schnelles und einfaches Analog der Sichtbarkeitsklassen für 1C-Bitrix UT zu erstellen. Mit der Lösung können Sie nicht nur Inhalte für verschiedene Benutzertypen ausblenden und anzeigen, sondern auch den Datenverkehr erheblich reduzieren, die Ladezeit für Seiten reduzieren, den Prozessor mobiler Geräte entladen, ohne Schieberegler preiszugeben, die auf js Mobiltelefonen schwierig und unnötig sind, sowie andere Vorteile von Desktop-Versionen der Site.

Ein paar Screenshots von dem, was passiert ist:





Materialien, aus denen die Lösung erstellt wurde



Jetzt auch beliebt: