|
|||
einmal blockiert javascript das rendering und einmal nicht (Page Speed Insights)
Hallo,
ich habe "anscheinend" ein Problem mit dem richtigen Einbinden von javascript-Files. Derzeit arbeite ich einer neuen Version unserer Firmen-Homepage, mit einem moderneren Unterbau. Im Zuge dessen teste ich die Seiten immer mal wieder mit "Google Page Speed Insights". Dabei bin ich auf ein äußerst merkwürdiges Problem gestossen, welches mir mittlerweile sehr viele Stunden Kopfzerbrechen bereitet hat. Und zwar meckert Google in der neuen Version über die javascripts und in der alten Version nicht, dabei verwende ich zum Teil die gleichen Scripts und den gleichen Sourcecode. Im Detail sieht das dann so aus. ALTE SEITE https://developers.google.com/speed/pagespeed/insights Ergebnis: Code:
Ihre Seite enthält 3 blockierende CSS-Ressourcen. Dies verursacht eine Verzögerung beim Rendern Ihrer Seite. ... ... Optimieren Sie die CSS-Darstellung für die folgenden URLs: http://www.trennwand-rink.de/…nburns/themes/neutral_light/skin.min.css http://www.trennwand-rink.de/css/idangerous.swiper.css http://www.trennwand-rink.de/css/style.css Code:
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="robots" content="index,follow"> <meta name="author" content="Rink GmbH, 35576 Wetzlar"> <meta name="keywords" content="Rink Wetzlar, Rink GmbH, Rink Trennwände, Trennwände, Schrankbau, Innenausbau, Schreinerei, WC Trennwände, Möbelbau, Trennwandsysteme, Systemtrennwände, Einbauschränke, Lohnfertigung"> <meta name="description" content="Rink GmbH Wetzlar - seit über 60 Jahren Ihre verlässliche Schreinerei in alle Fragen rund um Trennwände, Schrankbau und den Möbelbau bzw. Innenausbau."> <title>Rink GmbH Wetzlar - seit über 60 Jahren Ihre verlässliche Schreinerei in alle Fragen rund um Trennwände, Schranksysteme und den Möbel- bzw. Innenausbau.</title> <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <![endif]--> <link rel="stylesheet" type="text/css" href="js/pe.kenburns/themes/neutral_light/skin.min.css" /> <link rel="stylesheet" type="text/css" href="css/idangerous.swiper.css"> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700,600s" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery.bgpos.js"></script> <script type="text/javascript" src="js/pe.kenburns/jquery.pixelentity.kenburnsSlider.min.js"></script> <script type="text/javascript" src="js/idangerous.swiper.js"></script> <script type="text/javascript"> <!-- $(function(){ $('nav a') .css( {backgroundPosition: "0 0"} ) .mouseover(function(){$(this).stop().animate({backgroundPosition:"(0 -450px)"}, {duration:350})}) .mouseout(function(){$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:350})}) }); //--> </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-26006723-2', 'auto'); ga('require', 'displayfeatures'); ga('send', 'pageview'); </script> <style type="text/css"> .peKenBurns {height: 275px;} </style> <script> jQuery(function($){ $(".peKenBurns").peKenburnsSlider() }) </script> </head> NEUE SEITE https://developers.google.com/speed/pagespeed/insights Ergebnis: Code:
Ergebnis: Ihre Seite enthält 4 blockierende Skript-Ressourcen und 4 blockierende CSS-Ressourcen. Dies verursacht eine Verzögerung beim Rendern Ihrer Seite. ... ... Entfernen Sie JavaScript, das das Rendering blockiert: http://test.trennwand-rink.de/js/jquery-2.1.4.min.js http://test.trennwand-rink.de/js/bootstrap.min.js http://test.trennwand-rink.de/js/kenburns.js http://test.trennwand-rink.de/js/swiper.jquery.min.js Optimieren Sie die CSS-Darstellung für die folgenden URLs: http://test.trennwand-rink.de/css/bootstrap.min.css http://test.trennwand-rink.de/css/main.css http://test.trennwand-rink.de/css/swiper.min.css https://fonts.googleapis.com/css?family=Roboto:400,300,500,700 Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name=viewport content="width=device-width, initial-scale=1"> <meta name="robots" content="index,follow"> <meta name="author" content="Rink GmbH, 35576 Wetzlar"> <meta name="keywords" content="Rink Wetzlar, Rink GmbH, Rink Trennwände, Trennwände, Schrankbau, Innenausbau, Schreinerei, WC Trennwände, Möbelbau, Trennwandsysteme, Systemtrennwände, Einbauschränke, Lohnfertigung"> <meta name="description" content="Rink GmbH Wetzlar - seit über 60 Jahren Ihre verlässliche Schreinerei in alle Fragen rund um Trennwände, Schrankbau und den Möbelbau bzw. Innenausbau."> <title>Rink GmbH Wetzlar - seit über 60 Jahren Ihre verlässliche Schreinerei in alle Fragen rund um Trennwände, Schranksysteme und den Möbel- bzw. Innenausbau.</title> <meta property="og:title" content="Schreinerei Rink GmbH Wetzlar" /> <meta property="og:url" content="http://www.trennwand-rink.de/" /> <meta property="og:site_name" content="Rink GmbH"/> <meta property="fb:admins" content="480971195258702" /> <meta property="fb:page_id" content="480971195258702" /> <meta property="og:description" content="Seit über 60 Jahren Ihre verlässliche Schreinerei in alle Fragen rund um Trennwände, Schranksysteme und den Möbel- bzw. Innenausbau." /> <!-- gemeinsame minify CSS-Datei --> <!--<link rel="stylesheet" type="text/css" href="css/min.css">--> <!-- Bootstrap Core CSS --> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!-- Custom CSS --> <link rel="stylesheet" type="text/css" href="css/main.css"> <!-- Addon - swiper --> <link rel="stylesheet" type="text/css" href="css/swiper.min.css"> <!-- Fonts --> <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'> <!-- jquery --> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <!-- bootstrap --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- KenBurns Effekt (große Bilder) --> <script type="text/javascript" src="js/kenburns.js"></script> <!-- Swiper (kleine Bildergalerie) --> <script type="text/javascript" src="js/swiper.jquery.min.js"></script> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <!-- Google Analytics --> <script> window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; ga('create', 'UA-26006723-2', 'auto'); ga('require', 'displayfeatures'); ga('send', 'pageview'); </script> <script async src='//www.google-analytics.com/analytics.js'></script> <!-- End Google Analytics --> </head> So, und jetzt verstehe ich die Welt einfach nicht mehr. 2 x dicke Probleme sehe ich: 1. Warum meckert Google bei der neuen Version über die Einbindung der javascript-Files? Ich habe sie genauso eingebunden wie bei der alten Version (und da war alles okay laut Google) und das jquery-script ist sogar das (fast) gleiche. Ich verstehe es nicht .... 2. Warum meckert Google bei der neuen Version auch noch über das Einbinden des Web-Fonts? Bei der alten Version war es okay, bei der neuen soll es behoben werden? Ich bin komplett überfragt und wäre über jede Hilfe extrem dankbar. Bitte, gebt mir Tips ... Grüße Chris |
Sponsored Links |
|
|||
Auch hier die Frage: Wieso hängst du dich so sehr an diesem Tool auf? Eventuell hat es etwas damit zu tun, dass der test-Server auf einer subdomain liegt? Aber ansonsten würde ich da erst mal nichts ändern.
|
Sponsored Links |
|
|||
Warum?
Weil ich es nicht verstehe und es gerne verstehen will. Es muss doch einen Grund geben und danach wäre ich auch zufrieden. Und nein, an der Subdomain liegt es leider nicht. Ich habe die neue Seite mal testweise auf ne "richtige" Domain geleitet und das gleiche Ergebnis bekommen. |
|
||||
Fängt wahrscheinlich schonmal damit an:
HTML-Code:
<meta name=viewport content="width=device-width, initial-scale=1">
Was noch: - 4 x CSS Dateien (Davon eine von einem anderen Server) - 5 x JavaScript Einbettungen - 2 x Inline JavaScript - Viel zu viele Slider Elemente (Nimm die Hälfte, oder ein Drittel)
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
|
||||
Hallo,
also ich habe das getestet und den Abschnitt "<meta name=viewport content="width=device-width, initial-scale=1">" einmal testweise bei der neuen Version entfernt. Leider gab es wieder das gleiche Ergebnis, er meckert bei der neuen Version immer noch über die javascript-Files. Also daran kann es auch nicht liegen .... Zitat:
Zitat:
Genau hier liegt ja mein Problem, einmal ist es okay, einmal nicht. (auch die javascript Files lege ich am Ende in einer Datei zusammen) Zitat:
Zitat:
Aber auf jeden Fall schonmal Danke für die Anstösse. Leider hat das alles nichts mit meiner Frage zu tun warum Google in der alten Version die Javascript-Einbindung akzeptiert und in der neuen nicht. |
|
|||
Setze mal testweise eine 1:1 Kopie von der funktionierenden Version auf die test-url und schau, ob er da auch meckert.
Bezüglich der Slider-Elemente: Kein Nutzer mag slider. Noch weniger mögen Nutzer Slider, die sich von selbst bewegen und die man nicht stoppen kann. Aber ja, slider sind so beliebt, weil Leute nicht kreativ sind und meinen, wie sollen sie sonst die Inhalte darstellen. |
|
|||
Zitat:
Er nimmt die js-Einbindungen ohne meckern an. Bin am verzweifeln .... Zitat:
Es kommt doch immer darauf an wie man die Slider ein- und umsetzt. Zitat:
Beide Slider (nenne die obere BIlder-Galerie auch mal Slider) nutze ich als eine Art Bilder-Galerie und eine Nutzer-Interaktion ist bei dem oberen, großen Slider gar nicht vorgesehen. Bei dem kleineren Slider unten gibt es zwar die Möglichkeit der Interaktion, das ist aber nur ein Zusatznutzen, generell soll dies auch nur eine Bilder-Galerie sein. Wie sollte ich das jetzt anders lösen? Bzw. wo ist das Problem? Also wie hätte ich die beiden Galerien ohne Slider nutzen sollen? |
|
|||
Zitat:
Der Rest der Antwort bezieht sich auf die Slider: Zitat:
Mir fällt auf die Schnelle nur ein Karusell (ist ja auch ein Slider) ein, welcher halbwegs akzeptable ist: Das Werbe-Karusell bei facebook, da erkennt man, dass da noch weitere Elemente vorhanden sind. Ansonsten wäre ich nie darauf gekommen, dass du zB zwei Slider auf deiner Seite eingebunden hast. Erst, nachdem du es hier geschrieben hast, ist mir der zweite unten aufgefallen. Zitat:
Ja, wenn man keinen slider einsetzt und die Galerie über mehrere Zeilen geht, dann verschwindet etwas "unter dem fold" (so ein Schlagwort das unnötig ist), aber was für eine Überraschung: Die User wissen, wie man scrollt. Also: Anders lösen durch mehrere Zeilen (Da kommt bestimmt das Gegenargment: Nein, schaut nicht schön aus. Auch wenn es mit Slider noch unschöner ist) Das Problem ist: Animationen die der User nicht abstellen kann und die keinen Mehrwert liefern. |
|
|||
So, da bin ich wieder.
Vielleicht sollte ich erst einmal erwähnen das ich kein Profi bin und das Webdesign eher ein Hobby von mir ist Zitat:
Ich habe auch mal 2 x Semster Informatik studiert und sehr vieles was man dort lernt ist doch ehrlich gesagt schlicht praxisfremd. Also nein, bei diesem Punkt muss ich dir widersprechen und bin mir zu 100% sicher das du mit der Aussage falsch liegst. Mein Slider oben, mit AutoPlay und KenBurns-Effekt ist allemal besser als eine statische Bildergalerie und wie gesagt würde ich JEDE Wette eingehen das eine große(!) Mehrheit der Nutzer das ebenso sieht. Ich meine wir leben im Jahr 2016, da sollte eine Homepage schon etwas moderner aussehen und nicht wie eine Firmen-Homepage aus dem Jahr 2000. Zitat:
Und ganz ehrlich, anstatt 4-5 Bilder stumpf untereinander zu packen nehme ich lieber einen Slider. Zitat:
Es gibt in jedem Bereich, ob Möbel, Autos, Elektrogeräte oder was auch immer, immer wieder Dinge die alleine aus optischen Gründen vorhanden sind und keinen Mehrwert liefern. Nicht alles muss einen Mehrwert liefern, sehr oft reicht es aus wenn es das Ganze einfach etwas hübscher macht. Hehe, es scheint mir so, als wärst du ein militanter Slider-Gegener, aber da kann ich dir nicht zustimmen. Der 2. Slider mit den kleinen Bildern unten, den werde ich wohl entfernen und durch ein statisches Bild ersetzen. Aber der große Slider oben, no way. So, dann nochmal Danke für die Zeit und Mühe. Leider hat das alles nichts mit meinem eigentlichen Problem zu tun. |
Sponsored Links |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Anpassen eines CSS Templates - JPEG als Hintergrundbild setzen | soulknot | CSS | 1 | 08.05.2011 18:31 |