I got a problem with a wordpress website, i got a TTFB of about 8s.
My server is a debian 7 with apache, 3go RAM, hosting at gandi cloud IAAS
If i install a cache module (like SuperCache), when a page is in the cache everything is OK, pages are loading very fast
But for a new page, or with the cache module disabled, it's 8..9 seconds of loading.
My apache2.conf is configured like that :
<IfModule mpm_prefork_module>
StartServers 1
MinSpareServers 1
MaxSpareServers 3
MaxClients 10
MaxRequestsPerChild 3000
</IfModule>
<IfModule mpm_worker_module>
StartServers 1
MinSpareThreads 5
MaxSpareThreads 15
ThreadLimit 25
ThreadsPerChild 5
MaxClients 25
MaxRequestsPerChild 200
</IfModule>
A free-m request says :
total used free shared buffers cached
Mem: 2858 1772 1085 0 166 1152
-/+ buffers/cache: 453 2404
The url of the site is https://www.super-taux.com
If someone got an idea... Thank you very much.
That is the nature of WordPress. The code and page Generation is generally horrific
Your TTFB is not the problem. For WordPress it is pretty good.
Your Server does not caching any of the static content
Character set is not specified
Keep Alive is not enabled
Your Server is Very Fast, 18,766,667 Bytes/Sec. and with the gzip compression the effective speed is 104,249,275 Bytes/Sec.
Base Page Size: 71,932 Bytes
Transmission Speed: 18,766,667 Bytes/Sec.
Compression: 5.6X
HTML Whitespace: 4.0%
Bytes Transmitted: 12,949 Bytes
HTML Transfer Rate: 104,249,275 Bytes/Sec.
The total page load time is the issue.
Typically with WP the order in which the CSS and JS files are loaded delays Start Render. If you test your page load at webpagetest.org, and look at the Waterfall you will see a large amount of time from the page loaded and Start Render.
WebPagetest Waterfall Details
The base page (Line 1) is loaded in 562 milliseconds, Start Render is at 2.789 sec.
Notice line 22 is a .woff2 font file and its Start Offset is 2.511 sec.
Then following that the Start Render begins. This one thing is costing you over 2 seconds.
Each time the Browser runs into a resource (e.g. CSS and Fonts) that can alter page layout, the Browser restarts Rendering. Meanwhile each JS file that has been loaded prior to the last CSS stops Rendering as the Browser parses the JS.
If SuperCache is working for you then you must have static web pages. With static pages you do not have to have WP Generate the pages dynamically.
If you need WP to design your pages then copy the pages rendered by WP and use them as static pages.
This may require you change the links from one page to another.
Then you will also have the ability to correct the order of the resources in the <head> and move all the CSS and Fonts above any JS and move the appropriate JS down to the bottom of the page.
Run the Google PageSpeed Insights
PageSpeed Insights
And follow the link to Eliminate render-blocking JavaScript and CSS in above-the-fold content
You need to fix your Server configuration. it is best to add this to the httpd.conf but a quick fix is to create an .htaccess file that would include the following:
AddCharset utf-8 .html .css .php .txt .js .svg
Header unset ETag
FileETag None
ExpiresActive On
ExpiresByType image/* A31536000
ExpiresByType text/* A2592030
ExpiresByType application/* A2592030
<FilesMatch "\.(js|xml|gz)$">
Header set Cache-Control "max-age=2592030, public"
Header append Vary: Accept-Encoding
</FilesMatch>
<ifModule mod_headers.c>
Header set Connection keep-Alive
</ifModule>
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|svg|swf)(\.gz)?$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
<FilesMatch "\.(html|js|css|xml|gz)$">
Header set Cache-Control "max-age=86401, public"
Header append Vary: Accept-Encoding
</FilesMatch>
Your site has very long time to Start Render (when the user sees something) and to a complete page.
1) You are loading a lot of CSS, which delays rendering. Most of it (193 KB GZipped!) looks like Bootstrap and libraries to support swipebox. Do you really need all of that? For example:
Can you reduce Bootstrap down to the subset you really need (perhaps using Less or Sass)?
Where do you use swipebox? I don't see it on the front page. If you are using a WordPress plugin that's adding it in, many plugins simply add their CSS and JS to every page, whether they are being used on that page or not. This means that everyone has a performance penalty, even if most people will never see the lightbox. There are ways to disable plugins that do this on pages where they are not being used.
2) You are loading a lot of Javascript files (perhaps from plugins). These also delay rendering. If you can limit them to the page(s) they are needed or make them asynchronous, then they will not delay rendering (but they will still slow down the page).
3) You are getting a lot of delay from using SSL/TLS. Do you really need that for every page? Two suggestions:
Use SSL/TLS only on pages that really need it (where the user is going to enter sensitive information).
If you really need to use SSL/TLS, move all of your static content (CSS, JS, images) to a CDN. That way, you will not be getting the SSL/TLS penalty for static files.
4) You use a lot of small images. Consider using a sprite instead. That way, there will only be a few images downloaded, saving a lot of HTTP connections (and extra penalty when using SSL/TLS).
Related
Big-commerce optimize:
Accept-Encoding header Nginx
Leverage browser caching
Specify a cache validator
Optimize the order of styles and scripts
In which file we can change add code to remove all these things use Nginx file. We have Cyber duck Connection access inside https://prnt.sc/nmdfjc inside which file to add code to solve speed load issue.
These items cannot be changed. BigCommerce is a SaaS platform, and web-server configuration is not something you can change. If you require this kind of optimization, place a reverse-proxy like Varnish or CloudFlare in front of your store.
Accept-Encoding header Nginx
Leverage browser caching
Specify a cache validator
Optimize the order of styles and scripts
you have some control over that in /templates/layout/base.html.
some expressions are fixed, and you will not be able to change.
{{{snippet 'htmlhead'}}}
{{{snippet 'footer'}}}
If you require more control of this, you need to rewrite the HTML using a reverse-proxy.
I just checked "PageSpeed Insights" on my website and realized that i have a problem with some files (such as image/js/css) about their expiry time.
My server is linux, i know it worked with htacces but i'm afraid that the administrator does not enable the mod_expires...
Anyway I pretty sure that there is another way to do this and to declare for a expiry time for image/script/css.
How about using mod_headers (still requires .htaccess):
<FilesMatch "\.(jpg|jpeg|gif|png|js|css)$">
Header set Cache-Control "max-age=3600"
</FilesMatch>
For example.
The CSS files that I am using load some images like this:
eg: main.css:
.nav{
background-image:url("/www/images/bg.png")
}
<link href="/www/css/main.css?version=1.2" type="stylesheet" />
CSS File is loaded in the HTML as shown above.
I know there is an approach that adds a query string like "?version=1.2" to force the browser to load the css file from the web server not from cache. But my problem is that this works ok for css file, but does nothing to the embedded images.
So what can I do to make the browser download the images embedded in the css or js files when I edit the images, but the names stay the same?
I would like not to:
1. change the image name
2. disable caching
thanks
May be use chrome incognito to make browser get the images every time ?
Adding a query string to the url like ?version=2 only prevents caching when the url changes every time, for instance image.png?random=123, where the value of random is different every time the page loads. The unique url forces the browser to re-fetch the image every time since the url doesn't match the url of the cached image.
Since you're wanting to use a static URL, I would suggest setting your HTTP server settings to send a header to the browser not to cache images. Let me know if you need help with that.
Can you use .htaccess file on your hosting (with mod_expires)?
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "access plus 1 minutes"
</IfModule>
EDIT: I saw your edit. Your question is that you want to force client to refresh images when you update them on server, without disabling browser cache?
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "modification plus 1 seconds"
</IfModule>
Google's mod_pagespeed plugin for apache will do auto-versioning for you. It's really slick.
http://code.google.com/speed/page-speed/docs/module.html
It parses HTML on its way out of the webserver (works with PHP, rails, python, static HTML -- anything) and rewrites links to CSS, JS, image files so they include an id code. It serves up the files at the modified URLs with a very long cache control on them. When the files change, it automatically changes the URLs so the browser has to re-fetch them. It basically just works, without any changes to your code. It'll even minify your code on the way out too.
Stolen from this post How to force browser to reload cached CSS/JS files?
hi i have a little problem
i uploaded a new version of my website.
and some users complained that they see some page i changed very very wrong.
anyway after a refresh they see it fine.
i think its because my css file got cached by them on an earlier time...
why isnt the browser downloading the css file by himself on first load?..
he should know the css file changed dosnt he?
thanks in advance
#UpTheCreek's method will work fine. But you can save some trouble by just changing the call and not changing the filename.
screen.css?v=12
This will also force a reload but will only require you to change the call.
he should know the css file changed
dosnt he?
Not necessarily. If your css files have been sent from the server with a max-age directive and/or an expiring date far in the future, browser are instructed to not make conditional requests to your resource (see http://developer.yahoo.com/blogs/ydn/posts/2007/05/high_performanc_2/) so they consider the resource in cache still valid.
In this case in order to force a new request you may need to rename the file or append a random querystring like file.css?848372034 or, even better, a version note like file.css?v=1
If you install the web developer toolbar (for Firefox or IE) you can disable cache. I use this when developing websites. It saves you having to rename your CSS every time you make a minor edit.
If you're on Apache try adding this in your root .htaccess:
<FilesMatch ".(css|jpg|gif|ico|jpeg|png|html)$">
ExpiresActive On
Header set Expires "Mon, 22 Nov 2010 06:00:00 GMT"
</FilesMatch> [L]
Include only file types you don't want cached , eg:
<FilesMatch ".(css|js)$">
If you know when you want to change files, set a future date - your site will be faster if these files are not regularly refreshed.
If you don't set an expiry date, browsers cache these files in proportion to their age.
The title of this question may be a bit misleading. I couldn't quite think of anything better.
Here is my problem. I am developing an Apache module that needs to manipulate a bit of content in the requested HTML document (this document can be a file on the disk or may be dynamically generated by CGI or PHP) and so I am using libxml2 with it.
I developed something working, but the problem is that when the browser requests for a page, let's say
http://localhost/a.html
the module does it's job. But if that page has references to a javascript file, a.js, or a stylesheet file, a.css, they are not getting served.
The reason as I perceived by examining the logs is that, as the browser sends requests for a javascript file let's say
[http://localhost/a.js] //putting [] because of limit of 1 url per post.
Apache again runs my module, the module uses a HTML parser, so when the content is not HTML, it gives error and exits, the request is abandoned.
How can I make my module to work only for text/html requests ?
I don't know how to make your module to decline the request. But if you don't figure how to do it you can just configure it in httpd.conf
AddHandler my-handler .html