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.
Related
I am running a light wordpress installation, with a light theme (neve). I am running a CDN (cloudflare), I am making most optimizations that I can think of with some room around images and custom code stripping.
However I am not even close for my pages and even if I test AMP pages which are stripped down I don't get a passing score which concerns me. Can anyone help me out, for example 1 of my blog post pages:
Amp report:
https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.culturalistpress.com%2Fanycubic-photon-mono-3d-printer-is-it-good-what-materials-can-it-use-what-software-does-it-use-and-how-does-it-compare-to-the-anycubic-mega-series%2F%3Famp%3D1
Not amp report:
https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.culturalistpress.com%2Fanycubic-photon-mono-3d-printer-is-it-good-what-materials-can-it-use-what-software-does-it-use-and-how-does-it-compare-to-the-anycubic-mega-series%2F
In both cases my main thread processing is too much and too much JS - short of that I don't see a lot of savings. Most the JS comes from ads which I don't understand why they are blocking in this case.
I have checked your both reports, the man issue is with Javascript. As your website has developed in WordPress use some 3rd party plugin like WProcket and perfmatters to reduce unused Javascript. Your page DOM size, it is created when you have too many sections in your page. Try to reduce those sections to reduce the page size, minimize the gap between paragraphs.
Adjust the images size and try to use WEBP format of images. Also check the compatibility of third party plugins with you WordPress version which you have installed.
procureure.com/types-de-droits
Here's how it looks via customize.php
Link
I was not doing any major changes. Cleared cache and changed stuff in customize.php but thats it.
I've been working for 2 straight days to get a decent gtmetrix score and overall design. Help would be greatly appreciated.
Just a quick note: GTmetrix score/ Pingdom or google page speed test
are just recommended approach and the speed they show does not
necessarily mean real world differences. Those scores do not cover the
complexity of code of the server side (which also delays the page load
time). So there are scenarios where you have to ignore few of the
recommendations to make sure everything works fine.
Although in your case i can see that there are no css on you page applied externally nor internally. Kindly tweak the css rendering settings to see if it works. The theme is working fine on customize.php because the changes do not affect the back end of the website it's only the front end which gets affected. So CSS are rendering on back end but not of the frontend. It maybe of theme issue if css are not enqueued properly. there can be serveral reasons. Switch to one of the default themes and see if the plugin is working properly. This will help you find out where exactly the problem exists.
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.
Currently, I'm investigating several tips/recommendations for improving the performance of web sites. So, I've started with Steve Souders' excellent books (High performance web sites and even faster web sites), but I've got a couple of questions regarding some of the rules that are presented. FOr instance, chapter 5 of High performance web sites say that CSS stylesheets should be put at the top of the page because putting them at the bottom stops the progressive rendering that is performed by the browsers. According to Steve, some browsers (most notably IE) do get stuck with it and show a blank page instead of showing the items progressively. Here's the url for that test page:
http://stevesouders.com/hpws/css-bottom.php
Now, I do understand that we're talking about a book with a couple of years and that browsers (including IE) have been updated and improved. The reason I'm asking this is because I can't reproduce the behavior he mentions with any current version of FF, Chrome or IE.
Well, the thing is that Yahoo (http://developer.yahoo.com/performance/rules.html#css_top) and google (https://developers.google.com/speed/docs/best-practices/rendering#PutCSSInHead) still say that.
So, what I'd like to know is if browsers have evolved in this area and this is only problematic for, say IE 8? If that is the case, why haven't yahoo and google updated their recommendations? (btw, I've tried simulating IE7 from within IE11 and still don't see the expected result that is described in the book...)
*UDPATE*One more final note: I've decided to reproduce Steve's cgi script in asp.net and I've created a simple generic handler that does the same thing as the sleep.cgi script. what I'm seeing here is that putting a stylesheet reference (which takes some time to load - I've went with 10 seconds) inside the head ends up producing the blank page problem that is reported in the book. If you put at the end, the browser ends up rendering everything and making a second pass for applying the styles after they have been loaded. In my opinion, this makes sense because when you put the style in the header element, the browser is holding up until it gets the styles before rendering (notice that the other referenced components are still being downloaded on the background, but they're not being shown in the screen). On the other hand, when they're at the bottom, the browser will simply apply the current styles until it gets stuck in the stylesheet. WHen that happens, it will only show the html it has loaded until the stylesheet (if there are any images below it, the browser will still download them but it will only render them after the styles have been loaded).
So, after these tests, I'm starting to think that 1.) I'm missing something here or 2.) yahoo and google recommendations are no longer valid today.
Thoughts?
Thanks guys!
Simply inserting a <link> tag in the footer is not the way to defer stylesheets. The currently accepted method is to attach it using javascript:
<script>
function loadStyleSheet(e){if(document.createStyleSheet)try{document.createStyleSheet(e)}catch(t){}else{var l;l=document.createElement("link"),l.rel="stylesheet",l.type="text/css",l.media="all",l.href=e,document.getElementsByTagName("head")[0].appendChild(l)}}loadStyleSheet("/your/stylesheet.css");
</script>
Optimizing your page for speed involves determining what CSS is above the fold, inlining that part in the header, and loading the main stylesheet later using the above method.
I recommend doing some searches for "above the fold css" and check out Google Pagespeed Insights.
https://developers.google.com/speed/pagespeed/insights/
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. :-)