Google Ranking nur noch für responsive Design?

hopsli

Hallo an Euch,
ich habe unsere Website gerade auf responsive umgestrickt, und nun meldet mir google unter https://www.google.com/webmasters/tools ... -friendly/
, dass die Website 'großartig für Mobilgeräte optimiert sei *freu*.

Jetzt aber kam beim Prüfen der selben Seite für mobil über https://developers.google.com/speed/pagespeed/insights/ folgende Meldung:
95 /100 Nutzererfahrung (das wird in grün angezeigt) mit zwei Warnungen (Behebung empfohlen) und
57 / 100 Schneller gemacht (in rot angezeigt) mit einer erforderlichen Behebung: "JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen"

und dann auch noch eine Behebung empfohlen (Reduktion der css- und js-Dateien, Komprimieren der Bilder)

Nun meine Frage:
Wenn Google das Ranking nun insofern ändern will, dass responsive Sites höher eingestuft werden, als andere: Bin ich dann mit meiner Website schon so aufgestellt, dass ich trotz der Einschränkung im Bereich Speed nichts befürchten muss?

Ich habe eben auch schon mal versucht, die Javascript-Dateien nicht extra auszulagern und direkt laden zu lassen, aber dann funktioniert das Javascript nicht mehr (moniert wird das $-Zeichen). Das selbe passiert, wenn ich js-Dateien folgendermaßen einbinde:

Code: Alles auswählen

<script async src="js/jquery.js"></script>

Dieses async klappt irgendwie nicht bei mir.... (ich habe es nur lokal getestet - kann das der Grund sein?).

Wenn ich es nun so lasse, wie es jetzt ist: Riskiere ich etwas beim Google-Ranking? Die Seiten laden sich im Grunde genommen schon ganz gut und auch schnell auf dem Smartphone, so dass ich es vertreten könnte, es erstmal so zu lassen (wenigstens bis ich kapiert habe, warum meine Versuche fehlgeschlagen sind). Nur das Ranking möchte ich natürlich nicht gefährden...

Weiß jemand, wie es sich mit diesen Google-Angaben verhält?
Danke für Antwort!

Boa · **Boa** » 19.03.2015, 17:02 **Google Ranking nur noch für responsive Design?**

Das asyncrone Laden geht nur, wenn kein document.write in dem aufzurufendem Script ist. Ansonsten sollte das gehen. Wie hast Du das denn lokal getestet?

hopsli

Es ist kein dcoument.write in meinen Jacascript-Dateien enthalten. Lokal getestet: über einen virtuellen Server, der auf unserem Intranet installiert ist. Ich habe das nur angegeben, weil ich neulich mit dem Internet Explorer bös reingefallen war (Anderes Thema).

Wenn noch jemand Antwort auf meine Hauptfrage hat, würde ich mich sehr freuen.

heinrich

Welche Funktion haben denn die js-Dateien? Wenn sie zum Seitenaufbau notwendig sind, dann müssen sie natürlich vorher geladen werden.

hopsli

Mein ursprünglicher, funktionierender Stand ist dieser:

Code: Alles auswählen

<script src="js/jquery.js"></script>
<script src="js/tog.js"></script>

Wenn ich daraus dies mache:

Code: Alles auswählen

<script src="js/jquery.js"></script>
<script async src="js/tog.js"></script>

ist noch alles o.k.

Mache ich aber dies (jquery auf async, den Inhalt von tog.js direkt in die Seite, oder ich belasse es mit der Verlinkung ohne async oder mit async):

Code: Alles auswählen

<script async src="js/jquery.js"></script>
<script>
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;
    $&#40;'#hiddenevent'&#41;.click&#40;function&#40;&#41;&#123;
    if&#40;$&#40;'#menue'&#41;.is&#40;'&#58;visible'&#41;&#41; &#123;
      $&#40;'#menue'&#41;.hide&#40;&#41;;
      $&#40;'#showevent'&#41;.hide&#40;&#41;;
      $&#40;'#hiddenevent'&#41;.show&#40;&#41;;
    &#125; else &#123;
      $&#40;'#menue'&#41;.show&#40;&#41;;
      $&#40;'#showevent'&#41;.show&#40;&#41;;
      $&#40;'#hiddenevent'&#41;.hide&#40;&#41;;
    &#125;
  &#125;&#41;;
      $&#40;'#showevent'&#41;.click&#40;function&#40;&#41;&#123;
    if&#40;$&#40;'#menue'&#41;.is&#40;'&#58;visible'&#41;&#41; &#123;
      $&#40;'#menue'&#41;.hide&#40;&#41;;
      $&#40;'#hiddenevent'&#41;.show&#40;&#41;;
    &#125; else &#123;
      $&#40;'#menue'&#41;.show&#40;&#41;;
      $&#40;'#hiddenevent'&#41;.hide&#40;&#41;;
      $&#40;'#showevent'&#41;.show&#40;&#41;;
    &#125;
  &#125;&#41;;
&#125;&#41;;</script>

dann kommt diese Fehlermeldung:

ReferenceError: $ is not defined

Habt Ihr eine Idee dazu?

Danke für Antworten.... ich bin noch nicht mal sicher, ob ich mit dem Einfügen des async die Beanstandung von Google (s.o.) loswerde... und darum geht es mir ja eigentlich...

Du musst erst einmal verstehen, was async bedeutet. Das Problem ist, dass du in Script A etwas benutzt (nämlich das Dollarzeichen von jQuery), das von Script B definiert wird. Werden die Scripts asynchron geladen, so kannst du nicht wissen, welches zuerst ausgeführt wird. Eine Lösung ist, in Script A alle z. B. 100 Millisekunden zu prüfen, ob Script B schon ausgeführt wurde, und erst dann fortzufahren (setTimeout/setInterval, prüfen ob window.$ gesetzt ist). Alternativ kannst du auch Script A und B in eine einzige Datei zusammenhängen.

heinrich

Also bei so kurzen scripts sollte das Laden doch ohnehin kein Zeitproblem sein - denke nur dran, was G. da in seinen Ads lädt ...

mogli

Je nach Anwendungsszenario bietet es sich auch an jQuery und das oder die davon abhängigen Skripte einfach vor dem schließenden </body>-Tag einzubinden. So hast du das Ursprungsproblem bzgl. des Pagespeeds direkt gelöst. Zusätzlich musst bzw. solltest du keinen Inline-Code verwenden, da dir sonst der Vorteil des Cachens verwehrt bleibt.

Natürlich gilt es eine solche Implementierung immer individuell zu testen, damit nicht wichtige Funktionen oder Darstellungen der Seite erst nachträglich "aktiv" sind.

Kristian

Ich frage mich, ob man jQuery braucht, wenn man nur ein Menue ein/ausblenden will...

hopsli

Danke für die vielen Hinweise und Tipps!
@Kristian, Du hast Recht, wenn ich damit nur das Menue auf- und zuklappen wollte, wäre jquery wohl überdimensioniert. Und, richtig, mit jquery habe ich grad erst begonnen mich zu beschäftigen, es ist noch Neuland, ebenso wie dieses async.
Ansonsten teile ich @heinrichs Meinung: Was ich im tog.js ausführen lasse, ist nicht die Welt, andererseits muss die logische Abfolge natürlich garantiert sein.
@Hanzo: von der Sache her ist es sicher richtig, ich könnte tog.js natürlich noch unterhalb von jquery.js schreiben. Nur glaube ich, dass es wegen der Übersichtlichkeit nicht so gut ist, die jquery.js irgendwie zu verändern...
Den Trick, das js erst am Schluss der Seite zu laden, ist super, @mogli

Kristian

@hopsli
Wenn es auf 3 KB nicht ankommt dann schau dir Head.js an.
https://headjs.com/
Ich habe es bislang nur rudimentär getestet aber wenn man die Source direkt mit in die Seite nimmt und den ganzen Müll den man eigentlich nicht will oder braucht damit vor </body> lädt, tja, Google steht drauf...