http://shapeandslim.com/
If we drag it through the chrome it show that it is responsive, also i have checked it in iphone5 safari, it works fine as well but when we try google mobile friendly test it just fails, only home page fails while rest of the pages successfully passed the mobile friendly test. Also the preview that it shows on google test page it seems like that the css is not being used. whats seems to be the problem here and how to solve it.
I had these same problems. I found that I had a robots.txt file that was prohibiting crawling of the folder that contained my bootstrap CSS files, so it wasn't rendering correctly for crawlers. I changed all of my fonts to ensure they are at least 16px. I also added the following to all of my images: class="img-responsive". I hope this helps!
From Google Webmaster FAQ
I have a great mobile site, but the Mobile-Friendly Test tells me that my pages aren't mobile-friendly. Why?
If a page is designed to work well on mobile devices, but it’s not passing the Mobile-Friendly Test, the most common reason is that Googlebot for smartphones is blocked from crawling resources, like CSS and JavaScript, that are critical for determining whether the page is legible and usable on a mobile device (i.e., whether it’s mobile-friendly). To remedy:
Check if the Mobile-Friendly Test shows blocked resources (often
accompanied with a partially rendered image).
Allow Googlebot to crawl the necessary files.
Double-check that your page passes the Mobile-Friendly Test.
Use Fetch as Google with Submit to Index and
submit your updated robots.txt to Google to expedite the
re-processing of the updated page (or just wait for Google to
naturally re-crawl and index).
Source https://googlewebmastercentral.blogspot.dk/2015/04/faqs-april-21st-mobile-friendly.html Question 6
The reasons according to Google as to why your site is not mobile friendly is because of the following:
Content wider than screen
Links too close together
Uses incompatible plugins
Another reason could be that:
This page may appear not mobile-friendly because the robots.txt file
may block Googlebot from loading some of the page's resources. Learn
how to unblock resources for Googlebot.
Google is Rendering your website as follows, I suggest checking the cache and CSS files accordingly. Make sure the view does now exceed the size of the screen
Check the link here for more insight on your page and how to fix it
Related
Since google updated their way of scoring mobile I have trouble to optimise my websites.
I want to know what am I doing wrong and what should be done to existing sites to make the score higher. Its easy to get 95-100 on desktop but on same site on mobile will be 25...
Before someone says to follow suggestions by insights then I will say that I do and I managed to remove most of them - worst thing is that the score didn't move at all. This is the biggest struggle I have, it seems that whatever I do it wont be good enough...
I followed this guide https://kinsta.com/blog/google-pagespeed-insights/ + some of my own solutions.
Is there anyone that has any good tips or permanent solution for this issue?
Google Report
As evident from your Page Speed Insights report, the main factor responsible for your low score is images. The solution to this is using RESPONSIVE IMAGES, which will drastically improve the speed of your website on mobile. What it basically means is that, you'll have to keep different sizes of the same image available for the browser and browser will decide which version of the image is suited on a particular resolution.
1) Here's everything you need to know about Responsive Images --> Responsive Image (CSS Tricks)
2) You have to shift the <link href=".." .../> and <script> tags from top of the page to the bottom of the page, just after the <body> tag. This will fix the `Eliminate render blocking resources issue.
3) You can use Javascript Minifier to minify your JS. Just paste your existing JS code inside the Input Javascript box on the website and click MINIFY
Also, cache policy is also one of the factors, bringing your score down. An efficient Cache policy will make browsers, load your website faster, after the first load. Cache handling is server specific, its different for Apache, Express etc.
I have WordPress page whose theme seems to be loading an undesirable CSS background-image. I want to try to locate the code that is responsible for loading this image but first I have to find its name. I was wondering if there is some tool that allows coders to list and identify the urls of all css-background images that a page calls.
Obviously finding background-images is trivial if all of the page's CSS is controlled only by inline code and directly linked CSS-stylesheets: a text search "find" operation for "background-image" will allow you to find all bg images. But the task becomes complicated if styling is js dependent, and in this case, it was at times.
For those of you who immediately wonder why I need would want to go this route instead of simply using development tools in Chrome or Firefox, below is a list of reasons why.
Why I want a way to automatically extract the background-image urls:
The unwanted ghost images only loads on my mobile phone, so I can't inspect the element to find the image in using my desktop development environment. This is true even if I set the developer tools to "mobile".
I don't have a development environment for my phone that will let me inspect the relevant element.
I tried downloading the exact html loaded by the mobile phone in my browser, but the css ghost image will not appear on my desktop even when use the code my phone had loaded.
The ghost image is not from a virus in my mobile phone browser, because the ghost image loads on my phone even when I used a different browser.
Any help will be greatly appreciated!
Thanks
UPDATE: I figured out the cause of the ghost image using the free trial provided by Browserstack, a mobile emulator. At allows you to view interactive content and inspect it with dev tools. I learned about it from this question: test mobile website in desktop browser.
My problem turned out to be that the css-image in the theme was pointing to my local address, which different from what it should have been on my remote server. The issue turned out not to be a desktop vs. mobile problem, but rather local vs. remote. The emulator reproduced my issue, and it allowed me to inspect and find the problematic code. Still I would love to know if there is a such a css-crawling tool, so I will leave this question open.
Hopefully someone can help me out with this. I've been tasked with giving a mobile template an overhaul on a site that uses BigCommerce.
Does anyone know of an IDE or a windows based browser that would allow me to preview the changes that I make on the fly, preferably via Dreamweaver CC but this isn't a necessity.
Basically I want to completely revamp the homepage so that instead of having a mundane and dreary menu that take up the entire page, I'd like to change it so that I have responsive windows 8 like tiles that one could use to navigate the site.
Since BigCommerce is a paid service you are limited to what is available. You cannot simply download the site and run it on your localhost. I worked on one of those sites before, the best work around I found what to edit in google chrome's inspect element and console "F12" - this way you can make changes directly to the site to see how they render. But keep in mind, F12 is after chrome builds the page and will not match the actual code all the time.
my site seems to be downloading very slowly. I recently changed the CSS and HTML to improve the layout, but I think I might have messed it up somehow.
Can anyone give me feedback on things I could do to speed it up?
Thanks.
www.aerlawgroup.com
There are many online Web Optimization sites that you can use.
I've attached some optimized results for your page.
From http://www.webpagetest.org/
See The Result
and you can use Google Page Speed Link
Simply, I would suggest one thing based on your page design and the code is..., use CSS Simplify Tool and the HTML Symplify Tool. It reduces the Page Loading time dramatically. and as well as some Image Compression Tool too.
One thing that really reduces the page speed is Flash contents or Images. so be focus on that primarily
http://csslint.net/ for linting
http://csscomb.com/ for ordering attributes
http://prefixr.com/ for adding browser prefixes
There are many many factors that come in play with a slow page besides CSS/HTML. The size of the images, whether they are optimized, how fast the server delivers, caching, etc...
I would recommend using Google PageSpeed Insights or similar service - they show you a lot of info.
Go to https://developers.google.com/speed/pagespeed/insights/
Edit: Your URL loads this JS file which has an anonymous function that runs again and again:
http://s3.amazonaws.com/scripts.hellobar.com/bfa7653204b92054d559e0d8dd1ba2dd6fbdc183.js
You can view for yourself by using a web inspector - I am in Safari 7 and under Timelines on the Inspector panel - select "Layout & Rendering" from leftside menu and reload page. You can see that the HelloBar is doing some kind of adjusting over and over.
A mobile web site project I've been working on has been recently been analyzed by a performance consulting firm and they came back recommending that we move all of our .css file links to the BOTTOM of the HTML to accommodate issues on the iPhone where .css files can block concurrent server requests.
I've always known this to be true on most browsers when it comes to .js files--hence the common practice of putting .js file links at the bottom of one's HTML--but I've never heard this about .css files.
I have yet to get a response from the consulting firm with cited references as to this being an actual issue on Mobile Safari. Has anyone else heard of this and, if so, know of any specific references that talk about it (perhaps from Apple directly?)
This is not intended to be an answer to your question, but as a reference:
Best Practices for Speeding Up Your Web Site from Yahoo:
Put Stylesheets at the Top
While researching performance at Yahoo!, we discovered that moving
stylesheets to the document HEAD makes pages appear to be loading
faster. This is because putting stylesheets in the HEAD allows the
page to render progressively.
Their recommendation to move CSS to the bottom is unusual - would appreciate it if you could share why they found this to be a good idea.
edit: Looking at the general guidelines on apple.com, I couldn't find any particular reference to CSS inclusion applicable only to Mobile Safari. The basic, general instructions still state that you should place CSS in the <head>. See this page.
If you load up the following URL (http://waynepan.com/s/con/) on your desktop and then your mobile browser you'll observe a curious behaviour; On a desktop browser (Chrome & Firefox at least) you'll see the boxes populating from top left to bottom right (in the same order as on the source code) and on a mobile device (iPhone, iPad at least) you'll see the exact opposite occurring.
Albeit undocumented, this observation would suggest that the mobile browser reads the main html file first and then proceeds to render the page bottom-to-top thus loading latter hrefs first and working it's way up to the top.
You'll also observe that on the desktop browser up to 6 boxes are populated concurrently and on the mobile browser up to 4 are populated - this accounts for the maximum concurrent connections that are allowed by the browser in question to any one host.
Therefore, if page load and render speed is especially important in your mobile web app, take special care to order the loading of elements accordingly. I think your consultancy firm colleagues had observed a similar behaviour and wanted to force the CSS to load before all the other content - it would all render with the correct styles from the outset, giving the illusion (or user experience) that the page loads faster.
Alas, my 1 cents worth - I hope it is food for thought. :-)