So I have this wordpress blog set up on a VPS with litespeed and cloudflare. The website loads some banners from a revive insallation on the same VPS server, only that domain doesn't have cloudflare installed.
Although the page speed and wslow scores are good, I still get a 3 to 5 secs page load. You can see the results here:
https://gtmetrix.com/reports/www.survivalsullivan.com/WIZjVt68
Although individual resources seem to load fast (including the revive banners), there seem to be inexplicable "delays" in the waterfall... I'm no wiz in website optimization but do have some experience.
Am I missing something? I couldn't find a decent resource on how to read the waterfall, although I figured out most of it. Thanks!
Overall you got pretty good results!
First of all deal with all those images gtmetrix displays: optimize them using photoshop, jpeg mini or sprites.
If you haven't already, install bj lazy load plugin and above the fold.
Install and configure W3C cache which will fix the YSLOW settings that still not green in gtmetrix.
I assume you use some kind of theme / page builder? see if you can reduce the number of dom elements in page. Use DOM Monster! to see how nested is your page.
For example if need to display an image dont nest it in div inside column inside row inside container div.
If your website is gonna be used by users in multiple countries I would suggest paying for MAXCDN. It also integrated into W3C cache plugin.
If you use google fonts try adding them locally to style instead of GETing them.
Related
I checked the pageinsights of "http://www.briddles.com/riddle/9-bodmas?l=333"
Most of these are thirdparty. How can i sove it ?
I see 3 important groups there:
Youtube
Google Ads or analytics
Facebook
Here is what I would do:
I see the youtube player is hidden by default, I would reserve some space for the player (maybe with a lightweight placeholder) and only append the iframe when the user clicks "view answer". This lite-youtube web component is awesome and might help you out. Trust me.
Normally Google ads is not something you want to get rid of. I would just make sure to load these scripts with the async attribute at least.
For the facebook comments I imagine 3 approaches:
3.1. Render a placeholder with a button saying "See comments" or something like that and only fetch the scripts when the user press that button.
3.2. Use the Intersection Observer API so when comments section scroll into view, fetch de scripts and render. (You will have to reserve some space to avoid CLS).
3.3. Remove the comments section (if there is almost no usage) or use a different provider that is optimized for web vitals. I don't know which one, but it's still an option.
Extra recommendations:
The main image is too heavy for mobile users, try to use a responsive image, compress the image and choose a lighter format like webp for browsers that support it. More info about image optimization here.
Reduce the amount of fonts you use and, if possible, host it by yourself and use a CDN. Google fonts is practical but to host your fonts is better for performance.
I use pagespeed insight to audit thise site:
http://www.omniwaresoft.com.tw/docker/
But I can't get result like usual, instead it shows "?" and "error (NO_FMP)" for First CPU Idle, FMP and dom ready.
Here's the screenshot
This appears to be a problem with the simulated throttling on Page Speed Insights.
I cannot pinpoint the problem but I would guess it is related to some strange behaviour on your site where the site starts loading in and then there is a quick flash and the content then animates in.
Also as you have a lot of assets set to https in source but don't have an SSL certificate the 307 redirects could cause an error somewhere.
Certain Chinese character combinations have been known to cause issues with Lighthouse (the engine behind Page Speed Insights) under throttling although the exact cause I am not sure of.
Workaround
Obviously once the site has SSL etc. the problem could go away.
In the mean time if you go to Developer Tools -> Audits you have the option to deselect 'Simulated Throttling'. If you do that then it does work, although the score is always about 3-5 points lower than simulated throttling so bear that in mind.
newer chrome versions -> the option to deselect the 'Simulated Throttling' is now only visible if you click the settings icon (gear / cog) in the top right of the audits page, took me a few seconds to work out where they had hidden it. Also make sure that 'Clear Storage' is checked so that you get a score as if it was a new visitor to the site.
PageSpeed Lighthouse reports an error on the "too many redirects" as well as an error for "defer off -screen content".
It works as expected if the page is scrolled to the end before the audit is complete. And as https://stackoverflow.com/users/2702894/graham-ritchie noted, it only happens if a slow network is simulated.
There seems to be more than one plugin trying to cache content. Try turning one or both of those off.
Some of the lazy loaded image tags have a src value with a HTTPS protocol on the CDN and a lazy loaded image (data-src) on the server with a HTTP protocol. Try turning lazy loaded images off and if that fixes it, try making sure both src and data-src use the same protocol.
It also seems like something is causing assets that are 404 errors to return the URL of the page.
One last thing I noticed: The Autoptimize plugin does not seem to be resulting in optimized performance—the time to first byte is sometimes over 4 seconds. Maybe try turning it and any other plugins caching off, empty the caches they've created and look at PageSpeed.
In general, turn plugins off and see if the PageSpeed problem is fixed and even if performance is better with them off.
Making a EXISTING CMS site compatible for mobile site NOT REDIRECT
Hi All.
I am currently creating a mobile version of an expression engine site that we use.
I am having problems with this, because typically I can just use media quires, or use redirect scripts.
However, the layout of the mobile site will be completely different from the desktop, so I can't just fiddle with a media quires for the CSS (as site just looks to different).
I was thinking of using a javascript to wipe the code or markup (php) if the device is mobile BUT it would mean perhaps loading two versions of code anytime a page loads up (not good for mobile). Eg one code for desktop and another for mobile.
I can't change the file names eg (mobile_index) because it is a CMS and the links wont link up correctly. I have tried this a few times , and also editing the .HTACCESS file, but it simply didnt work.
So if anyone knows how do I change the code of a page if the device mobile, but cant change file name, directory or any of that :-)
Cheers
Daragh
Why no redirect? If I was in your position, which I was a few months ago, I would handle this totally different:
Install Multiple Site Manager by ExpressionEngine: http://expressionengine.com/user_guide/cp/sites/index.html
Add another site -- mobile
Give it a proper domainname like m.domain.com
Give it its own template group
... and redirect with http://github.com/sebarmeli/JS-Redirection-Mobile-Site/
Now you can manage both installations from the same CMS and both installations can access existing channels, modules, extensions and members. This will keep your code fast and clean.
Adding a bunch of conditionals will only slow down installation.
Actually you could mess with media queries - it's the most flexible. JS is really overkill for something like this. At larger sizes, UL>LI menus could appear, and at smaller sizes they could be hidden (display:none) and swapped to select lists; divs can be replaced, elements dropped or resized. I also combine them with different snippets or embeds so you can tailor the content out as well.
You might try something like MX Mobile Device Detect. It gives you some variables that can detect if the user is on a mobile device that you could use in conditionals in your templates.
I´m planning to make a full dynamic site using pjax, with static menu (only the content will be updated with pjax). How bad is this?
The site that i have planned to implat this on have a lots of data on it, most images.
I have tested my solution on my local machine and it seems to work but in production it will probably be slow or what do you guys think? Are this bad practise?
Now on pjax start i slide out my container to the left, and slide in the new content from the right. I have noticed a small performance lost when i do this in Safari and FireFox. Should i skip my solution and just do regular updates of the page? I want to do something like Twitters iPhone app, but on the web.
The reason i want to do this are that i have a full size google maps with a lot of pins that take some time to load.
I have found Tubrolinks (http://www.github.com/rails/turbolinks) that would be included in Rails 4.0, its great adn i think a good answer to my question.
am I just stupid or does Drupal have a big flaw? (probablt the former of the two..)
I have built a site with some public content and some private content. The problem is that even though menus can be hidden from public, unauthorized users, there is no stopping a visitor from just typing in node/5 (if node/5 were one of the private, hidden pages).
And I am baffled by how troublesome this is to fix. there is no basic functionality to fix this, and having tried two modules simple_access and access_control none of them work! Currently trying to fix a drupal 6 site. Any suggestions on modules that might fix this VERY BASIC functionality? Is Drupal not meant to handle corporate pages where you have external pages and internal sensitive content?
By the way, Drupal 7 is in the .9 stage, there are still VERY limited module availability, mostly everything is in an alpha stage and has been like forever, is there no development being done for D7?
The module that'll fix the problem for you is Nodeaccess; this is the opening text from the module page:
Nodeaccess is a Drupal access control module which provides view, edit and delete access to nodes. Users with the 'grant node permissions' permission will have a grant tab on node pages which allows them to grant access to that node by user or role.
So that will do exactly what you want. Also the way Drupal's access system works means that any menu link that points to a node to which the user does not have access, will not be shown for that user. So you won't even have to hide your menu items any more, Drupal will do it for you :)
Regarding Drupal 7 contributed modules, the 'major' modules (Views, CTools, Devel, etc.) are all coming along nicely and are stable, in RC or at least beta. Because Drupal is open source the sole maintainers of smaller modules may not have the time to devote to bringing the Drupal 7 version alongside maintaining the v6 module (a lot of people still use D6 and there are still issues to attend to there).
Personally I've developed quite a number of D7 sites now and have found the contributed modules to be available and of a good quality (for the most part). I guess it just depends what specific functionality you need at the end of the day.
I think there's just a gap between your expectation and how Drupal actually works.
Drupal doesn't limit access to content based on whether or not that content is in the menu. On a site with thousands of nodes it would be overwhelming to have a menu of thousands of items.
Drupal has a rich node access system and there are dozens of modules which can help solve this problem. See the list of content access control modules for ideas on which you might use.
When I run into specific problems with modules I tend to follow a few steps:
re-read the README.txt file and INSTALL.txt file
re-read the project page to see if it links to any further documentation
read the issues for the project to see if any of them have similar descriptions of problems (click on the number links in the right sidebar of the project page)
create a new test site where the only thing I install is the module in question and then walk through the steps I think I should, documenting them in a new issue in the project issue queue as a "support request", and then ending the post with "expected results" and "actual results" - maintainers will usually get back in a few days time
nodeaccess module (http://drupal.org/project/nodeaccess) should work perfectly for you.